Tag: css

Dark mode toggle on your static website

8 minute read    Published: 2019-07-16

Developers like dark themes. When looking at a screen all day (or rather, night) long, a pale white background with black text is an eyesore. Many software engineers prefer to use a dark theme with lower contrast colors in their code editors, and many tools started shipping dark visuals as default in the last few years.

I fall into that group as well and have been using these themes for so long that I can't even recall when I joined the dark side. I started to like these dark themes a lot and find them more visually pleasing, appearing more... Professional. To reflect this, I wanted to give my website – this website – dark visuals as well.

This isn't always a success. On some screens or in some light conditions the dark theme can be difficult to read, and some just prefer a paper-like background color anyway. I decided to create a dark/light mode toggle to please everyone.

🌓 — Tap the moon icon, and see the magic happen.