# Dark Mode

> Design and implement dark mode (and theming) that maintains hierarchy, accessibility, and brand quality in low-light interfaces. Use when adding dark theme support, refining theme tokens, or ensuring parity between light and dark experiences.

- Skill: `itsual/dark-mode` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itsual/dark-mode`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itsual/dark-mode/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: itsual (https://skillmd.com/u/itsual)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/itsual/dark-mode

---


# Dark Mode

## Overview

Dark mode is not an inversion of light mode. It requires deliberate elevation, contrast, and color decisions to keep interfaces readable and comfortable.

## When to Use

- Adding dark theme support to a product
- Building theme-aware design systems
- Fixing contrast or hierarchy issues in existing dark UI

## Core Practices

- Use semantic tokens that map to theme-specific values
- Desaturate and re-tune brand colors for dark surfaces
- Maintain elevation through surface steps, not only shadows
- Check contrast for text, icons, and interactive states
- Respect system preference and offer user override
- Test critical flows in both themes

## Principles

- Avoid pure #000 backgrounds in most product UIs
- Don’t rely on opacity tricks that tank contrast
- Images and illustrations may need theme-specific treatment
- Dark mode should feel intentional, not like a filter

## Verification

- [ ] Text and controls meet contrast requirements in dark theme
- [ ] Hierarchy remains clear on dark surfaces
- [ ] Theme switching is predictable and persistent