| name | retheme |
| description | Redesign the look of the Twinfolio site. Use when the user says "/retheme", "change the theme", "make it feel more X" (warm, brutalist, editorial, calm, high-contrast, etc.), "new colors", or "match my brand". Edits the oklch design tokens in app/theme.css — the same engine the /admin Theme Studio writes — while keeping text readable (WCAG AA). |
| allowed-tools | Read Edit Bash(git status) |
Retheme
Twinfolio's entire visual identity is driven by design tokens in
app/theme.css — only the :root { … } (light) and .dark { … } blocks
live there. The @theme inline mapping that wires these to Tailwind lives in
app/globals.css (do not edit that). You change the values; Tailwind and
every component re-skin automatically. This is the same surface the /admin
Theme Studio writes through, so hand-edits and the GUI stay compatible.
1. Read the current theme
Read app/theme.css. Note the token set: --background, --foreground,
--card, --primary, --secondary, --muted, --accent, --destructive,
--border, --input, --ring, the five --chart-*, the --sidebar-* group,
plus --radius, the --font-* family vars, and the --shadow-* scale. Colors
are oklch (oklch(L C H) — Lightness 0–1, Chroma, Hue degrees, optional
/ alpha).
2. Translate the vibe into oklch moves
Ask for (or infer) the vibe, then adjust deliberately:
- Hue (H): the brand color family. Pick a primary hue and reuse it for
--primary, --ring, and tints of --accent/--secondary for cohesion.
- Chroma (C): saturation.
0 = neutral grayscale (the default). Raise to 0.1–0.2 for color; keep backgrounds low-chroma so they don't vibrate.
- Lightness (L): in
:root keep --background high (~0.98–1) and --foreground low (~0.15); invert for .dark. Surfaces (--card, --popover) sit near the background; muted text (--muted-foreground) sits between.
Common moves:
- Warm/editorial → hue ~40–70, modest chroma, slightly off-white background.
- Cool/technical → hue ~230–260, low-chroma surfaces, crisp foreground.
- Brutalist/high-contrast → chroma 0, pure black/white,
--radius: 0.
- Soft/calm → raise
--radius, soften shadows, low chroma pastel surfaces.
Adjust --radius for roundness and the --font-sans/serif/mono stacks for
personality. Tune the --shadow-* scale together (keep the ramp consistent).
3. Edit, keeping BOTH blocks in sync
Edit app/theme.css. Update :root (light) and .dark so both modes look
intentional — don't change one and leave the other stale. Keep the dark block a
true inversion (low-L background, high-L foreground), not just a copy.
4. Enforce contrast (WCAG AA)
This is non-negotiable — the Theme Studio holds the same bar:
- Body text (
--foreground on --background, --card-foreground on --card, etc.) must hit AA contrast ≥ 4.5:1.
- Large text / UI ≥ 3:1.
- The fastest oklch lever is Lightness gap: a foreground/background L delta of roughly ≥ 0.4 clears AA for body text in most hues. Widen the gap if a pairing looks marginal.
- Verify every
*-foreground token against its surface, in both :root and .dark.
5. Verify
If a dev server is running, tell the user to reload / to see it live, and to
toggle dark mode. If they want a GUI with live preview and a built-in contrast
check, point them to /admin/theme (the Theme Studio) — it reads and writes the
exact same app/theme.css blocks. Summarize the palette you chose (primary hue,
chroma direction, radius) so they can iterate.
