Theme playground
The kit is tokens. Change --k-primary and every primary button follows. You don’t restyle each class.
Pick a token in Colors, or edit the CSS. Copy either way. Paste after the k-web-ui import. Put data-theme="k-light" or k-dark on the document root, the same as Getting started. The stage below is a sandbox. The rest of the docs keep the kit theme.
Edits stay on this stage. Copy the CSS into your project after the kit import.
Hint text uses muted foreground.
A link with extra context.
Page 1 of 4
Page 2 of 4
Page 3 of 4
Page 4 of 4
Deployment
Last run 4 minutes ago
Every check passed on the latest commit.
| Name | Status |
|---|---|
| Deploy | Ready |
| Build | Queued |
What is a token?
A CSS variable the components already read.
Where does this CSS go?
After the kit stylesheet, on the document that sets data-theme.
PrimaryInfoSuccessWarningDanger
See Colors for what each token is for, and Styles for radius, shadow, and the focus ring.