How to default a theme to light mode over dark mode? (using Chakra UI Blue theme)
Tried changing some values here:
""""
export const RefineThemes = Object.keys(refineCustomThemes).reduce(
(acc, key) => {
const themeName = key as keyof typeof refineCustomThemes;
return {
...acc,
[key]: extendTheme({
config: {
initialColorMode: "system",
},
styles: {
global: (props: StyleFunctionProps) => {
const bgLight = props.theme.colors.gray[50];
const bgDark = props.theme.colors.gray[900];
return {
"html, body": {
background: mode(bgLight, bgDark)(props),
},
};
},
},
colors: {
brand: refineCustomThemes[themeName],
refine: {
...refineCustomColors,
},
},
}),
};
},
{},
) as Record<keyof typeof refineCustomThemes, RefineTheme>;
"""
but didn't work. This is what I have for the provider " <ChakraProvider theme={RefineThemes.Blue}>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
notificationProvider={notificationProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}"
""""
export const RefineThemes = Object.keys(refineCustomThemes).reduce(
(acc, key) => {
const themeName = key as keyof typeof refineCustomThemes;
return {
...acc,
[key]: extendTheme({
config: {
initialColorMode: "system",
},
styles: {
global: (props: StyleFunctionProps) => {
const bgLight = props.theme.colors.gray[50];
const bgDark = props.theme.colors.gray[900];
return {
"html, body": {
background: mode(bgLight, bgDark)(props),
},
};
},
},
colors: {
brand: refineCustomThemes[themeName],
refine: {
...refineCustomColors,
},
},
}),
};
},
{},
) as Record<keyof typeof refineCustomThemes, RefineTheme>;
"""
but didn't work. This is what I have for the provider " <ChakraProvider theme={RefineThemes.Blue}>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
notificationProvider={notificationProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}"
