Automatically switch NativeBase docs website light/dark theme based on prefers-color-scheme

[nobelharvards]

Currently, the NativeBase docs website defaults to dark theme and has a theme toggler at the top right to switch to light theme.

When refreshing the page, the site reverts back to dark theme.

The website should check for user preference via prefers-color-scheme and automatically switch light/dark themes accordingly.

If the user clicks on the theme toggler to manually switch themes, this should be taken as an explicit preference for a static light or dark theme and the automatic switching should stop. This preference should be stored in local storage for return visits.

Otherwise, first time visitors and existing users who have not clicked on the theme toggler should have the page automatically switch themes based on 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.