Dark Mode Design
Apply dark-mode surface hierarchy, desaturated palettes, and accessibility rules when shipping or refactoring UI—not simple color inversion.
Overview
Dark-mode-design is an agent skill most often used in Build frontend (also Validate prototype, Ship review) that defines accessible dark surfaces, color adaptation, and media rules beyond simple inversion.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill dark-mode-designWhat is this skill?
- Four-tier surface hierarchy from background #121212 through elevated tooltips
- Primary and semantic colors desaturated 10–20% with off-white #E0E0E0 body text
- Images, logos, and illustrations guidance for dark-variant and dimming
- Accessibility: 4.5:1 body contrast, prefers-color-scheme, and manual toggle pairing
- Explicit rule: redesign surfaces thoughtfully—do not merely invert light theme
- 4-tier surface hierarchy (background through tooltips)
- Minimum 4.5:1 contrast called out for body text in dark mode
Adoption & trust: 655 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your app has a dark toggle but surfaces look muddy, colors scream, or text fails contrast because you only inverted the light palette.
Who is it for?
Solo builders theming SaaS, extensions, or mobile web UIs who want structured dark-mode UX without hiring a visual designer for every pass.
Skip if: Projects with no UI, print-only assets, or teams that already locked a complete dual-theme design system with audited tokens and no rework planned.
When should I use this skill?
Designing or refining dark mode interfaces where you need proper color adaptation, contrast, elevation, and media handling—not simple inversion.
What do I get? / Deliverables
You get a coherent dark hierarchy, adapted semantic colors, media guidance, and accessibility checks you can apply across components before ship.
- Dark-mode surface and color token recommendations
- Component-level contrast and media adaptation checklist outcomes
- Accessibility-oriented dark theme specification aligned to user system preference
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Dark mode is implemented in frontend components and tokens, but the same guidance applies whenever you prototype or review visual quality before release. Contrast, elevation surfaces, and prefers-color-scheme behavior are frontend design-system concerns.
Where it fits
Define dark palette and surface levels before committing to a landing page hero and card layout.
Map background, card, modal, and tooltip surfaces to CSS variables across your component library.
Audit each component in a dark room test pass for contrast, borders, and image dimming.
Ensure marketing screenshots use dark-variant logos and illustrations consistent with in-app dark mode.
How it compares
Use as design-system prose guidance, not an automated theme generator or Lighthouse-only contrast MCP.
Common Questions / FAQ
Who is dark-mode-design for?
Indie developers and designer-developers implementing or refactoring dark themes in web and hybrid apps who need elevation, color, and a11y rules in one invoke.
When should I use dark-mode-design?
During Build frontend when adding dark tokens; in Validate prototype when theming a landing or demo; at Ship review when checking each component in real dark environments.
Is dark-mode-design safe to install?
It is read-only design guidance with no shell or network requirements—still review the Security Audits panel on this page for the package source you installed.
SKILL.md
READMESKILL.md - 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