Dark mode design

Skill Dragoon0x/everything-design-taste/skills/dark-mode-design

Dark mode implementation, color remapping, and dual-theme design strategies.From its SKILL.md

Install

npx -y skills add Dragoon0x/everything-design-taste --skill dark-mode-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.3 KB, 313 tokens by cl100k_base, as published. Nobody here has run it

Dark Mode Design

Dark Mode Is Not Inversion

Don't just flip black and white. Dark mode requires a complete color re-evaluation.

Color Adjustments

Background: #121212 to #1A1A1A (not pure black #000000).
Text: #E0E0E0 to #F0F0F0 (not pure white — causes halation).
Surfaces: Lighter shades for elevation (no shadows needed).
Brand colors: Desaturate 10-20% (vivid colors vibrate on dark backgrounds).
Status colors: Adjust lightness for dark backgrounds (green, red, yellow all need tweaking).

Elevation in Dark Mode

Light mode: elevated = lighter + shadow. Dark mode: elevated = lighter surface color (no shadow).

[data-theme="dark"] {
  --surface-0: #121212;
  --surface-1: #1E1E1E;  /* cards */
  --surface-2: #252525;  /* dropdowns */
  --surface-3: #2C2C2C;  /* modals */
}

Images

Reduce brightness/contrast slightly on photos.
Swap light-background illustrations for dark-background versions.
UI screenshots need dark mode versions.

Testing

Test in actual dark environments.
Check contrast ratios again (they change).
Test with f.lux/Night Shift (warm tint affects colors).

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.