---
name: dark-mode-adapter
description: >-
  Maps a light palette to dark mode, preserving hierarchy and contrast and handling elevation and
  shadow. Use when adding dark mode. Not for creating the original palette - use
  color-palette-generator.
---

# 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
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 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
```css
:root { --bg: #FFFFFF; --text: #1A1A1A; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #E5E5E5; }
}
```

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

## Verification & Quality Checklist

- [ ] Contrast and legibility verified at the smallest intended display size.
- [ ] Dimensions, bleed, and safe areas match the named output medium.
- [ ] Colour is never the sole carrier of meaning - icons or text accompany it.
- [ ] Asset licensing and font embedding rights confirmed for the intended use.

## Anti-Patterns & Constraints

- NEVER deliver a design without stating the medium and its constraints.
- NEVER rely on colour alone to convey state, status, or meaning.
- NEVER hand off exports without confirming the target platform's specs.