1
0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00

fix default color mode handling

This commit is contained in:
checktheroads
2021-01-02 16:53:41 -07:00
parent 24d8b7ea24
commit f14254cb97
2 changed files with 21 additions and 3 deletions

View File

@@ -19,7 +19,7 @@ const queryClient = new QueryClient();
export const HyperglassProvider = (props: THyperglassProvider) => { export const HyperglassProvider = (props: THyperglassProvider) => {
const { config, children } = props; const { config, children } = props;
const value = useMemo(() => config, []); const value = useMemo(() => config, []);
const userTheme = value && makeTheme(value.web.theme); const userTheme = value && makeTheme(value.web.theme, value.web.theme.default_color_mode);
const theme = value ? userTheme : defaultTheme; const theme = value ? userTheme : defaultTheme;
return ( return (
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>

View File

@@ -173,12 +173,30 @@ function importColors(userColors: IConfigTheme['colors']): Theme.Colors {
}; };
} }
export function makeTheme(userTheme: IConfigTheme): Theme.Full { export function makeTheme(
userTheme: IConfigTheme,
defaultColorMode: 'dark' | 'light' | null,
): Theme.Full {
const [fonts, fontWeights] = importFonts(userTheme.fonts); const [fonts, fontWeights] = importFonts(userTheme.fonts);
const colors = importColors(userTheme.colors);
const config = {} as Theme.Full['config'];
switch (defaultColorMode) {
case null:
config.useSystemColorMode = true;
break;
case 'light':
config.initialColorMode = 'light';
break;
case 'dark':
config.initialColorMode = 'dark';
break;
}
const defaultTheme = extendTheme({ const defaultTheme = extendTheme({
colors: importColors(userTheme.colors),
fonts, fonts,
colors,
config,
fontWeights, fontWeights,
styles: { styles: {
global: props => ({ global: props => ({