Dark/Light Mode Switcher Using CSS Filters - Theme-Toggle

Preview:

Theme-Toggle is a web component that allows you to switch between dark modes and light modes using CSS invert and hue-rotate filters.

It provides an easy way to implement Dark Mode on your website or web app without writing any CSS rules.

1. Install and import the Theme-Toggle component.

# NPM
$ npm i theme-toggle

import "theme-toggle";

// OR from a CDN
<script type="module" src="https://unpkg.com/[email protected]/dist/theme-toggle.js" crossorigin="anonymous"></script>

2. Add the <theme-toggle /> component to the page and specify the current theme.

<theme-toggle theme="light"></theme-toggle>

3. Determine whether to store the current theme in the local storage. Default: true.

<theme-toggle theme="light" storable="false"></theme-toggle>

4. That’s it. The component will automatically apply CSS filters to the <HTML> tag as follows:

// Light Mode
<html style="filter: invert(0) hue-rotate(0deg);"><head>

// Dark Mode
<html style="filter: invert(1) hue-rotate(180deg);"><head>