<theme-selector>
A Web Component to set a site-wide theme preference using a native select element, saved to local storage.
There are three stargazers on GitHub and it has over 200 downloads on npm.
Even though I had a great time building out and testing this Web Component, I’m currently using <storage-form> by David Darnes to handle toggling of themes for its simplicity and ability to be used in a much wider array of situations!
<theme-selector> is a native Web Component that adds functionality on top of the native HTML <select> element that adds the ability for to set a user-preferred theme across your website that persists between pages and visits by saving the choice in local storage.
Usage Permalink ¶
You can begin using the <theme-selector> Web Component by including a <script> tag in your HTML, with the component itself wrapping a <select> element containing an <option> for each of the themes you want to provide to the user:
<script type="module" src="theme-selector.js"></script>
<theme-selector>
<select autocomplete="off">
<option value="light">
Light
</option>
<option value="dark">
Dark
</option>
</select>
</theme-selector>To prevent <theme-selector> from appearing in browsers which either do not support Web Components or have JavaScript disabled, this small snippet of CSS will check if the element has been properly defined (to the browser’s understanding) and apply display: none; if not:
theme-selector:not(:defined) {
display: none;
}There are a number of ways to augment and customise the functionality of the Web Component by attaching data attributes to <theme-selector>:
| option | default value | description |
|---|---|---|
data-key |
theme |
Controls the name of the data attribute that holds the name of the currently-selected theme. |
data-dark-theme |
dark |
Controls the name of the darktheme which is applied when either the user’s browser/OS preference is set to Darkor they have specifically selected your custom dark theme. |
data-root-element |
document.documentElement |
When undefined, the theme data attribute will be applied to the document’s root element (<html>/:root in most cases).When defined, this acts as a selector query to target a specific element in the document on which the theme data attribute is applied. |
data-transition-class |
theme-transitioning |
Controls the class name that is applied to the root element which you can use to apply CSS, to allow a smooth transition between themes. |
data-transition-duration |
1000 |
Controls the amount of time (in *milliseconds*) that the transition class will be applied to the root element. |
Further Reading Permalink ¶
You can check out the full documentation, source code, and demos on GitHub, as well as provide feedback and report bugs on GitHub: