Customising Styles

Every visual property — colours, spacing, border-radius, typography — is expressed as a CSS custom property defined in shared/dt-core.css. Override any variable in your template's css/style.css to retheme the entire dashboard instantly.

## Design token reference

Tokens are grouped by category. All names are prefixed --dt-.

### Colour palette

Token	Default	Usage
`--dt-brand`	`#3B82F6`	Primary accent, active states
`--dt-brand-dark`	`#1D4ED8`	Hover on brand elements
`--dt-surface`	`#1E293B`	Card backgrounds
`--dt-bg`	`#0F172A`	Page background
`--dt-border`	`#334155`	Card and input borders
`--dt-text-primary`	`#F1F5F9`	Headings and labels
`--dt-text-muted`	`#94A3B8`	Body copy and subtitles
`--dt-positive`	`#22C55E`	Up trends, success states
`--dt-negative`	`#EF4444`	Down trends, error states
`--dt-warning`	`#F59E0B`	Warning badges

### Spacing scale

Token	Value
`--dt-sp-1`	4px
`--dt-sp-2`	8px
`--dt-sp-3`	12px
`--dt-sp-4`	16px
`--dt-sp-6`	24px
`--dt-sp-8`	32px

### Shape and typography

Token	Default
`--dt-radius-sm`	4px
`--dt-radius-md`	8px
`--dt-radius-lg`	12px
`--dt-font-sans`	Inter, system-ui, sans-serif
`--dt-font-mono`	JetBrains Mono, monospace

## Applying a custom theme

Add overrides at the top of css/style.css, inside a :root block:

/* css/style.css */
@import url('../../shared/dt-core.css');

/* ── Custom theme ───────────────────── */
:root {
  --dt-brand:        #7C3AED;   /* purple brand */
  --dt-brand-dark:   #5B21B6;
  --dt-bg:           #0A0A0F;   /* deeper background */
  --dt-surface:      #18181B;
  --dt-border:       #27272A;
  --dt-radius-lg:    16px;      /* softer cards */
}

💡 You only need to override the tokens you want to change — all others continue to use the defaults from dt-core.css.

## Theming ECharts charts

Chart colours are controlled separately in the ECharts option objects inside js/charts.js. Use the color array at the top level of each option:

const revenueOption = {
  color: ['#7C3AED', '#A78BFA', '#DDD6FE'],   // match your brand
  xAxis: { ... },
  series: [ ... ],
};

For a consistent palette across all charts, define it once and spread it into each option:

const PALETTE = ['#7C3AED', '#A78BFA', '#DDD6FE', '#4ADE80', '#FB923C'];

const option1 = { color: PALETTE, ... };
const option2 = { color: PALETTE, ... };

## Dark ↔ Light mode

Templates ship in dark mode by default. To add a light-mode toggle, define a second set of overrides under a [data-theme="light"] selector:

:root { /* dark — defaults from dt-core.css */ }

[data-theme="light"] {
  --dt-bg:           #F8FAFC;
  --dt-surface:      #FFFFFF;
  --dt-border:       #E2E8F0;
  --dt-text-primary: #0F172A;
  --dt-text-muted:   #64748B;
}

// Toggle in JS
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute('data-theme',
    current === 'light' ? 'dark' : 'light');
});