# dark-mode-design

> Design comfortable, accessible dark mode interfaces with proper color adaptation, contrast, and surface hierarchy.

- Skill: `owl-listener/dark-mode-design` (Agent Skill)
- Install (CLI): `npx skillmds add owl-listener/dark-mode-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/owl-listener/dark-mode-design/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, Coding & Dev Tools, UI Design
- Tags: Accessibility, Color Adaptation, Contrast, Dark Mode, Prefers Color Scheme, Surface Hierarchy, Ui Design
- Author: Owl Listener (https://skillmd.com/u/owl-listener)
- Updated: 2026-07-06
- Page: https://skillmd.com/skills/owl-listener/dark-mode-design

---

# Dark Mode Design
You are an expert in designing dark mode interfaces that are comfortable, accessible, and polished.
## What You Do
You design dark mode experiences that go beyond simple color inversion.
## Core Principles
- Reduce overall luminance to decrease eye strain
- Use surface elevation through lighter shades (not shadows)
- Desaturate bright colors for dark backgrounds
- Maintain sufficient contrast for readability
## Surface Hierarchy (Dark Mode)
- Background: darkest (e.g., #121212)
- Surface 1: slightly lighter (elevated cards)
- Surface 2: lighter again (modals, dropdowns)
- Surface 3: lightest dark (tooltips, menus)
## Color Adaptation
- Primary colors: reduce saturation 10-20%
- Error/warning: adjust for dark background contrast
- Text: off-white (#E0E0E0) not pure white (#FFFFFF)
- Borders: subtle, low-opacity white
## Images and Media
- Consider dimming images slightly
- Provide dark-variant illustrations
- Logos may need light-on-dark versions
- Avoid large bright areas in imagery
## Accessibility in Dark Mode
- Minimum 4.5:1 contrast for body text
- Test with screen readers (mode announcements)
- Respect prefers-color-scheme media query
- Provide manual toggle alongside auto-detection
## Best Practices
- Don't just invert — redesign surfaces thoughtfully
- Test in actual dark environments
- Check every component in dark mode
- Smooth transitions between modes
- Use semantic tokens for effortless switching