Accessible CSS-Only Light/Dark Toggles (with JS persistence as progressive enhancement)

March 25, 2024

CSS’s :has() can obviate JS

Astronomy: a view of London in 1748, with diagrams of an eclipse. Engraving. Wellcome Collection. Public Domain Mark. Source: Wellcome Collection.

CSS’s :has() can obviate JS

The traditional method of giving users a toggle to switch a site’s theme (for example between light and dark mode) requires JavaScript. A user’s interaction with a button or dropdown triggers JS which adds a class somewhere, or adds an attribute somewhere, or modifies a piece of state. Thanks to CSS’s :has(), the core functionality can now be done without JS. This article I wrote for Smashing Magazine covers that, plus: how to respect user’s system-wide color scheme preferences and motion preferences; how to change user-agent styles with CSS’s color-scheme property; and one way of implementing cross-page / cross-session persistence as a JS-based progressive enhancement.

Read Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript on Smashing Magazine.

Articles You Might Enjoy

MutationObserver makes it easy to watch for the addition of specific nodes, if you know where to drill.

The concise guide to using Pagefind for your static site’s search functionality.

Your comprehensive guide for Twig front-end view templates.

Or Go To All Articles