Skip to content

Latest commit

 

History

History

theme-toggle

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

README.md

README.md

 
 

index.css

index.css

 
 

index.html

index.html

 
 

index.js

index.js

 
 

index.spec.js

index.spec.js

 
 

README.md

Theme Toggle

  • Creates inputs for auto, light and dark.
  • Stores the selection in localStorage (if it is not auto) and selects the correct input on upcoming page loads.
  • Can use Light DOM instead of markup generated by the Web Component.

Options

themes

If you want to toggle between more than auto, light and dark themes, you can use themes property. The value should be a space separate list of theme names.

name

By default, the name of the input elements is theme (or theme-{n} if you have more than on theme-toggle on a page). You can change this by using the name attribute.

Usage

Please checkout these examples on how to use the Web Component.

Applying a theme

Please note that this Web Component does not add any classes or attributes to the DOM.

Instead you can :has() to apply the correct theme to your page. Please check out this blog post for an example: https://www.mgrossklaus.de/notes/2023-02-04-implementing-a-theme-toggle-with-html-and-css-only-almost/.