The next issue I see is with regards to the dark / light mode. When the site initially loads, it’s in dark mode… but then when you click to another page, it jumps to light mode, and every click thereafter is in light mode, however upon refresh it goes back to dark mode and the cycle continues…
Until you select a mode, either dark or light, then every page is on the correct theme, even after you refresh the page.
It’s almost as if the server wanted to render dark mode by default, as so the dark theme needs to be set by default (as if you selected it with the selector), so that every other page is the same as the initial, even after refresh.
I’ve tried with several Chrome based browsers and can’t seem to replicate the issue. Can you check your local storage to see if you have the color-scheme entry persisting?
It also happens in Microsoft Edge
Version 120.0.2210.61 (Official build) (64-bit)
Yes, the color-scheme, once set fixes the issue. (as I said, until you select a mode…)
The problem occurs when that value does not exist in local storage, and you refresh the page and after clicking to a new page (to see the dark flash to light). To reproduce, delete the color-scheme value, and refresh the page. (should show up in dark mode), then navigate to another page, (should show up in white theme). As long as you don’t select a mode, it will repeat after each refresh.
As I was trying to explain, this happens on the first load, and before you pick / set the color-scheme. Once you pick the color scheme, the problem resolves itself.
I think the fix to is preemptively set the value if it has not already been set (as if you manually selected the dark theme), then the next page visited gets set to the default dark theme, instead of flashing to the white. (if that makes sense?)
I can’t replicate this issue with Edge either, it’s never dark mode when you first access the page unless you explicitly toggle dark mode. After you toggle dark mode all pages render in Dark Mode. I’ve tried clearing localStorage and refreshing the page to try repro this issue, but it’s working as expected every time.
When you clear localStorage are you refreshing the page?
Here it is inside an incognito browser session as well.
You see the flash when the site first resolves (toggle goes from white to dark – while showing white state)
then when I click the My App logo it switches (toggle goes from dark to white – still showing white state)
Then I refresh the page, and it goes back to dark (toggle goes from white to dark – still showing light state)
Once I select a theme, the toggle will switch state (from light to dark), then when I refresh, change pages, click the My App logo and all works as expected. Same when I then switch to light mode. All works as expected even with refresh and clicking logo.
