diff --git a/package.json b/package.json index a67d29de..517e03d6 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "node-vibrant": "4.0.3", "notistack": "3.0.2", "p-limit": "7.2.0", + "polished": "4.3.1", "react": "19.2.0", "react-dom": "19.2.0", "react-hotkeys-hook": "5.2.1", diff --git a/src/features/theme/services/ThemeCreator.ts b/src/features/theme/services/ThemeCreator.ts index 04df313e..95ca3141 100644 --- a/src/features/theme/services/ThemeCreator.ts +++ b/src/features/theme/services/ThemeCreator.ts @@ -19,9 +19,9 @@ import { import { useCallback } from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports import { deepmerge } from '@mui/utils'; -// eslint-disable-next-line no-restricted-imports import { Palette } from '@vibrant/color'; import { PaletteBackgroundChannel } from 'node_modules/@mui/material/esm/styles/createThemeWithVars'; +import { complement } from 'polished'; import { MediaQuery } from '@/base/utils/MediaQuery.tsx'; import { AppTheme } from '@/features/theme/services/AppThemes.ts'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; @@ -69,7 +69,7 @@ const getBackgroundColor = ( return undefined; }; -const createAppThemeWithDynamicPrimaryColor = ( +const createAppThemeWithDynamicColors = ( primaryColor: string | null | undefined, appTheme: AppTheme['muiTheme'], ): AppTheme['muiTheme'] => { @@ -80,8 +80,18 @@ const createAppThemeWithDynamicPrimaryColor = ( return { ...appTheme, colorSchemes: { - light: { palette: { primary: { main: primaryColor } } }, - dark: { palette: { primary: { main: primaryColor } } }, + light: { + palette: { + primary: { main: primaryColor }, + secondary: { main: complement(primaryColor) }, + }, + }, + dark: { + palette: { + primary: { main: primaryColor }, + secondary: { main: complement(primaryColor) }, + }, + }, }, } satisfies AppTheme['muiTheme']; }; @@ -138,7 +148,7 @@ const createAppColorTheme = ( setPureBlackMode: boolean, mode: Exclude, ): AppTheme['muiTheme'] => { - const appThemeWithDominantPrimaryColor = createAppThemeWithDynamicPrimaryColor(dynamicColor?.average.hex, appTheme); + const appThemeWithDominantPrimaryColor = createAppThemeWithDynamicColors(dynamicColor?.average.hex, appTheme); const themePrimaryColorForBackground = createMuiTheme({ ...appThemeWithDominantPrimaryColor, defaultColorScheme: mode, @@ -173,7 +183,7 @@ const createAppColorTheme = ( }, }); - const appThemeWithVibrantPrimaryColor = createAppThemeWithDynamicPrimaryColor( + const appThemeWithVibrantPrimaryColor = createAppThemeWithDynamicColors( getHighestPopulationColor(dynamicColor, mode), themeBackgroundColor, ); diff --git a/yarn.lock b/yarn.lock index 3fc226ca..37bc9dd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1540,7 +1540,7 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.11.2", "@babel/runtime@^7.28.4": +"@babel/runtime@^7.11.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.28.4": version "7.28.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326" integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ== @@ -8239,6 +8239,13 @@ pngjs@^6.0.0: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821" integrity sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg== +polished@4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548" + integrity sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA== + dependencies: + "@babel/runtime" "^7.17.8" + possible-typed-array-names@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"