Theming
Dark mode
If your app already puts .dark on an element, you don't need to do anything. Spotcheck follows it.
Spotcheck stays light until something opts in, so an app with no dark mode is never left half dark.
You can also use data-theme on any element:
<html data-theme="system">
<section data-theme="dark">The value can be light, dark or system. It works on part of a page too.
Skins
Skins change the accent and the display type. Set data-skin on <html> or on any section.
<html data-skin="folio">| Skin | Display type |
|---|---|
ledger | Condensed Archivo in uppercase |
terminal | IBM Plex Mono throughout |
folio | Instrument Serif italic |
Fonts
Every component sets its own font, so it looks the same whatever font the rest of your app uses. Three variables in your stylesheet decide which fonts those are.
| Variable | Used for | Default |
|---|---|---|
--f-body | Running text | Archivo |
--f-mono | Labels, code and numbers in tables | IBM Plex Mono |
--f-serif | The folio skin's display type | Instrument Serif |
To use your own font, point the variable at it. This makes Spotcheck's running text match your app:
:root {
--f-body: var(--font-sans);
}Leave a variable alone and the component keeps the Spotcheck default. You can also set a variable on
one section, or change a single component with className:
<section style={{ "--f-body": "Georgia, serif" }}>
<ModelRace lanes={lanes} className="font-serif" />Tokens
Everything comes from CSS variables in your stylesheet, so you can edit them there.
| Token | Used for |
|---|---|
--paper | Page background |
--ink | Text, rules and shadows |
--mute | Secondary text |
--wash | Quiet fills |
--raise | Raised surfaces |
--accent-ink | The accent |
--on-accent | Text on the accent |
--highlight | Light on a raised surface, such as the glare on a tilted card |
--ok, --warn, --bad | Status |
--rule | Rule weight |
The accent is called --accent-ink because shadcn already uses --accent.
To change the accent, set --accent-light and --accent-dark. Each colour is written with
light-dark(), so one value covers both modes.
:root {
--accent-light: #0f766e;
--accent-dark: #5eead4;
}