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.

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

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 */
}

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, ... };

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');
});