❌ Why Color Inversion Fails

1. Images and logos break
2. Contrast becomes too harsh, eye fatigue
3. Saturated colors vibrate on dark backgrounds

🎨 5 Dark Mode Principles

① Do Not Use Pure Black (#000)

Good for OLED power savings, but contrast is too harsh. Use #0f172a, #18181b dark grays. Material Design recommends #121212.

② Do Not Use Pure White Text

Use #f1f5f9 or rgba(255,255,255,0.87) instead of #fff. Pure white on black creates a halo effect that makes text vibrate.

③ Desaturate

Light mode #2563eb (sat 90%) becomes dark mode #60a5fa (sat 60%). Adjust HSL with Color Converter.

④ Use Brightness, Not Shadows, for Depth

Light mode separates layers with shadows. Dark mode hides them, so step up background brightness: #0f172a / #1e293b / #334155.

⑤ Maintain 4.5:1 Contrast

WCAG standard. Verify with the Contrast Checker.

🔧 CSS Variable Pattern

:root {
  --bg: #ffffff;
  --text: #1e293b;
  --accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
    --accent: #60a5fa;
  }
}

🛠 Tools

• Color converter: HEX/HSL/RGB
• Contrast: WCAG Contrast
• Palette: Palette Generator

💡 Verify: stare at dark mode for 30 min then switch to light. No eye strain = OK, sore eyes = adjust contrast.