diff --git a/src/renderer/context/App.tsx b/src/renderer/context/App.tsx index 4ca7a5f40..14b085815 100644 --- a/src/renderer/context/App.tsx +++ b/src/renderer/context/App.tsx @@ -55,7 +55,9 @@ import { import { clearState, loadState, saveState } from '../utils/storage'; import { DEFAULT_DAY_COLOR_SCHEME, + DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME, DEFAULT_NIGHT_COLOR_SCHEME, + DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME, mapThemeModeToColorMode, mapThemeModeToColorScheme, } from '../utils/theme'; @@ -276,8 +278,18 @@ export const AppProvider = ({ children }: { children: ReactNode }) => { ); setColorMode(colorMode); - setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME); - setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME); + + // When colorScheme is null (System theme), use appropriate fallbacks + // based on whether high contrast is enabled + const dayFallback = settings.increaseContrast + ? DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME + : DEFAULT_DAY_COLOR_SCHEME; + const nightFallback = settings.increaseContrast + ? DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME + : DEFAULT_NIGHT_COLOR_SCHEME; + + setDayScheme(colorScheme ?? dayFallback); + setNightScheme(colorScheme ?? nightFallback); }, [ settings.theme, settings.increaseContrast, diff --git a/src/renderer/utils/theme.test.ts b/src/renderer/utils/theme.test.ts index 9701dc293..6f176c39f 100644 --- a/src/renderer/utils/theme.test.ts +++ b/src/renderer/utils/theme.test.ts @@ -1,5 +1,12 @@ import { Theme } from '../types'; -import { mapThemeModeToColorMode, mapThemeModeToColorScheme } from './theme'; +import { + DEFAULT_DAY_COLOR_SCHEME, + DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME, + DEFAULT_NIGHT_COLOR_SCHEME, + DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME, + mapThemeModeToColorMode, + mapThemeModeToColorScheme, +} from './theme'; describe('renderer/utils/theme.ts', () => { it('should map theme mode to github primer color mode', () => { @@ -53,5 +60,16 @@ describe('renderer/utils/theme.ts', () => { 'dark_dimmed_high_contrast', ); expect(mapThemeModeToColorScheme(Theme.SYSTEM, false)).toBe(null); + expect(mapThemeModeToColorScheme(Theme.SYSTEM, true)).toBe(null); + }); + + it('should export high contrast color scheme constants', () => { + expect(DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME).toBe('light_high_contrast'); + expect(DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME).toBe('dark_high_contrast'); + }); + + it('should export default color scheme constants', () => { + expect(DEFAULT_DAY_COLOR_SCHEME).toBe('light'); + expect(DEFAULT_NIGHT_COLOR_SCHEME).toBe('dark'); }); }); diff --git a/src/renderer/utils/theme.ts b/src/renderer/utils/theme.ts index 8a3ba4976..f0131b80c 100644 --- a/src/renderer/utils/theme.ts +++ b/src/renderer/utils/theme.ts @@ -4,6 +4,8 @@ import { Theme } from '../types'; export const DEFAULT_DAY_COLOR_SCHEME = 'light'; export const DEFAULT_NIGHT_COLOR_SCHEME = 'dark'; +export const DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME = 'light_high_contrast'; +export const DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME = 'dark_high_contrast'; export function mapThemeModeToColorMode(themeMode: Theme): ColorModeWithAuto { switch (themeMode) {