defuss-shadcn / Guides / Theming / theme-designer
Theme Designer
Design a theme the way tweakcn does, on this site's own components. Pick a theme to start from: your first change makes it a custom theme that saves as you go, in this browser, on top of the theme menu. Export the CSS for your project (Theming explains the tokens).
On this page (4)
Click a colour to change it. You edit the palette the page shows, light or dark - as the light / dark switch is set.
Actions
Forms & Inputs
Inputs, selects, checks and text
Data Display
This month
Revenue
$45,231
+20.1% from last month
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250 |
| INV002 | Pending | $150 |
Charts
--chart-1 ... --chart-5
Feedback & Status
Heads up
Your theme follows every change.
Error
Something went wrong.
Overlays
Popover
Surfaces use --popover and --popover-foreground.
Is it accessible?
Yes - native details and summary.
Is it themable?
Every colour is a token.
Navigation
Make changes to your account.
Change your password.
Application
The sidebar tokens
A Acme Inc.
Dashboard Inbox 4 SettingsChat
Calendar
Typography
Sans · Serif · Mono
The quick brown fox jumps over the lazy dog
Body text in the sans font: themes are one identity in two palettes - the same shape, the same type, light and dark.
A link in running text takes the line and the offset from the Typography settings.
"Design is not just what it looks like and feels like. Design is how it works."
--primary: oklch(0.205 0.005 285);Comments, ideas or improvements? Edit this page's source on GitHub