Dark Mode Token Mapping

When to Use

• Adding dark mode support to an existing design system
• Auditing your current dark mode tokens for contrast issues
• Bootstrapping a dark theme before fine-tuning in Figma
• Generating a starting point for Tokens Studio or Style Dictionary

The Prompt

Generate dark mode token values from my light mode tokens.

Rules:
1. **Backgrounds** — Invert the lightness scale. Light backgrounds become dark (not pure black, use gray-900/950 range). Elevated surfaces should be slightly lighter than the base.
2. **Text** — Invert text colors. Primary text should be white or near-white. Secondary text should maintain the same relative contrast ratio as in light mode.
3. **Borders** — Use subtle light borders (white at 10-15% opacity or gray-700/800).
4. **Semantic colors** — Keep hue and saturation similar but adjust lightness for dark backgrounds. Ensure status colors (success, warning, danger) remain distinguishable.
5. **Shadows** — Reduce or remove shadows on dark mode. Use subtle border or glow instead.
6. **Contrast check** — Every text/background pair must meet WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text).

Output format: Same structure as input, with dark mode values. Add a comment when a value needs manual review.

Here are my light mode tokens:
[paste your light mode tokens JSON]

Example Output

{
  "color": {
    "background": {
      "primary":   { "light": "#FFFFFF", "dark": "#0F172A" },
      "secondary": { "light": "#F8FAFC", "dark": "#1E293B" },
      "elevated":  { "light": "#FFFFFF", "dark": "#1E293B" }
    },
    "text": {
      "primary":   { "light": "#0F172A", "dark": "#F8FAFC" },
      "secondary": { "light": "#475569", "dark": "#94A3B8" },
      "disabled":  { "light": "#94A3B8", "dark": "#475569" }
    },
    "border": {
      "default":   { "light": "#E2E8F0", "dark": "#334155" },
      "strong":    { "light": "#CBD5E1", "dark": "#475569" }
    },
    "status": {
      "success":   { "light": "#16A34A", "dark": "#4ADE80", "_note": "Lightened for dark bg contrast" },
      "danger":    { "light": "#DC2626", "dark": "#F87171", "_note": "Lightened for dark bg contrast" },
      "warning":   { "light": "#D97706", "dark": "#FBBF24", "_note": "Review: may appear too bright" }
    }
  }
}