SKILL.md

---
name: dark-mode-companion-theme
description: Derive a cohesive, accessible dark-mode companion from a complete current Theme Generator theme. Trigger when the user asks for dark mode, a night theme, an OLED variant, or a darker companion while preserving the established brand. Produce one complete replacement through display-theme, preserve unrequested design decisions, and do not claim that the app stores or exports paired light and dark modes together.
---

# Dark Mode Companion Theme

## Inputs

Require a complete source theme from the latest `display-theme` result or
`widgetState.modelContent`. Treat model-visible widget state as authoritative.

Use any user preferences for contrast, OLED black, warmth, saturation, or
night-time mood. If none are supplied, create a broadly usable dark interface
without pure-black surfaces.

## Workflow

1. Establish the source theme and record its current semantic colors and
   shadows.
2. Preserve the preview content, typography, spacing, radii, and brand intent
   unless the user explicitly requests other changes.
3. Transform roles semantically rather than numerically inverting colors:
   - make `background` the deepest layer;
   - make `surface` and `surfaceMuted` distinct elevated layers;
   - keep `foreground` clear and `foregroundMuted` readable;
   - retain recognizable primary, secondary, and accent hues while tuning
     lightness or saturation for dark surfaces;
   - choose `primaryForeground` and `secondaryForeground` for their action
     backgrounds;
   - make `border` visible without dominating the interface.
4. Adjust shadow values for dark surfaces while preserving the existing small,
   medium, and large elevation progression. Let borders carry more separation
   when dark shadows would be ineffective.
5. Check normal text at 4.5:1 and large text or meaningful non-text boundaries
   at 3:1. Repair failing semantic pairs before displaying the theme.
6. Give the companion a related but distinctive name and update its short
   description to explain the dark-mode decisions.
7. Invoke `display-theme` with the complete dark companion.

## Deliverable

After displaying the companion, list:

- preserved design decisions;
- changed colors and shadows;
- the contrast strategy;
- any user preference that materially affected the result.

## Boundaries

- The new `display-theme` result replaces the currently displayed theme.
- Do not claim the app stores, compares, or exports light and dark themes as a
  linked pair.
- Do not claim to change operating-system color-scheme settings.