CSS Custom Properties (CSS Variables) & Theming

CSS Custom Properties

:root {
    --primary: #6366f1;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
}

/* Dark Theme Override */
[data-theme="dark"] {
    --bg-surface: #0f172a;
    --text-main: #f8fafc;
}

body {
    background-color: var(--bg-surface);
    color: var(--text-main);
}

.btn-primary {
    background-color: var(--primary);
}