What to change, and where
One table: each kind of change to the UI kit and the file, setting or theme entry it belongs in.
| To change | Where | It reaches |
|---|---|---|
| Chart colors: background, candles, grid, axis text | the theme's seven chart fields, or colors in createTheme | the chart's canvas, and the tokens derived from them |
| Brand color, radius scale, font | accent, radius, font in createTheme | every component |
| One token | tokens in createTheme, or CSS on [data-vela-theme] | every component that uses it |
| Scrollbars | the scroll (thumb color) and scroll-size (width) tokens | every scroller inside a kit host |
| Vela's own chrome: toolbars, sidebar, legends, status line | the same tokens; for more, CSS on its .vela-* classes in your page (the chrome sits in @layer vela.chrome, below it) | the chart's chrome |
| A theme made of colors only | createTheme({ colors }); in Vela, registerTheme offers it in the chart settings | the chart and every component |
| One component's sizes, radius, weight or variant colors | its settings in components, or CSS on its --vela-<component>-* variables | that component everywhere |
| One component's whole look: shape, typography, states, decorations | its css in components, by part | that component wherever the theme applies |
| Anything else about one component's look | CSS on its data-slot, data-variant, data-size | that component everywhere |
| A component's behavior or markup | a component of your own, built from the kit's helpers (Writing a component) | your screens |
dist/manifest.json lists each component's parts and their slots, its settings, its
variants and the attributes its CSS styles by. Theming lists the tokens and the
cascade layers each kind of change lands in. The chart's own canvas (candles, grid, axis
text) is drawn from the theme object, not from CSS, so those colors change through the theme
only.
Theming
Build a theme with createTheme: colors, design tokens, component settings, part-by-part CSS and the cascade layers that keep your styles in charge.
Writing a component
Write a component with the kit authoring helpers: defineComponent, h, css, variants and tokens, in the one-file shape themes can restyle.