A web component that simplifies controlling light/dark theming for a site.
npm i @cdransf/theme-toggleAdd 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
controlortoggleand defaults totoggle. Iftoggleis 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 "localforlocalStorage. -
Add the
theme-toggle.jsto your markup, set your template. -
Add
<meta name="color-scheme" content="light dark">to your site's header. -
Use
light-darkto define your preferred colors for each scheme.
