Agent skill · design visual · onewave-ai
dark-mode-converter
Convert a light-only site or app to a real dark mode -- semantic token mapping, elevation-based surfaces, recalibrated shadows and imagery -- not a naive inversion. Handles Tailwind, CSS variables, and styled-components, plus the toggle, persistence, and no-flash boot.
Why this skill is useful
Adds a comprehensive executable script for converting light themes to dark mode, including semantic token mapping and specific design rules not commonly found in public documentation.
What it needs
Requires bash installed locally. About 2k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
Dark Mode Converter Build dark mode the way design-mature products do: as a second theme with its own logic, not the light theme with colors flipped. Inversion fails because dark UIs work differently -- elevation is communicated by lighter surfaces instead of shadows, saturated colors vibrate on dark backgrounds, and pure black plus pure white is glare, not contrast. Workflow 1. Tokenize first. Inventory every color in the codebase. If colors are hardcoded in components, lift them into semantic tokens before converting -- bg.base, surface, surface.raised, text.primary, text.muted, border, accent, states. A dark mode built on raw hex replacements breaks on the next feature. (If tokens exist, audit for strays with the same sweep.) 2. Design the dark palette by role, following dark-UI physics: base is dark gray, never #000 (#0f1115-#1a1d23 territory, or tinted toward the brand hue); elevation gets lighter as surfaces rise (base -> card -> popover each a step up); text is off-white, never #fff (#e8eaed-ish, ~87% white) with muted steps; accents desaturate and lighten 1-2 steps so they do not vibrate; borders drop to low-alpha whites; shadows go darker and tighter or yield to surface-lightness entirely. Verify every text/surface pair at WCAG AA minimum. 3. Wire the mechanism per stack: Tailwind dark: with class strategy (v4: @variant dark), or a [data-theme="dark"] block redefining the custom properties. Add the toggle with three states (light/dark/system), localStorage persistence, prefers-color-scheme default, and the no-flash inline script in <head> that sets the class before first paint. 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/dark-mode-converter