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 : #1 a1a1a ; border : 1 px 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 = curre