Docs
Use my theme
Give the Studio your existing theme files and the directions start from your colours, radius and font instead of ours.
How to use it
In the Studio, open Use my theme, then drop or pick files, or paste CSS. Nothing is uploaded until you explore: files are read in your browser and the values found are sent with your brief. Every value keeps the file and line it came from, and a note explains what was mapped and what was ignored. Colours are never adjusted: if a pair has low contrast, it is kept and reported.
Supported files
| File | What is read |
|---|---|
components.json | shadcn settings: style, tailwind.baseColor, tailwind.cssVariables, iconLibrary. These describe the component kit, not exact colours. If cssVariables is false, colours cannot be read and you should add a stylesheet or DESIGN.md. |
globals.css (Tailwind v3 or v4), or pasted CSS | Custom properties in :root, .dark and @theme: --background, --foreground, --card, --muted (or --secondary), --primary, --radius (or --radius-md, -lg, -xl) and --font-sans. The --color-* forms are read too. |
DESIGN.md | The YAML front matter: colors (primary to accent, neutral to background, on-surface to foreground, surface and surface-variant to panels), rounded.md to radius, and typography. |
DTCG tokens.json | Design tokens in the W3C format, with aliases resolved. Recognised names: background, foreground, surface, surface-2, accent (or primary, brand), radius.md and font-body. |
Rules of thumb
- If you give more than one kind of file, CSS is used first, then DESIGN.md, then DTCG tokens.
- If a stylesheet defines both
:rootand.dark, the file's default palette is used unless you choose the other one in the palette switch. - Files with no colour or radius tokens the reader recognises are ignored, and a note says so.