correct-apricot
correct-apricot8mo ago

App 'flashes' dark mode before setting to light mode

Hi! For some reason, on load, my app starts off as dark mode before flashing back to light mode. How could I set it so it's permanently light mode?
3 Replies
kapa.ai
kapa.ai8mo ago
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can set the default theme of your application to light mode by modifying the ColorModeContextProvider in your context file. Here is an example of how you can do it:
export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
children,
}) => {
const colorModeFromLocalStorage = localStorage.getItem("colorMode");
const isSystemPreferenceDark = window?.matchMedia(
"(prefers-color-scheme: dark)",
).matches;

const systemPreference = isSystemPreferenceDark ? "dark" : "light";
const [mode, setMode] = useState(
colorModeFromLocalStorage || systemPreference,
);

useEffect(() => {
window.localStorage.setItem("colorMode", mode);
}, [mode]);

const setColorMode = () => {
if (mode === "light") {
setMode("dark");
} else {
setMode("light");
}
};

return (
<ColorModeContext.Provider
value={{
setMode: setColorMode,
mode,
}}
>
<ThemeProvider theme={mode === "light" ? LightTheme : DarkTheme}>
{children}
</ThemeProvider>
</ColorModeContext.Provider>
);
};
export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
children,
}) => {
const colorModeFromLocalStorage = localStorage.getItem("colorMode");
const isSystemPreferenceDark = window?.matchMedia(
"(prefers-color-scheme: dark)",
).matches;

const systemPreference = isSystemPreferenceDark ? "dark" : "light";
const [mode, setMode] = useState(
colorModeFromLocalStorage || systemPreference,
);

useEffect(() => {
window.localStorage.setItem("colorMode", mode);
}, [mode]);

const setColorMode = () => {
if (mode === "light") {
setMode("dark");
} else {
setMode("light");
}
};

return (
<ColorModeContext.Provider
value={{
setMode: setColorMode,
mode,
}}
>
<ThemeProvider theme={mode === "light" ? LightTheme : DarkTheme}>
{children}
</ThemeProvider>
</ColorModeContext.Provider>
);
};
In the above code, the useState hook is used to set the initial theme mode. The colorModeFromLocalStorage || systemPreference expression means that the mode will be set to the value stored in local storage if it exists, otherwise it will be set to the system preference. If you want to set the default theme to light mode, you can replace colorModeFromLocalStorage || systemPreference with "light". Here is the modified code:
const [mode, setMode] = useState("light");
const [mode, setMode] = useState("light");
This will set the default theme to light mode. Remember to also modify the setColorMode function to ensure that the theme can still be toggled between light and dark modes. You can find more information about theming in Refine in the official documentation (https://refine.dev/docs/api-reference/mui/theming/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai8mo ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white
wise-white8mo ago