vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 13:40:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

add setting to override theme primary shade (#1791)

Browse Source
This commit is contained in:
jeffvli
2026-03-04 20:58:30 -08:00
parent 884dcde289
commit 93791aea15
5 changed files with 80 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/themes/use-app-theme.ts
+22 -4
View File
@@ -52,7 +52,7 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
const themeInlineStylesRef = useRef<HTMLStyleElement | null>(null);
const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
const [isDarkTheme, setIsDarkTheme] = useState(getCurrentTheme());
const { followSystemTheme, theme, themeDark, themeLight, useThemeAccentColor } =
const { followSystemTheme, primaryShade, theme, themeDark, themeLight, useThemeAccentColor, useThemePrimaryShade } =
useThemeSettings();
const mqListener = (e: any) => {
@@ -144,14 +144,23 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
? themeProperties.colors?.primary || themeProperties.colors?.['state-info'] || accent
: accent;
// Use theme's primary shade if useThemePrimaryShade is enabled, otherwise use slider value
const effectivePrimaryShade = useThemePrimaryShade
? themeProperties.mantineOverride?.primaryShade
: { dark: primaryShade, light: primaryShade };
return {
...themeProperties,
colors: {
...themeProperties.colors,
primary: primaryColor,
},
mantineOverride: {
...themeProperties.mantineOverride,
...(effectivePrimaryShade != null && { primaryShade: effectivePrimaryShade }),
},
};
}, [accent, selectedTheme, useThemeAccentColor]);
}, [accent, primaryShade, selectedTheme, useThemeAccentColor, useThemePrimaryShade]);
useEffect(() => {
const root = document.documentElement;
@@ -241,7 +250,7 @@ export const useAppThemeColors = () => {
const accent = useAccent();
const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
const [isDarkTheme] = useState(getCurrentTheme());
const { followSystemTheme, theme, themeDark, themeLight, useThemeAccentColor } =
const { followSystemTheme, primaryShade, theme, themeDark, themeLight, useThemeAccentColor, useThemePrimaryShade } =
useThemeSettings();
const getSelectedTheme = () => {
@@ -262,14 +271,23 @@ export const useAppThemeColors = () => {
? themeProperties.colors?.primary || themeProperties.colors?.['state-info'] || accent
: accent;
// Use theme's primary shade if useThemePrimaryShade is enabled, otherwise use slider value
const effectivePrimaryShade = useThemePrimaryShade
? themeProperties.mantineOverride?.primaryShade
: { dark: primaryShade, light: primaryShade };
return {
...themeProperties,
colors: {
...themeProperties.colors,
primary: primaryColor,
},
mantineOverride: {
...themeProperties.mantineOverride,
...(effectivePrimaryShade != null && { primaryShade: effectivePrimaryShade }),
},
};
}, [accent, selectedTheme, useThemeAccentColor]);
}, [accent, primaryShade, selectedTheme, useThemeAccentColor, useThemePrimaryShade]);
const themeVars = useMemo(() => {
return Object.entries(appTheme?.app ?? {})