Theming
- Light & dark mode
- Shared color tokens
- One file to rebrand
13 themes, both modesIt should look like
It should look like
your product.
Colors and shape live in one stylesheet as variables. Change them and every screen follows: the product, the login screen, and the admin panel, in light and dark.
assets/styles.cssDefault
--primary: oklch(0.65 0.22 50);every screen that reads it
Create projectproInvite a teammate
Seats synced with billing
the admin panel reads the same names
how a retheme works
Make it look like your company.
01
Open one file
assets/styles.css holds brand, surfaces, text and chart colors as named OKLCH variables.
02
Change the values
Write your own values, or let the CLI apply one of 13 shipped presets, each defined for light and dark.
03
Everything follows
Buttons, badges, charts, the login gradient and the admin panel all resolve to the same variables, across all six apps.
Create projectpro
Create projectpro
same components, two values of --primary
Change one line.
Retheme everything.
Five brands
One codebase. Five different companies.
Real covers from the five shipped templates. A theme, a radius, a mode: that is the entire difference.
Aetherlocalhost:4200
One file, every screen
Pick a theme. Watch every corner change.
The same presets the CLI writes into a generated project, applied live.
theme presets
radius
13
Full themes, each in light and dark
The same presets the CLI writes into a generated project.
light / dark in every one1 file
To retheme every screen you own
App, login and admin all follow assets/styles.css.
styles.css
app
login
admin
5
Brands already running on this system
The shipped templates differ by tokens, not by code.
five brands, one codebase
The admin panel too. And both modes.
Most template theming stops at the marketing site. This reaches the product, the admin panel, and the login screen.
assets/styles.css
:root
primary
secondary
muted
card
destructive
accent
.dark
primary
secondary
muted
card
destructive
accent
Retheme without hunting hex codes
Semantic names, both modes from one set of variables, internal tools included.
Semantic tokens
Ask for primary, not orange-500
Components ask for the role, never for the color.
primary
secondary
muted
card
destructive
accent
Dark mode
Same names, different values
Two value sets under the same variables. Not two designs.
:root
Light values
.dark
Dark values
Admin + app
Internal tools match the product
Same stylesheet. One retheme covers both.
admin, same stylesheet
Templates
Five skins, one codebase
A theme, a radius, a starting mode. That is the difference.
templates/*/manifest.json
- Vaultblack0.375remdark
- Aetherdefault0.4remdark
- Better Studioocean1remdark
- Open Calendarlime1remlight
- Mind Mappaper1remlight
What the tokens reach
Every piece follows the same tokens.
Components, layouts, and themes, all driven by the one stylesheet you just tried in the switcher.
Theme presets
- 13 ready-made themes
- Light & dark variants
- Choose in the CLI
Brand templates
- Five finished brands
- Shared design tokens
- Customize your theme
Landing pages
- Hero & feature sections
- Pricing section
- Matches your app theme
App layouts
- Sidebar navigation
- Organization switcher
- Breadcrumbs
Mobile navigation
- Responsive layouts
- Mobile navigation drawer
UI components
- Data tables & charts
- Forms & OTP inputs
- Command palette & sidebar
See it running
Templates are curated project starters built on this stack: a layout, feature packs, a custom theme, and bonus pages. The previews below are recordings of the real apps.
Questions, answered
Yes. Everything lands as plain source in your repository: frontend, backend, admin, database schema. There is no runtime dependency on us and nothing phones home.
Make it look like your product.
Start from the closest template, or take the neutral starter and write your own values into one file.
13 presets / both modes / your repo