# Theme Builder

> Build a light/dark theme from scratch or improve an existing one, with a complete surface, text, and interactive color system. Use when the user asks to build or create a theme, use the theme builder, or set up a light and dark theme.

- Skill: `aboudjem/theme-builder` (Agent Skill)
- Install (CLI): `npx skillmds@latest add aboudjem/theme-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aboudjem/theme-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: aboudjem (https://skillmd.com/u/aboudjem)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/aboudjem/theme-builder

---


# /theme-builder: Build or Improve Theme

Build a complete light + dark theme from a brand color, or improve an existing theme.

## Flow

1. Determine brand color and style direction
2. Generate palette with `uiux_generate_palette`:
   - Brand: primary, primary-foreground
   - Neutral: 11-step scale from lightest to darkest
   - Semantic: success, error, warning, info (each with base, light, dark)
   - Surfaces: background, surface, elevated, overlay
   - Text: primary, secondary, muted, inverse
   - Borders: default, strong, muted
   - Interactive: focus ring, selection, hover overlay
3. Generate dark mode variant (proper dark mode, not inverted)
4. Output in project-appropriate format (CSS vars, Tailwind, shadcn theme)

## Output

Complete theme configuration ready to paste into the project.