@georapbox/theme-toggle-element v4.0.2

<theme-toggle>

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

How it works

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

Install

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

Usage

Script

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';

Markup

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

Style

The component comes with a bare minimum style, but you can override it by using the CSS Parts provided. See the usage example for more details.

API

Properties

Slots

CSS Parts

Methods

Events

Usage example

HTML

<theme-toggle></theme-toggle>

CSS

Customize the component's appearance by using CSS custom properties and CSS parts.

: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);
}

JavaScript

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);
});

Changelog

For API updates and breaking changes, check the CHANGELOG.

Development setup

Prerequisites

The project requires Node.js and npm to be installed on your environment. Preferrably, use nvm Node Version Manager and use the version of Node.js specified in the .nvmrc file by running nvm use.

Install dependencies

Install the project dependencies by running the following command.

npm install

Build for development

Watch for changes and start a development server by running the following command.

npm start

Linting

Lint the code by running the following command.

npm run lint

Testing

Run the tests by running any of the following commands.

npm test
npm run test:watch # watch mode

Build for production

Create a production build by running the following command.

npm run build

License

The MIT License (MIT)