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

Category: Color , Javascript , Recommended | September 15, 2022
Author:CH4R4F
Views Total:703 views
Official Page:Go to website
Last Update:September 15, 2022
License:MIT

Preview:

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

Description:

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

You Might Be Interested In:


Leave a Reply