Light mode rewrites twenty-four Tailwind colours in CSS so no component needs to change
The site was designed dark-first. Every component uses Tailwind's -400 shade classes — text-cyan-400 for audio accents, text-emerald-400 for production, text-fuchsia-400 for accessibility. Those shades look great on a near-black background. On a white background, they fail WCAG AA contrast. Cyan-400 on white is about 2.5 to 1. The minimum is 4.5 to 1. The fix is not in the components. It is in globals.css. Twenty-four CSS overrides sit under the data-theme light selector. Thirteen text colour rules swap every -400 and -300 shade to its -600 or -700 equivalent. text-cyan-400 becomes 0891b2 — cyan-600 at roughly 4.5 to 1 contrast. text-emerald-400 becomes 059669 — emerald-600 at 4.5 to 1. text-orange-400 becomes ea580c — orange-600 at 4.6 to 1. Every override has a comment with the target shade name and its exact contrast ratio so future changes can verify they still pass. Five border overrides match the text swaps — border-cyan-400, border-emerald-400, border-orange-400, border-fuchsia-400, and border-pink-400 all shift to the same darker values. Four background overrides handle badges and pills where the accent is a filled surface rather than text. Then there is the SVG rule. Every SVG logo on the site is white for dark mode. The light mode override applies filter invert one and hue-rotate 180 degrees to any image source ending in dot svg. The invert flips white to black. The hue-rotate corrects the colour shift that invert introduces. The logos appear in the correct brand colours on both backgrounds without maintaining two image files. The total cost is twenty-four CSS rules with the important flag. No component was edited. No conditional className was added. No ternary operator decides between text-cyan-400 and text-cyan-700 at render time. The components write dark-mode classes and the stylesheet rewrites them for light mode. One file, zero component changes, full WCAG AA compliance across both themes.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.