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
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:
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:
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:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose•11mo ago
are you using nextjs ?
you can try this https://ant.design/docs/react/use-with-next#using-pages-router