{
useEffect(() => {
const colorMode = mapThemeModeToColorMode(settings.theme);
- const colorScheme = mapThemeModeToColorScheme(settings.theme);
+ const colorScheme = mapThemeModeToColorScheme(
+ settings.theme,
+ settings.increaseContrast,
+ );
setColorMode(colorMode);
setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME);
setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME);
- }, [settings.theme, setColorMode, setDayScheme, setNightScheme]);
+ }, [
+ settings.theme,
+ settings.increaseContrast,
+ setColorMode,
+ setDayScheme,
+ setNightScheme,
+ ]);
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for particular state changes
useEffect(() => {
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 01898c65f..543df50cc 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -189,15 +189,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
>
Light default
-
-
@@ -249,6 +239,51 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
+
+
+
+
+
{
it('should map theme mode to github primer color mode', () => {
expect(mapThemeModeToColorMode(Theme.LIGHT)).toBe('day');
- expect(mapThemeModeToColorMode(Theme.LIGHT_HIGH_CONTRAST)).toBe('day');
expect(mapThemeModeToColorMode(Theme.LIGHT_COLORBLIND)).toBe('day');
expect(mapThemeModeToColorMode(Theme.LIGHT_TRITANOPIA)).toBe('day');
expect(mapThemeModeToColorMode(Theme.DARK)).toBe('night');
- expect(mapThemeModeToColorMode(Theme.DARK_HIGH_CONTRAST)).toBe('night');
expect(mapThemeModeToColorMode(Theme.DARK_COLORBLIND)).toBe('night');
expect(mapThemeModeToColorMode(Theme.DARK_TRITANOPIA)).toBe('night');
expect(mapThemeModeToColorMode(Theme.DARK_DIMMED)).toBe('night');
@@ -16,27 +14,44 @@ describe('renderer/utils/theme.ts', () => {
});
it('should map theme mode to github primer color scheme', () => {
- expect(mapThemeModeToColorScheme(Theme.LIGHT)).toBe('light');
- expect(mapThemeModeToColorScheme(Theme.LIGHT_HIGH_CONTRAST)).toBe(
+ expect(mapThemeModeToColorScheme(Theme.LIGHT, false)).toBe('light');
+ expect(mapThemeModeToColorScheme(Theme.LIGHT, true)).toBe(
'light_high_contrast',
);
- expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND)).toBe(
+ expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, false)).toBe(
'light_colorblind',
);
- expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA)).toBe(
+ expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, true)).toBe(
+ 'light_colorblind_high_contrast',
+ );
+ expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, false)).toBe(
'light_tritanopia',
);
- expect(mapThemeModeToColorScheme(Theme.DARK)).toBe('dark');
- expect(mapThemeModeToColorScheme(Theme.DARK_HIGH_CONTRAST)).toBe(
+ expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, true)).toBe(
+ 'light_tritanopia_high_contrast',
+ );
+ expect(mapThemeModeToColorScheme(Theme.DARK, false)).toBe('dark');
+ expect(mapThemeModeToColorScheme(Theme.DARK, true)).toBe(
'dark_high_contrast',
);
- expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND)).toBe(
+ expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, false)).toBe(
'dark_colorblind',
);
- expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA)).toBe(
+ expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, true)).toBe(
+ 'dark_colorblind_high_contrast',
+ );
+ expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, false)).toBe(
'dark_tritanopia',
);
- expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED)).toBe('dark_dimmed');
- expect(mapThemeModeToColorScheme(Theme.SYSTEM)).toBe(null);
+ expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, true)).toBe(
+ 'dark_tritanopia_high_contrast',
+ );
+ expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, false)).toBe(
+ 'dark_dimmed',
+ );
+ expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, true)).toBe(
+ 'dark_dimmed_high_contrast',
+ );
+ expect(mapThemeModeToColorScheme(Theme.SYSTEM, false)).toBe(null);
});
});
diff --git a/src/renderer/utils/theme.ts b/src/renderer/utils/theme.ts
index eca0e631a..47de55e06 100644
--- a/src/renderer/utils/theme.ts
+++ b/src/renderer/utils/theme.ts
@@ -8,12 +8,10 @@ export const DEFAULT_NIGHT_COLOR_SCHEME = 'dark';
export function mapThemeModeToColorMode(themeMode: Theme): ColorModeWithAuto {
switch (themeMode) {
case Theme.LIGHT:
- case Theme.LIGHT_HIGH_CONTRAST:
case Theme.LIGHT_COLORBLIND:
case Theme.LIGHT_TRITANOPIA:
return 'day';
case Theme.DARK:
- case Theme.DARK_HIGH_CONTRAST:
case Theme.DARK_COLORBLIND:
case Theme.DARK_TRITANOPIA:
case Theme.DARK_DIMMED:
@@ -23,27 +21,37 @@ export function mapThemeModeToColorMode(themeMode: Theme): ColorModeWithAuto {
}
}
-export function mapThemeModeToColorScheme(themeMode: Theme): string | null {
+export function mapThemeModeToColorScheme(
+ themeMode: Theme,
+ increaseContrast: boolean,
+): string | null {
+ let base: string | null;
+
switch (themeMode) {
case Theme.LIGHT:
- return 'light';
- case Theme.LIGHT_HIGH_CONTRAST:
- return 'light_high_contrast';
+ base = 'light';
+ break;
case Theme.LIGHT_COLORBLIND:
- return 'light_colorblind';
+ base = 'light_colorblind';
+ break;
case Theme.LIGHT_TRITANOPIA:
- return 'light_tritanopia';
+ base = 'light_tritanopia';
+ break;
case Theme.DARK:
- return 'dark';
- case Theme.DARK_HIGH_CONTRAST:
- return 'dark_high_contrast';
+ base = 'dark';
+ break;
case Theme.DARK_COLORBLIND:
- return 'dark_colorblind';
+ base = 'dark_colorblind';
+ break;
case Theme.DARK_TRITANOPIA:
- return 'dark_tritanopia';
+ base = 'dark_tritanopia';
+ break;
case Theme.DARK_DIMMED:
- return 'dark_dimmed';
+ base = 'dark_dimmed';
+ break;
default:
return null;
}
+
+ return increaseContrast ? `${base}_high_contrast` : base;
}