Implementing a light and dark theme based on the user's OS settings has become quite popular. But often users just want their OS to be dark, while they prefer reading a website with a light background, for example. It is therefore considered good practice to offer a theme toggle, that allows the user to change the theme of the website regardless of their OS theme.
To implement that, we would usually have some HTML like the following:
<form>
<fieldset>
<legend>Color scheme</legend>
<input type="radio" name="theme" value="auto" id="theme-auto" checked />
<label for="theme-auto">auto</label>
<input type="radio" name="theme" value="light" id="theme-light" />
<label for="theme-light">light</label>
<input type="radio" name="theme" value="dark" id="theme-dark" />
<label for="theme-dark">dark</label>
</fieldset>
</form>
Using JavaScript we would then listen to the change
event of those inputs and add a class to the html
or body
node. Based on that class, we would style the page accordingly:
.theme-dark {
…
}
Using the :has()
pseudo-class, we can be implement this theme toggle without JavaScript. Instead of using a class, we can do this:
html:has([name="theme"][value="dark"]:checked) {
…
}
To make sure that the user does not have to change the theme on every page visit, we should of course still use some JavaScript:
We save the selection in the localStorage
, but then — instead of adding a theme class — we simply set the checked
attribute of the correct input in the theme toggle. Ideally we do this in an inline script (as opposed to some asynchronously fetched script) to avoid any possible layout flickering.
Complete example
HTML
<form>
<fieldset class="ThemeToggle">
<legend class="ThemeToggle-title">Color scheme</legend>
<input type="radio" name="theme" value="auto" id="theme-auto" checked />
<label for="theme-auto">auto</label>
<input type="radio" name="theme" value="light" id="theme-light" />
<label for="theme-light">light</label>
<input type="radio" name="theme" value="dark" id="theme-dark" />
<label for="theme-dark">dark</label>
</fieldset>
</form>
<script>
function renderTheme(theme) {
if (!["auto", "light", "dark"].includes(theme)) return;
const checkedInput = document.getElementById(`theme-${theme}`);
if (checkedInput) {
checkedInput.checked = true;
}
}
renderTheme(localStorage.theme);
</script>
CSS
html {
… /* styling for light theme */
}
html:has([name="theme"][value="light"]:checked) {
… /* styling for light theme */
}
@media (prefers-color-scheme: dark) {
html {
… /* styling for dark theme */
}
}
html:has([name="theme"][value="dark"]:checked) {
… /* styling for dark theme */
}
JavaScript
document.querySelectorAll(".ThemeToggle input").forEach((input) => {
input.addEventListener("change", onThemeChange);
});
function onThemeChange({ target }) {
const { value } = target;
renderTheme(value);
saveTheme(value);
}
function saveTheme(theme) {
if (theme === "auto") {
localStorage.removeItem("theme");
} else {
localStorage.setItem("theme", theme);
}
}
Browser support
At the time of writing this (04.02.2023), :has()
is supported by all major browsers except for Firefox.
To make sure this also works in Firefox, you can simply combine this approach with the class-based approach mentioned earlier — and throw it away as soon as Firefox turns green! :) (:has() on caniuse.com).
Important
Just be aware that you cannot combine both selectors as :has()
is invalid in Firefox. This means that the following snippet would not work at all in Firefox:
.theme-dark,html:has([name="theme"][value="dark"]:checked) {
… /* styling for dark theme */
}
Instead you have to use the selectors separately:
.theme-dark {
… /* styling for dark theme */
}
html:has([name="theme"][value="dark"]:checked) {
… /* styling for dark theme */
}
Optimizing CSS for theme toggles
Since it can be a bit cumbersome to write CSS for theme toggles as you would have to duplicate some code in your CSS,Fynn wrote down a nice approach using custom properties, which I highly recommend: CSS Custom Property toggles for themes.
Top comments (0)