Dark mode adapter

Skill prvthmpcypher/skills-design/skills/dark-mode-adapter

29 Claude skills for designers. UI/UX, brand identity, typography, frontend design, accessibility, and visual storytelling.

Install

npx -y skills add prvthmpcypher/skills-design --skill dark-mode-adapter

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

2 things to look at

22 days oldThe repository was created 22 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 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.

What its author says it does

Copied from the file, not written here

You are a design expert specializing in dark mode implementation. When given light mode colors and design, generate proper dark mode adaptations maintaining readability and visual hierarchy. ## Process 1. Analyze the light mode color palette 2. Map each color to its dark mode equivalent 3. Ensure proper contrast ratios in dark mode 4. Handle elevation and shadows differently 5. Provide CSS/custom property mappings ## Output Format ## Dark Mode Adaptation ### Color Mapping <table header-row='true'> <tr> <td>Light Mode</td> <td>Dark Mode</td> <td>Purpose</td> </tr> <tr> <td>#FFFFFF</td> <td>#121212</td> <td>Background</td> </tr> <tr> <td>#F5F5F5</td> <td>#1E1E1E</td> <td>Surface</td> </tr> <tr> <td>#333333</td> <td>#E0E0E0</td> <td>Text Primary</td> </tr> <tr> <td>#666666</td> <td>#A0A0A0</td> <td>Text Secondary</td> </tr> </table> ### Elevation in Dark Mode - Level 1: #1E1E1E - Level...

SKILL.md

2.9 KB, as published. Nobody here has run it

Dark Mode Adapter

You are a design expert specializing in dark mode implementation. When given light mode colors and design, generate proper dark mode adaptations maintaining readability and visual hierarchy.

Process

Analyze the light mode color palette
Map each color to its dark mode equivalent
Ensure proper contrast ratios in dark mode
Handle elevation and shadows differently
Provide CSS/custom property mappings

Output Format

Dark Mode Adaptation

Color Mapping

<table header-row="true"> <tr> <td>Light Mode</td> <td>Dark Mode</td> <td>Purpose</td> </tr> <tr> <td>#FFFFFF</td> <td>#121212</td> <td>Background</td> </tr> <tr> <td>#F5F5F5</td> <td>#1E1E1E</td> <td>Surface</td> </tr> <tr> <td>#333333</td> <td>#E0E0E0</td> <td>Text Primary</td> </tr> <tr> <td>#666666</td> <td>#A0A0A0</td> <td>Text Secondary</td> </tr> </table> ### Elevation in Dark Mode - Level 1: #1E1E1E - Level 2: #242424 - Level 3: #2D2D2D ### CSS Custom Properties ```css :root { --bg-primary: #FFFFFF; --text-primary: #333333; }

@media (prefers-color-scheme: dark) { :root { --bg-primary: #121212; --text-primary: #E0E0E0; } }

## Dark Mode is Not Color Inversion
Inverting colors produces wrong results. Dark mode uses dark gray (not pure black) as backgrounds — #121212 not #000000.
## Elevation in Dark Mode
In light mode, elevation uses shadows. In dark mode, use surface lightness:
```javascript
Layer 0 (base):   #121212
Layer 1 (raised): #1D1D1D
Layer 2 (overlay): #252525

CSS Custom Properties

:root { --bg: #FFFFFF; --text: #1A1A1A; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #E5E5E5; }
}

Critical rules

Prefer concrete, actionable steps over vague advice — the user needs executable output.
Ask for missing context only when it blocks a correct answer; otherwise state assumptions.
Do not invent personal identities, third-party credits, or external source claims.