@cdransf/theme-toggle
v3.2.1
Published
A web component that simplifies controlling light/dark theming for a site.
Downloads
441
Maintainers
Readme
<theme-toggle>
web component
A web component that simplifies controlling light/dark theming for a site.
npm i @cdransf/theme-toggle
Example usage
Add the theme-load.js
to your document <body>
to prevent an unthemed flash on load. This ensures access to the document
.
<body>
<script type="module" src="/scripts/theme-load.js"></script>
<theme-toggle>
<button aria-label="Light and dark theme toggle" class="theme-toggle">
<span class="light"></span>
<span class="dark"></span>
</button>
</theme-toggle>
</body>
Optional attributes:
mode: accepts either
control
ortoggle
and defaults totoggle
. Iftoggle
is set, you can add<span class="auto"></span>
and allow the user to cycle back to their system preference.storage: sets the storage API to be used. Defaults to
sessionStorage
, but can also be set to "local
forlocalStorage
.Add the
theme-toggle.js
to your markup, set your template.Add
<meta name="color-scheme" content="light dark">
to your site's header.Use
light-dark
to define your preferred colors for each scheme.