Solar Eclipse Toggle (a dark/light mode toggle Web Component)

September 14, 2026

🚾@zachleat/solar-eclipse-toggle

An accessible light/dark theme toggle button that follows your system preference by default.

Versions: 5 versions in 13 Sep 2026

2.1.0
14 Sep 2026New
Audit: -
Issues: 1
PRs: 0

In Trying out a Two-state Dark Mode Toggle I summarized the Two-state Dark and Light mode Toggle discussion as I experimented with a toggle in my personal website footer.

After launch, Curtis Wilcox left some good feedback to improve the accessibility of the component.

I decided to fold this into a reusable component so that I can benefit from this work on future websites (and you can use it too, I guess!). It’s called @zachleat/solar-eclipse-toggle and you can find it on GitHub or on npm now.

Demo
…or in the footer of this website.
…also in the footer on Speedlify.

My favorite parts about the component are that it shows an inert button pre-JS, incurs no CLS, is still functional when the (separate) CSS doesn’t load successfully ([hidden] for the win), and all strings are inserted from light DOM for good internationalization.

Hope it’s useful to others!

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »