How I Added Dark Mode to a 37-Tool Vite SPA in One Prompt

I've been building RelahConvert — a browser-only image converter with 37 tools — and yesterday I decided to add dark mode. I was expecting it to take hours. It took minutes. Here's exactly how it works and what I learned. The Problem With Hardcoded Colors Most projects start with colors scattered everywhere: background: #ffffff; color: #1a1a1a; border: 1px solid #e0e0e0; When you have 37 tool pages, finding and replacing every hardcoded color manually would take forever. There had to be a better way. The Solution: CSS Variables + data-theme The entire dark mode system comes down to two things: 1. Define all colors as CSS variables :root { --bg: #ffffff; --text: #1a1a1a; --card: #f5f5f5; --border: #e0e0e0; } [data-theme="dark"] { --bg: #18181b; --text: #f4f4f5; --card: #27272a; --border: #3f3f46; } 2. Toggle the attribute on the root element const toggle = () => { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark';