Stats
Actions
Tags
From impeccable-dark
Use when implementing, converting to, or fixing dark mode interfaces. Covers dark surface elevation, color adaptation, theme switching, and avoiding dark mode anti-patterns that create eye strain or look like generic AI output.
How this skill is triggered — by the user, by Claude, or both
Slash command
/impeccable-dark:dark-mode-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides creation of sophisticated, production-grade dark mode interfaces that go beyond simple color inversion. Dark mode done right reduces eye strain, saves battery on OLED, and creates a premium aesthetic. Dark mode done wrong creates a murky, low-contrast mess or a neon-soaked AI cliche.
This skill guides creation of sophisticated, production-grade dark mode interfaces that go beyond simple color inversion. Dark mode done right reduces eye strain, saves battery on OLED, and creates a premium aesthetic. Dark mode done wrong creates a murky, low-contrast mess or a neon-soaked AI cliche.
Dark mode is NOT inverted light mode. It requires fundamentally different design decisions:
CRITICAL: Every dark mode decision should be intentional. If your dark mode looks like filter: invert(1) applied to light mode, start over.
Consult color science reference for OKLCH dark palettes, surface elevation, and accent adaptation.
Build depth through surface lightness, not shadows. Use 3-5 surface levels that increase in lightness.
DO: Use dark gray surfaces (oklch 12-20%), never pure black (#000) DO: Desaturate accent colors 15-25% for dark mode—full saturation on dark backgrounds causes visual vibration DO: Reduce text font-weight by 50-100 units in dark mode—light-on-dark text appears heavier than it is DO: Tint your dark surfaces toward your brand hue (even oklch chroma of 0.005-0.01 adds cohesion) DON'T: Use pure black (#000000) backgrounds—infinite contrast causes halation and eye strain, especially for users with astigmatism (~50% of population) DON'T: Keep light mode accent colors at full saturation—they'll glow and bleed on dark surfaces DON'T: Use the "dark mode = neon accents on black" aesthetic—it's the #1 dark mode AI slop tell DON'T: Use colored shadows or drop shadows in dark mode—shadows are invisible on dark backgrounds, use lighter surfaces for elevation DON'T: Use the same border colors as light mode—borders need to be lighter than surfaces, or replaced by elevation differences
Consult color science reference for complete elevation scale and tinting.
Replace shadow-based depth with surface lightness:
| Level | Purpose | Lightness (OKLCH) |
|---|---|---|
| Base/Canvas | Page background | 10-13% |
| Surface 1 | Cards, containers | 15-18% |
| Surface 2 | Elevated elements, drawers | 20-23% |
| Surface 3 | Modals, popovers, tooltips | 25-28% |
| Surface 4 | Active/selected states | 28-32% |
Key insight: Each level should be 3-5% lightness apart. Smaller steps are imperceptible; larger steps create visual discontinuity.
Consult implementation reference for CSS patterns, React/framework integration, and system preference detection.
Use semantic design tokens with two layers:
DO: Detect system preference with prefers-color-scheme as default
DO: Allow manual override stored in localStorage
DO: Transition theme changes smoothly (200-300ms on backgrounds, instant on text)
DO: Use color-scheme: dark on <html> to inform browser UI (scrollbars, form controls)
DON'T: Flash wrong theme on load (FART—Flash of inAccurate coloR Theme)—use blocking script or server hint
DON'T: Animate every element during theme switch—transition only backgrounds and surfaces
DON'T: Force dark mode on users who prefer light—always respect system preference as default
Consult component patterns reference for specific UI element guidance.
Different components need different dark mode treatment:
DO: Adjust image brightness/contrast for dark contexts (CSS filter or semi-transparent overlay)
DO: Swap or adapt illustrations that have light backgrounds baked in
DO: Use outline or lighter borders instead of shadows for card separation
DO: Reduce opacity of decorative elements that compete with content
DON'T: Use the same images unchanged—bright images on dark surfaces create harsh, jarring contrast
DON'T: Keep light-mode illustrations with white backgrounds—they look like broken thumbnails
DON'T: Use colored text on dark backgrounds without rechecking contrast—colors that passed on white often fail on dark gray
Consult accessibility reference for contrast testing, reduced brightness, and OLED considerations.
DO: Retest all text against WCAG AA (4.5:1 body, 3:1 large) on actual dark surfaces—don't assume light mode ratios hold DO: Increase line-height by 0.05-0.1 for dark mode—perceived text weight is lighter so text needs more breathing room DO: Ensure focus indicators are visible on dark backgrounds (light outlines, not dark ones) DO: Test on real OLED screens—true black pixels affect color perception at edges DON'T: Use thin font weights (100-200) in dark mode—halation makes them unreadable DON'T: Rely on shadows for focus indication—they vanish on dark surfaces
Quality check: Does your dark mode look like every other "dark theme" generated by AI in 2024-2025?
Common dark mode AI slop tells:
The test: If you put this dark mode next to a random AI-generated dark dashboard, would someone be able to tell them apart? If not, you've failed. A distinctive dark mode should feel purposefully designed for darkness, not converted from light.
Dark mode requires more design decisions than light mode, not fewer. The reduced color range means every choice carries more weight. Small differences in surface elevation, accent saturation, and text weight compound into either a sophisticated experience or a generic one.
Test in actual dark environments. A dark mode that looks good in a bright office may wash out in a dark room. And vice versa—one that feels moody and sophisticated at night may look muddy under fluorescent lights.
Interpret the mood: dark mode can be warm and cozy (amber-tinted surfaces), cool and professional (blue-tinted surfaces), or rich and luxurious (deep plum or emerald tints). Choose a personality and commit.
Remember: Dark mode is a first-class design, not an afterthought filter.
npx claudepluginhub mendelgold220/impeccable-dark --plugin impeccable-darkDesigns dark mode UIs using surface elevation, desaturated colors, contrast ratios (4.5:1 min), accessibility checks, and semantic tokens for smooth light/dark switching.
Guides dark theme color adaptation: inverted hierarchy, reduced saturation, elevation via lightness, surface layering, and brand identity preservation.
Design premium dark interfaces with proper contrast, color palettes, and visual hierarchy. Provides Tailwind CSS patterns for backgrounds, text, borders, and status colors.