The concise guide to using Pagefind for your static site’s search functionality.
Accessible CSS-Only Light/Dark Toggles (with JS persistence as progressive enhancement)
:has()
can obviate JS
:has()
can obviate JSFeatured in CSS Weekly
This article was featured in CSS Weekly Issue #584
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.
Articles You Might Enjoy
-
Add high-performance search to static sites with PageFind
-
Watch for specific added nodes with MutationObserver
MutationObserver makes it easy to watch for the addition of specific nodes, if you know where to drill.
-
Numbered Code Block Lines in Eleventy with Shiki Twoslash
Bringing in a third-party library for easy, reliable line numbering