Dark Mode Design

Dark Mode Design

"Not just inverted colors. A carefully constructed hierarchy of light on dark."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Never Pure Black: True #000000 causes smearing on OLED screens and extreme eye strain with white text. Use dark greys (e.g., #121212 or #0A0A0A).
2. Elevation via Lightness: In light mode, shadows show elevation. In dark mode, shadows are invisible, so elevated surfaces must be lighter than the background.
3. Desaturated Accents: Saturated colors vibrate painfully against dark backgrounds. Tone down the saturation of brand colors.

Visual DNA

• Colors: Midnight Luxury or Minimalist Slate (inverted). Background #121212. Elevated cards #1E1E1E, #252525. Primary text #E1E1E1 (not #FFFFFF).
• Typography: Standard highly readable sans-serifs, but often dropped down one font weight compared to light mode, as light text on dark backgrounds appears optically thicker.
• Shadows: Pure black shadows, but with much lower opacity, mostly to separate slightly different shades of grey.

Web Implementation

• CSS Example:

:root {
  --bg-base: #121212;
  --bg-elevated-1: #1E1E1E;
  --bg-elevated-2: #242424;
  --text-high-emphasis: rgba(255, 255, 255, 0.87);
  --text-medium-emphasis: rgba(255, 255, 255, 0.60);
  
  /* Accent color: Desaturated purple instead of bright purple */
  --accent-color: #BB86FC; 
}

body {
  background-color: var(--bg-base);
  color: var(--text-high-emphasis);
  font-weight: 300; /* Thinner weight for dark mode */
}

.dark-card {
  background-color: var(--bg-elevated-1);