React Color Scheme Switch

ThemeToggle

The central component of react-color-scheme-switch. Most basically (without attached behavior), it just looks like this:

<ThemeToggle />

Click on it to see its three positions. They represent (from left to right): day/light mode, auto mode, and night/dark mode.

The onClick event handler receives the state 'dark' | 'light' | 'auto'. As an example, this page’s CSS reacts to <html data-color-scheme="dark|light"/>:

<ThemeToggle
  onClick={(evt, state) => {
    document.documentElement.dataset.colorScheme = state;
  }}
/>