This attempts to fix the "flash" that happens when you first load the site with the dark theme. Initially the light theme is default so the screen shows light colors for a split second before switching to dark.
This change solves the flash problem for most of the states on page load, but potentially not when the system preference and local storage setting differ.
Prefers light mode + no local storage setting: No flash
Prefers dark mode + no local storage setting: No flash
Prefers light mode + light mode local storage: No flash
Prefers dark mode + dark mode local storage: No flash
Prefers light mode + dark mode local storage: Sometimes a flash
Prefers dark mode + light mode local storage: Sometimes a flash
How to test
Run the UI in preview or as the bundle for a docs project
Refresh the page after setting one or both of the settings: prefers-color-scheme and local storage
I found this helpful in chrome to manually change the prefers-color-scheme
To change local storage you can press the theme switch button, do delete you can remove from here
This attempts to fix the "flash" that happens when you first load the site with the dark theme. Initially the light theme is default so the screen shows light colors for a split second before switching to dark.
This change solves the flash problem for most of the states on page load, but potentially not when the system preference and local storage setting differ.
How to test
I found this helpful in chrome to manually change the
prefers-color-schemeTo change local storage you can press the theme switch button, do delete you can remove from here