Automatically switch Bit docs website's light/dark theme based on prefers-color-scheme

[nobelharvards]

Currently, the Bit docs website has a theme toggler at the top right. This is the only way of changing between light and dark themes.

The website should check for user preference via prefers-color-scheme and automatically switch the light/dark theme accordingly. Someone has designed great looking light and dark themes, but the only way to switch between them is a manual toggle.

If the user clicks on the theme toggler, this should be taken as an explicit preference for a static light or dark theme. Their preference should be saved in local storage for future visits. Currently, the website switches back to the light theme after a refresh. To reproduce: Go to Bit docs website > Toggle theme to dark > Refresh page > Website is back on light theme.

If the user is a first time visitor and/or has not ever clicked on the theme toggler, the website should automatically switch between light and dark according to prefers-color-scheme.

Ideally, the switch should happen without having to refresh the page. The site should watch for changes to prefers-color-scheme.

This should be relatively trivial to implement and has a big impact on user experience.

For comparison, Node.js' website automatically switches between light and dark without requiring a page refresh.

Try it: Go to https://nodejs.org/en/docs/ > Press F12 for developer tools > Go to Rendering tab > Switch between light and dark in Emulate CSS media feature prefers-color-scheme.

If your theme does not change, try clearing cache & cookies for node.js only.