javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode inconsistencies

Browse Source 
fixes #226
fixes #198
This commit is contained in:
Lei Nelissen
2024-07-22 13:17:26 +02:00
parent 87b08050e4
commit a64f52c4f9
5 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Colors.tsx
View File

@@ -108,14 +108,21 @@ export const themes: Record<'dark' | 'light' | 'dark-highcontrast' | 'light-high
// Create context for supplying the theming information
export const ColorSchemeContext = React.createContext(themes.dark);
/**
* This hook returns the proper color scheme, taking into account potential user overrides.
*/
export function useUserOrSystemScheme() {
const systemScheme = useColorScheme();
const userScheme = useTypedSelector((state) => state.settings.colorScheme);
return userScheme === ColorScheme.System ? systemScheme : userScheme;
}
/**
* This provider contains the logic for settings the right theme on the ColorSchemeContext.
*/
export function ColorSchemeProvider({ children }: PropsWithChildren<{}>) {
const systemScheme = useColorScheme();
const highContrast = useAccessibilitySetting('darkerSystemColors');
const userScheme = useTypedSelector((state) => state.settings.colorScheme);
const scheme = userScheme === ColorScheme.System ? systemScheme : userScheme;
const scheme = useUserOrSystemScheme();
const theme = highContrast
? themes[`${scheme || 'light'}-highcontrast`]
: themes[scheme || 'light'];