ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix primary, secondary dynamic theme colors for inactive theme mode

Browse Source 
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
This commit is contained in:
schroda
2026-01-02 23:08:15 +01:00
parent 3ef4e92114
commit 2e4d2fccca
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/features/theme/services/ThemeCreator.ts
View File

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