Frontend Feeds

Zach Leatherman

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

Zach Leatherman1 min read

Read the original on zachleat.com ↗

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!

Installation

npm install @zachleat/solar-eclipse-toggle