Vanilla JavaScript Color Scheme Switcher
Introduction
This page is a prototype for making a dark/light mode color scheme switcher that prevents flashes of unstyled content (FOUC) and loading blink as much as possible. I'm doing a full write up as well that I'll published when everything is finalized.
Goals
- Use Vanilla JavaScript that can be used with static site generators
- Save the user's preferred scheme between visits
- Avoid Flash Of Unstyled Content (FOUC) as much as possible
- Avoid browser flash when loading a new page as much as possible
- Prevent the Firefox console message "Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content." as much as possible
- Only show color scheme picker if JavaScript is enabled
- Only show 'auto' button if there is data for it
- Default to light mode color scheme if JavaScript is not enabled
- Provide for multiple instances of the switcher that stay in sync
- Update the
color-schemeCSS property to style form controls, etc...
Files
The source code for this site is on GitHub at:
https://github.com/alanwsmith/color-scheme-switcher.alanwsmith.com
The individual files are: