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

Category: Color , Javascript , Recommended | May 24, 2024
Views Total:44 views
Official Page:Go to website
Last Update:May 24, 2024


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


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.

How to use it:

1. Install and import the Theme-Toggle component.

$ 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>


v1.2.4 (05/24/2024)

  • Update

You Might Be Interested In:

Leave a Reply