I use dark mode. When I refresh the website, a light flash appears for a while.
Expected Behavior
Dark mode without light flash
Actual Behavior
A light flash is shown.
Screenshots (if applicable)
You can check how it behaves by throttling Chrome's CPU.
Additional Information
Currently, the application is based on a Next.js server that serves a server-side rendered HTML. The generation process cannot access the user preferences because it stays on the client side. So, the rendered HTML doesn't have class="dark" on html tag. The browser interprets the HTML and renders it in light mode. When the React application starts, the useState runs and detects the real color-schema preference, setting the dark mode correctly.
I cannot assign it to myself, but I have already prepared the PR. I hope this doesn't generate problems!
Description
I use dark mode. When I refresh the website, a light flash appears for a while.
Expected Behavior
Dark mode without light flash
Actual Behavior
A light flash is shown.
Screenshots (if applicable)
You can check how it behaves by throttling Chrome's CPU.
Additional Information
Currently, the application is based on a Next.js server that serves a server-side rendered HTML. The generation process cannot access the user preferences because it stays on the client side. So, the rendered HTML doesn't have
class="dark"onhtmltag. The browser interprets the HTML and renders it in light mode. When the React application starts, theuseStateruns and detects the real color-schema preference, setting the dark mode correctly.I cannot assign it to myself, but I have already prepared the PR. I hope this doesn't generate problems!