Dark Mode

What it does

Implements accessible light, dark and system-aware themes with durable tokens and a no-flash startup.

When to use it

Use for dark mode toggles, theme switches, or auditing an existing multi-theme interface for contrast and flicker.

Problems it prevents

Stops the flash of the wrong theme on load, and colour tokens that quietly fail contrast once inverted.

Typical workflow

1. Define durable colour tokens
2. Implement no-flash theme startup
3. Persist user preference
4. Verify contrast in both themes

Example output

A theme switch with zero flash on load and every token re-checked for contrast in the inverted palette.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemAudience Colour Strategy

  Designs evidence-led, accessible colour palettes for a specific audience, market, culture and conversion goal.

• SystemBrand Design

  Builds a coherent web identity through typography, colour, imagery and UI personality tied to a real business.

• FocusedSticky Header

  Implements stable, accessible sticky headers with correct anchor offsets and no layout shift.