Most digital products treat Dark Mode as an afterthought—simply inverting hex codes or slapping #000000 onto backgrounds. The result is often unreadable text contrast, washed-out saturated colors, and lost brand character.
At Coded By RT, our design philosophy treats Dark Mode and Light Mode as two intentional expressions of the same brand:
- Dark Mode: Cinematic, focused, technical, and high-contrast.
- Light Mode: Editorial, crisp, sophisticated, and publication-ready.
1. Contrast Ratios & Token Architecture
Building an accessible design system requires establishing semantic tokens for background, elevation, surface hover, and accent highlights:
| Semantic Token | Dark Mode Value | Light Mode Value | Purpose |
|---|---|---|---|
--background | #070A12 (Midnight Deep) | #F7F8FC (Clean Editorial) | Root canvas backdrop |
--surface | rgba(18, 24, 38, 0.7) | rgba(255, 255, 255, 0.85) | Primary card & panel containers |
--border | rgba(255, 255, 255, 0.08) | rgba(0, 0, 0, 0.07) | Structural separation lines |
--accent-cyan | #5CE1E6 (Luminous Glow) | #0E7490 (Deep Editorial Teal) | Interactive focus & active badges |
In Tailwind CSS v4, bind CSS variables directly using canonical shorthands
like bg-(--surface), text-(--foreground), and border-(--border) to
eliminate arbitrary brackets and enforce strict theme consistency.
2. Preventing Theme Hydration Flash (FOUC)
To prevent visual flash of the wrong theme on page load, inline a lightweight theme-check script in your HTML <head> before React mounts:
// Theme initialization snippet
(function () {
try {
const saved = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (saved === "dark" || (!saved && prefersDark)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
} catch (e) {}
})();
By establishing clear semantic variables and preventing hydration flashes, your users enjoy an effortless, eye-friendly experience across all ambient lighting conditions.
3. Design System Architecture Walkthrough
Explore modern design system token ergonomics and fluid UI architecture:
