Theme Switch

The websites generated by Apple's DocC tool all feature this very handy toggle for switching between dark and light themes. In a previous post the idea of merging a SwiftySites blog with a DocC web archive was introduced. Wouldn't it be nice to have that same theme-switching control on all pages?

Introducing Theme Switch by SwiftySites. Theme Switch is a web component that replicates both the look and behaviour of Apple's control with some additional features.

Unlike the DocC toggle which is implemented using Vue.js, Theme Switch does not have any dependencies and instead is implemented with pure Javascript as a standard v1 HTML Custom Element.

It allows you to define your own dark mode CSS and display it only when your users wish it. When in automatic mode it will honor the system's preference. And if your browser does not support CSS color scheme preferences the component will just let the user pick between the two options.

Try it out on your own websites or better yet try it on your SwiftySites website!