![](/posts/accessible-css-light-dark-toggles-with-js-for-persistence-only/cHhgdnuXR0-240.jpeg)
The concise guide to using Pagefind for your static site’s search functionality.
: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.
Add high-performance search to static sites with PageFind
The concise guide to using Pagefind for your static site’s search functionality.
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.
SSR Astro With Headless Craft CMS
Craft’s great data modelling and admin experience, with a server-rendered Astro front end.