---
name: light-theme-pass
description: Add a high-quality light theme to a dark-native Tailwind/shadcn site (or fix a light theme that looks like an inverted dark one). Use when asked for "light mode", "a light version of the site", "theme toggle", or when a light theme has grey cards, invisible logos, or unreadable text on white.
---

# Light theme pass

Flipping tokens gets you a working light mode. A *good* one needs a second pass over every surface that was designed on black.

## 1. Mechanics

- Keep dark on `:root` if it is the brand default; add a `.light { … }` token block. Store the choice (`localStorage`), apply the class to `<html>` in an inline `<script>` in `index.html` before first paint (no flash), and set `color-scheme`.
- Add a `light:` Tailwind variant as the mirror of `dark:`: `plugin(({ addVariant }) => addVariant('light', '.light &'))`. Use it for one-off surface treatments instead of duplicating components.
- Mark sections that must stay dark (video heroes) with a `.force-dark` class that re-pins the dark tokens.

## 2. Palette (warm, not clinical)

- Ground: warm off-white (`36 40% 97%`), not `#fff`. Elevated surfaces: pure white. Ink: warm near-black (`20 16% 9%`). Muted text ≥ 4.5:1 on the ground.
- "Glass" on paper = frosted white (`0 0% 100% / 0.72`) + hairline (`ink / 0.08`) + a warm drop shadow. Black-at-4% glass reads as dirty grey — avoid.
- Borders slightly warm (`24 18% 86%`). Selection colour = accent at 22%.

## 3. Sweep the components (the actual work)

Grep for and fix, in this order:

1. `bg-[#…]`, `bg-black/…`, `text-white`, `border-white/…`, `bg-white/[0.0x]` → tokens (`bg-surface`, `text-foreground`, `border-foreground/10`, `bg-foreground/[0.04]`). White text stays only on the accent colour or on video.
2. Canvas/SVG effects with baked colours (dot fields, circuit boards, cubes): expose colour props and pass `hsl(var(--…))`, or dim the layer on paper (`.light .dot-layer { opacity: .4 }`).
3. White-on-transparent logos: `.light .logo-mark { filter: invert(1) brightness(.12) }`, and remove the dark theme's "dim until hover" opacity in light.
4. Overlays for readability (video reflections, hero scrims): flip from dark-at-55% to white-at-60%.
5. Third-party components with their own theme detection (`variant="dark"`): pass the live theme.
6. Toasts, dialogs, code blocks, scrollbars: follow the theme (`color-scheme`, toaster `theme` prop).
7. Navigation cards/menus that were near-black: give them warm tints with dark text.

## 4. Verify

Toggle on every page at 375 / 768 / 1280. Look specifically for: grey boxes, invisible logos, white text on white cards, black shadows on paper, unreadable code blocks, effects that vanish. Reset the stored theme after testing if you automated it in a shared browser profile.