I Thought Dark Mode Was Just a Toggle. It Turned Into a Full-System Refactor

This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).

Implementing dark mode on a personal website turned into a full UI system refactor. The key lessons: hardcoded colors had to be replaced with semantic CSS variables (e.g., --text-primary), pure black/white contrast is too harsh so grey shades work better, Tailwind's typography plugin needed explicit variable mapping, code syntax highlighting required two themes switched dynamically, SVG diagrams needed separate versions per mode, and a flash-of-wrong-theme bug required moving theme detection before browser render. Dark mode isn't a surface-level toggle — it's a cross-cutting system concern that every UI layer must support intentionally.

#css

#frontend

#tailwind-css

Yesterday•5m read time•From code.likeagirl.io

Table of contents

The first problem: hardcoded colors Dark mode is not black Every surface breaks differently Typography (Tailwind)Get Marsha Teo ’s stories in your inbox Code syntax highlighting Images The problem wasn’t only styling — it was timing too What this changed for me If you’re implementing dark mode