dark-mode-design
owl-listener/designer-skills
Adapt light palettes to dark mode with surface elevation, contrast rules, and desaturation.
What is dark-mode-design?
Transforms an existing light color palette into a polished dark mode design by applying surface hierarchy, contrast rebalancing, and desaturation principles. Use this after establishing your base color system to create a complementary dark experience that reduces eye strain and maintains accessibility.
- Apply surface elevation hierarchy using lighter shades instead of shadows
- Desaturate primary and accent colors 10–20% for dark backgrounds
- Rebalance contrast ratios (4.5:1 minimum) for readability on dark surfaces
- Adapt images, illustrations, and logos for dark-on-light visibility
- Implement semantic color tokens for seamless light/dark mode switching
- Respect prefers-color-scheme and provide manual toggle controls
How to install dark-mode-design
npx skills add https://github.com/owl-listener/designer-skills --skill dark-mode-design- An existing light color palette or design system
- Familiarity with contrast ratios and WCAG accessibility standards
- Access to color testing tools or browser DevTools
How to use dark-mode-design
- 1.Start with your finalized light palette and document current color values
- 2.Define your dark mode surface hierarchy (background, surface 1–3 levels)
- 3.Reduce saturation of primary and accent colors by 10–20%
- 4.Rebalance text and border colors for dark backgrounds (e.g., #E0E0E0 for body text)
- 5.Test contrast ratios for all text and interactive elements (minimum 4.5:1)
- 6.Create dark variants of images, illustrations, and logos
- 7.Implement CSS custom properties or design tokens for both modes
- 8.Test mode switching with prefers-color-scheme and manual toggles
Use cases
- Converting a completed light UI design to a dark mode variant
- Establishing a dark surface hierarchy for a multi-theme design system
- Adjusting brand colors and imagery for dark background contexts
- Ensuring WCAG contrast compliance across dark mode components
- Testing and refining dark mode transitions in production interfaces
- UI/UX designers building multi-theme systems
- Product teams implementing dark mode support
- Design system maintainers
- Frontend developers implementing design tokens
- Accessibility-focused design practitioners
dark-mode-design FAQ
No. Inversion creates poor contrast and eye strain. Instead, redesign surfaces thoughtfully using a hierarchy of dark shades, desaturate colors, and rebalance contrast for readability.
Use off-white like #E0E0E0 rather than pure white (#FFFFFF) to reduce eye strain. Pair with sufficient contrast against your background.
Dim images slightly, provide dark-variant illustrations, create light-on-dark logo versions, and avoid large bright areas that clash with dark backgrounds.
Maintain a minimum 4.5:1 contrast ratio for body text and interactive elements, same as light mode, to meet WCAG AA standards.
Use both: respect the prefers-color-scheme media query for auto-detection, but always provide a manual toggle so users can override system preferences.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: dark-mode-design
description: Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
data-visualization
Select chart types and design accessible data encodings for clear, insightful visualizations.
design-brief
Write focused project briefs defining problem, audience, constraints, and success criteria at kickoff.
design-critique
Facilitate structured team design critiques with clear feedback rules and actionable outcomes.
design-debt-audit
Systematically identify and prioritize design inconsistencies across your product before they become structural problems.
design-impact-reporting
Connect design decisions to measurable business and user outcomes for leadership reporting.
design-negotiation
Advocate for design quality with evidence-based negotiation in cross-functional conversations.