Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/onewave-ai-dark-mode-converter/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-07 | ✗→✓ | ▲ Improved | 48% | 0% |
| case-19 | ✗→✓ | ▲ Improved | 16% | 0% |
| case-20 | ✓→✗ | ▼ Worse | 52% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | 42% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 59% | 0% |
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.
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.)#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.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.color-scheme: dark so native inputs, scrollbars, and autofill match; embedded third-party widgets (map themes, iframes); email templates and open-graph images that never inherit the theme; focus rings that vanish on dark.dark-mode-report.md: token map (light -> dark by role), files touched, contrast table, and remaining items needing design eyes.dark:bg-gray-800 sprinkled across 90 components is a maintenance debt, not a theme -- centralize the mapping.system setting must react to OS changes without reload.| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 36,812 | 46,405 | +26% | 1 | 1 | 0% | 6,214 | 7,080 | +14% | 0 | 0 | — |
case-02 | fail→fail | 23,913 | 19,983 | -16% | 1 | 1 | 0% | 4,849 | 4,945 | +2% | 0 | 0 | — |
case-03 | fail→fail | 33,904 | 28,282 | -17% | 1 | 1 | 0% | 5,667 | 5,758 | +2% | 0 | 0 | — |
case-04 | pass→pass | 15,807 | 16,384 | +4% | 1 | 1 | 0% | 2,506 | 3,557 | +42% | 0 | 0 | — |
case-05 | pass→pass | 12,556 | 13,915 | +11% | 1 | 1 | 0% | 1,921 | 3,053 | +59% | 0 | 0 | — |
case-06 | pass→pass | 15,239 | 12,938 | -15% | 1 | 1 | 0% | 2,502 | 3,050 | +22% | 0 | 0 | — |
case-07 | fail→pass | 13,266 | 12,690 | -4% | 1 | 1 | 0% | 2,087 | 3,081 | +48% | 0 | 0 | — |
case-08 | pass→pass | 15,166 | 16,915 | +12% | 1 | 1 | 0% | 2,711 | 4,030 | +49% | 0 | 0 | — |
case-09 | pass→pass | 12,016 | 10,314 | -14% | 1 | 1 | 0% | 2,189 | 2,897 | +32% | 0 | 0 | — |
case-10 | pass→pass | 13,795 | 16,210 | +18% | 1 | 1 | 0% | 2,466 | 3,637 | +47% | 0 | 0 | — |
case-11 | pass→pass | 15,659 | 14,326 | -9% | 1 | 1 | 0% | 2,333 | 3,246 | +39% | 0 | 0 | — |
case-12 | pass→pass | 16,077 | 14,067 | -13% | 1 | 1 | 0% | 2,227 | 3,281 | +47% | 0 | 0 | — |
case-13 | pass→pass | 16,481 | 22,086 | +34% | 1 | 1 | 0% | 2,540 | 4,598 | +81% | 0 | 0 | — |
case-14 | pass→pass | 15,314 | 18,260 | +19% | 1 | 1 | 0% | 2,460 | 3,752 | +53% | 0 | 0 | — |
case-15 | pass→pass | 14,064 | 14,082 | +0% | 1 | 1 | 0% | 2,259 | 3,272 | +45% | 0 | 0 | — |
case-16 | pass→pass | 15,863 | 15,117 | -5% | 1 | 1 | 0% | 2,718 | 3,394 | +25% | 0 | 0 | — |
case-17 | pass→pass | 13,802 | 17,244 | +25% | 1 | 1 | 0% | 2,103 | 3,459 | +64% | 0 | 0 | — |
case-18 | pass→pass | 7,714 | 11,694 | +52% | 1 | 1 | 0% | 1,247 | 2,932 | +135% | 0 | 0 | — |
case-19 | fail→pass | 10,100 | 5,681 | -44% | 1 | 1 | 0% | 1,495 | 1,737 | +16% | 0 | 0 | — |
case-20 | pass→fail | 18,931 | 18,657 | -1% | 1 | 1 | 0% | 2,931 | 4,454 | +52% | 0 | 0 | — |
case-21 | pass→pass | 16,495 | 19,355 | +17% | 1 | 1 | 0% | 3,228 | 3,977 | +23% | 0 | 0 | — |
case-22 | pass→pass | 18,845 | 31,444 | +67% | 1 | 1 | 0% | 4,180 | 6,071 | +45% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +5 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.