A custom element that allows you to toggle between light, dark and system theme.

By default, the component determines the theme from user's system preferences using the prefers-color-scheme media query. When the theme is changed, by clicking the toggle button, the selected theme is saved in localStorage if noStorage is false (default). A data-theme attibute is added to the root element of the document, with the appropriate value (light, dark, system). The default value is system, but if the user has previously selected a theme and the noStorage property is not set to true, the saved theme is used instead.

API documentation • Demo

$ npm install --save @georapbox/theme-toggle-element

import { ThemeToggle } from './node_modules/@georapbox/theme-toggle-element/dist/theme-toggle.js';

// Manually define the element.
ThemeToggle.defineCustomElement();

Alternatively, you can import the automatically defined custom element.

import './node_modules/@georapbox/theme-toggle-element/dist/theme-toggle-defined.js';

<theme-toggle storage-key="theme-preference"></theme-toggle>

The component comes with a bare minimum style, but you can override it by using the CSS Parts provided. A working example of styling the component can be found here. Below are demonstrated some available parts for styling.

theme-toggle:not(:defined) {
  display: none;
}

theme-toggle::part(base) {
  border: 1px solid #0d6efd;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: #0d6efd;
  font-size: 1rem;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

@media (hover: hover) {
  theme-toggle::part(base):hover {
    border-color: #0a58ca;
    background-color: #0b5ed7;
  }
}

  <style>
    :root {
      --body-color: #000;
      --body-bg-color: #fff;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --body-color: #fff;
        --body-bg-color: #000;
      }
    }

    :root[data-theme="light"] {
      --body-color: #000;
      --body-bg-color: #fff;
    }

    :root[data-theme="dark"] {
      --body-color: #fff;
      --body-bg-color: #000;
    }

    theme-toggle:not(:defined) {
      display: none;
    }

    theme-toggle::part(base) {
      border: 1px solid var(--body-color);
    }
  </style>

  <theme-toggle></theme-toggle>

  <script>
    import { ThemeToggle } from './node_modules/@georapbox/theme-toggle-element/dist/theme-toggle.js';

    ThemeToggle.defineCustomElement();

    documemt.addEventListener('tt-theme-change', evt => {
      console.log('tt-theme-change ->', evt.detail);
    });
  </script>

For API updates and breaking changes, check the CHANGELOG.

The MIT License (MIT)