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:
@@ -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}>
|
||||||
|
@@ -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 => ({
|
||||||
|
Reference in New Issue
Block a user