Author: | CH4R4F |
---|---|
Views Total: | 794 views |
Official Page: | Go to website |
Last Update: | September 15, 2022 |
License: | MIT |
Preview:

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>