Set "secondaryColor" for dynamic themes

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",

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<ThemeMode, ThemeMode.SYSTEM>,
 ): 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,
     );

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"