Theme switcher for sites, respecting user system settings
- Can automatically pick dark or light theme based on system settings
- Instantly updates theme when user is changing their system settings
- This feature is disabled when actively choosing a certain theme
- This feature can be re-enabled if the visitor switches back to
automatictheme
- Remembers your preferred theme for next visit
- Run
npm install - Run
npm run tests
- Run
npm install - Run
npm run serve - Visit
localhost:4444
- Setup a default theme attached to the
htmltag in case the visitor has disabled JavaScript.
<html data-theme="light">
...
<button class="js-changeTheme" data-theme="light">Light</button>
<button class="js-changeTheme" data-theme="dark">Dark</button>
<button class="js-changeTheme">Automatic</button>- Initialize the functionality and attach event listeners
import { Pagestick } from "dist/pagestick.js";
var pagestick = new Pagestick();
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (_) { return pagestick.changeTheme('system'); });
document.querySelectorAll('.js-changeTheme').forEach(function (element) {
return element.addEventListener('click', function (event) {
var theme = event.currentTarget.dataset.theme;
pagestick.changeTheme(theme ? theme : 'automatic');
});
});- In the example above, buttons that has the classes
js-changeThemewill trigger theme switching on click- If there is a
data-themeattribute on the button, it'll switch to that theme. Eg;data-theme="dark" - If the button lacks a
data-themeattribute, it'll switch back toautomatictheme
- If there is a
- Setup your theme colors and attributes as custom properties in CSS
:root[data-theme="dark"] {
--color-background: hsl(0, 0%, 0%);
--color-font: hsl(0, 0%, 100%);
}
:root[data-theme="light"] {
--color-background: hsl(0, 0%, 100%);
--color-font: hsl(0, 0%, 0%);
}- Use your CSS custom properties
html {
background-color: var(--color-background);
color: var(--color-font);
}