Theming

Learn how to customize Nuxt Charts appearance using CSS variables for theming and dark mode support.

Add Global CSS Variables

Check the Unovis documentation for more information here.

assets/css/main.css
:root {
    /* Chart Fallback Colors */
  --vis-color0: oklch(0.63 0.1363 157.86) !important;
  --vis-color1: oklch(0.76 0.1782 153.61) !important;
  --vis-color2: oklch(0.70 0.15 270) !important;
  --vis-color3: oklch(0.75 0.15 60) !important;
  --vis-color4: oklch(0.68 0.15 330) !important;

    /* Legend */
  --vis-legend-item-spacing: 0px !important;
  --vis-legend-spacing: 16px !important;
  --vis-legend-label-color: var(--ui-text-muted) !important;

  /* Axis */
  --vis-axis-grid-color: rgba(0, 0, 0, 0.1) !important;
  --vis-axis-tick-label-color: var(--ui-text-muted) !important;
  --vis-axis-label-color: var(--ui-text-muted) !important;
  --vis-axis-tick-color: var(--ui-text-muted) !important;
  --vis-axis-domain-line-dasharray: none !important;
  --vis-axis-tick-label-weight: 400 !important;

  /* Timeline */
  --vis-timeline-row-even-fill-color: #f9fafb !important;
  --vis-timeline-row-odd-fill-color: transparent !important;
  --vis-timeline-label-color: var(--ui-text-muted) !important;
}

/* Dark mode example: override theme variables */
.dark {
  --custom-primary: oklch(0.72 0.192 149.58);
  --custom-secondary: oklch(0.63 0.1963 157.86);
  /* ...override other variables for dark mode as needed... */
}