foreign-sapphire•10mo 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•10mo 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•10mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

robust-apricot•10mo ago

are you using nextjs ? you can try this https://ant.design/docs/react/use-with-next#using-pages-router