Theme editor
Change any design token and watch the table follow, then copy the CSS or the theme object into your own project.
Every visual value in the table is a CSS custom property. Change one here and the table below updates immediately: no rebuild, no class names, no specificity fight. When you are happy, copy the result out as CSS or as a theme object.
Loading…
What to try
- Change
--tk-color-accentand notice how far it reaches: the focus ring, the sort indicator, the selected row, the spinner. - Adjust the cell padding tokens and see that this is all
compactdensity really is. - Set
--tk-pinned-shadowto something visible, then scroll a wide table sideways. - Switch the preset and start again from a different set of defaults.
Related
- Theming: presets, overrides and dark mode.
- Design tokens: what each token controls.
- Theme tokens: the complete generated list.