Theming

theme + color

<LiveChart
  :data="data"
  :value="value"
  theme="dark"
  color="#8b5cf6"
/>

Prop	Default	Notes
`theme`	`"dark"`	Switches grid, badge chrome, tooltips, background fade targets
`color`	`"#3b82f6"`	Accent — line, fill, badge fill, flat-state glow

Pass any CSS color LiveCharts can parse (#rgb, #rrggbb, rgb(), rgba()). The library derives the full LiveChartPalette via resolveTheme.

Live preview uses the shared engine via React bindings; copy the Vue snippet above.

Dark theme. Same component, different colour.

What gets derived

From one accent + mode:

Line stroke and fill gradient
Grid lines / labels
Badge background (accent) + outer chrome (mode)
Crosshair / tooltip surfaces
Dash connector and reference-line neutrals

What stays semantic

Momentum green / red for up / down dots and arrows are fixed (#22c55e / #ef4444). They do not follow the accent, so direction stays readable on any brand color.

Multi-series colors

Each series carries its own color. If you omit colors, SERIES_COLORS provides a default rotation.

Matching your page

Sync theme with your app chrome (e.g. Nuxt color mode):

<script setup lang="ts">
const chartTheme = computed(() =>
  colorMode.value === "dark" ? "dark" : "light"
);
</script>

<template>
  <LiveChart :theme="chartTheme" color="#2563eb" :data="data" :value="value" />
</template>

Put the chart in a container whose background matches theme so edge fades look correct.