It shipped on Tuesday and should arrive within two days.
Themes
Four alternate looks for Candor, beside the default: Slate, Paper, Console and Signal. Each sets every colour role in light, dark and high contrast, and each passes the same 150 contrast checks as the default: 44 text and edge pairings and the focus ring on 6 surfaces, in each of the three modes.
Each is one CSS file you import after candor.css, and a free registry item. Components don’t change; their colours do, and Console also sets the compact density.
Contrast, measured
Each theme is checked by the same contrast checks the theme builder runs, and a theme that fails one doesn’t ship. Run them on your own file with npx candor-ui theme check. These numbers are measured on this page from the files you install.
| Theme | Light | Dark | High contrast | All |
|---|---|---|---|---|
| Slate | 50 of 50 pass | 50 of 50 pass | 50 of 50 pass | 150 of 150 pass |
| Paper | 50 of 50 pass | 50 of 50 pass | 50 of 50 pass | 150 of 150 pass |
| Console | 50 of 50 pass | 50 of 50 pass | 50 of 50 pass | 150 of 150 pass |
| Signal | 50 of 50 pass | 50 of 50 pass | 50 of 50 pass | 150 of 150 pass |
| Candor (default) | 50 of 50 pass | 50 of 50 pass | 50 of 50 pass | 150 of 150 pass |
See one
Slate
Cool blue-grey neutrals and a blue accent; dark is a deep navy slate.
Slate, light
Where is order 4821?
The agent wants to run npm test -- invoices
Bash- Why you’re asked
- No rule allows Bash commands yet.
- Permission mode
- Ask before acting
{
"command": "npm test -- invoices"
}Nightly import
Accounts from the billing system
RunningNeeds youDoneFailed
SelectedVerifiedNeeds youFailed
Last run 6 hours ago
Slate, dark
Where is order 4821?
It shipped on Tuesday and should arrive within two days.
The agent wants to run npm test -- refunds
Bash- Why you’re asked
- No rule allows Bash commands yet.
- Permission mode
- Ask before acting
{
"command": "npm test -- refunds"
}Nightly import
Accounts from the billing system
RunningNeeds youDoneFailed
SelectedVerifiedNeeds youFailed
Last run 6 hours ago
Slate, high contrast
Where is order 4821?
It shipped on Tuesday and should arrive within two days.
The agent wants to run npm test -- orders
Bash- Why you’re asked
- No rule allows Bash commands yet.
- Permission mode
- Ask before acting
{
"command": "npm test -- orders"
}Nightly import
Accounts from the billing system
RunningNeeds youDoneFailed
SelectedVerifiedNeeds youFailed
Last run 6 hours ago
Contrast: all 150 checks pass.
- Light: the narrowest margin is the focus ring on
--mutedat 3.13:1 (needs 3:1). - Dark: the narrowest margin is
--faint-foregroundon--accentat 5.12:1 (needs 4.5:1). - High contrast: the narrowest margin is
--on-destructiveon--destructiveat 9.03:1 (needs 7:1).
Use Slate
Install with the Candor CLI
Then import it after candor.css, in your app's CSS
The file sets every colour role in every theme, so nothing of the default shows through; its header says what was checked. The chart series keep Candor’s values.
Your own brand
None of these is yours? The theme builder starts from Candor’s colours and takes your brand’s colour, neutral, font, radius and density, runs the same checks as you go, and writes an override file in the same shape as these.
Open the theme builder