Photo of Alexander Sandberg

Alexander Sandberg

I'm a last-year MSc student in product design and a front-end developer from Sweden.

Here I occasionally publish random* stuff I find worth sharing with the world.
*You've been warned

About me


Creating a website theme switcher with CSS only

  • webdev
  • css
  • html
  • dark mode

Check it out live before reading if you want!

So called dark mode layouts have been getting a lot of attention and hype lately, as more and more companies have implemented an optional design of their websites and products. I’ve personally been using macOS Mojave’s dark mode since release, and I’m completely sold on it.

Ever since Safari released their new @media feature prefers-color-scheme, I’ve seen a lot of people experimenting with implementing this on their own websites. This new media feature - which is now supported by Firefox as well - gave us a way to automatically detect the user’s preference with some simple CSS.]

What most, if not all, of these solutions have in common however, is the need for a tiny bit of JavaScript to switch between themes. With CSS Custom Properties, it’s only a matter of listening for a button click and setting a dark-mode class or data attribute on <body>.

Buuuutttt… where’s the fun in doing that when you can achieve the same thing with CSS only, am I right?? 🙌

Read the article

More posts

Want me to send you an email whenever I post something new?