theming-vela-ui
Installation
SKILL.md
Theming Vela and vela-ui
A theme is data built by createTheme. One theme reaches the chart's canvas (candles, grid,
axis text), Vela's chrome (toolbars, menus, dialogs) and every kit component.
Where a change belongs
Pick the first row that can express the change; each later row is more specific and more work to maintain.
| To change | Use |
|---|---|
| Background, text, candles, grid | createTheme({ colors: { background, text, grid, border, up, down } }); light or dark is read from the background |
| Brand color, corner roundness, font | accent (the same choice as colors.accent; the top-level one wins), radius (none, sm, md, lg), font |
| One design token | tokens: { 'surface-elev': '#1b1c22' } (name without --vela-) |
| One component's sizes, radius or colors | components: { button: { radius: '2px' } } (its settings) |
| A component's whole look | components: { button: { css: { root: css`…`, icon: css`…` } } } (its parts) |
| Scrollbars | tokens scroll (thumb color) and scroll-size (width) |