From 2e4d2fcccad4a66beeb10bb8da83e2846058e702 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 2 Jan 2026 23:08:15 +0100
Subject: [PATCH] Fix primary, secondary dynamic theme colors for inactive
 theme mode

When the DARK mode is active, the primary and secondary colors still need to be correctly selected for the dynamic theme light mode.
Otherwise, in case the dynamic color theme gets saved, the inactive theme mode has incorrect primary and secondary colors
---
 src/features/theme/services/ThemeCreator.ts | 22 +++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/features/theme/services/ThemeCreator.ts b/src/features/theme/services/ThemeCreator.ts
index bc240588..d753c5cf 100644
--- a/src/features/theme/services/ThemeCreator.ts
+++ b/src/features/theme/services/ThemeCreator.ts
@@ -71,10 +71,11 @@ const getBackgroundColor = (
 };
 
 const createAppThemeWithDynamicColors = (
-    primaryColor: string | null | undefined,
+    primaryColorDark: string | null | undefined,
+    primaryColorLight: string | null | undefined,
     appTheme: AppTheme['muiTheme'],
 ): AppTheme['muiTheme'] => {
-    if (!primaryColor) {
+    if (!primaryColorDark || !primaryColorLight) {
         return appTheme;
     }
 
@@ -83,14 +84,14 @@ const createAppThemeWithDynamicColors = (
         colorSchemes: {
             light: {
                 palette: {
-                    primary: { main: primaryColor },
-                    secondary: { main: complement(primaryColor) },
+                    primary: { main: primaryColorLight },
+                    secondary: { main: complement(primaryColorLight) },
                 },
             },
             dark: {
                 palette: {
-                    primary: { main: primaryColor },
-                    secondary: { main: complement(primaryColor) },
+                    primary: { main: primaryColorDark },
+                    secondary: { main: complement(primaryColorDark) },
                 },
             },
         },
@@ -114,7 +115,11 @@ export const createAppColorTheme = (
     setPureBlackMode: boolean,
     mode: Exclude<ThemeMode, ThemeMode.SYSTEM>,
 ): AppTheme['muiTheme'] => {
-    const appThemeWithDominantPrimaryColor = createAppThemeWithDynamicColors(dynamicColor?.average.hex, appTheme);
+    const appThemeWithDominantPrimaryColor = createAppThemeWithDynamicColors(
+        dynamicColor?.average.hex,
+        dynamicColor?.average.hex,
+        appTheme,
+    );
     const themePrimaryColorForBackground = createMuiTheme({
         ...appThemeWithDominantPrimaryColor,
         defaultColorScheme: mode,
@@ -150,7 +155,8 @@ export const createAppColorTheme = (
     });
 
     const appThemeWithVibrantPrimaryColor = createAppThemeWithDynamicColors(
-        getVibrantColorForTheme(dynamicColor, mode),
+        getVibrantColorForTheme(dynamicColor, ThemeMode.DARK),
+        getVibrantColorForTheme(dynamicColor, ThemeMode.LIGHT),
         themeBackgroundColor,
     );
     return deepmerge(themeBackgroundColor, appThemeWithVibrantPrimaryColor);