I thought adding dark mode would take 30 minutes. It broke my website. Problem 1: Hardcoded colours I didn’t even use that many colours. How hard could it be? Turns out, very. My colours were hardcoded directly into Tailwind utility classes. A heading had a specific hex value, and a paragraph had another. To change the theme, I would have had to update each of these individually. No, thank you. The fix I introduced CSS variables and defined colours by role, not value. My first attempt had variables like hover-dark and hover-darker . That worked until I tried to invert the theme for dark mode. What would hover-darker even mean in dark mode? Instead of asking "What color should this element be?" , I had to ask "What role does this color play?" So I switched to variable names that were semantic, rather than literal: --text-primary --text-secondary --background --border With this, a heading wasn’t “black” anymore. It was text-primary . A background wasn’t “white”. It was background-primary .…