Theme example

:root {
    --border-radius: 4px;
}

:root[data-theme="light"] {
    --color-text: oklch(23.82% 0.002 197.06);

    --color-bg: oklch(0.98 0 0 / 1);
    --color-on-bg: oklch(0.163 0.001 264);
    --color-surface: oklch(0.97 0 0);
    --color-on-surface: oklch(0.163 0.001 264);
    --color-surface-variant: oklch(0.939 0.001 264);
    --color-on-surface-variant: oklch(0.163 0.001 264);

    --color-border: oklch(0.92 0 0);

    --color-primary: oklch(56.96% 0.039 229.89);
    --color-on-primary: oklch(1 0 0);
    --color-secondary: oklch(77.49% 0.044 313.63);
    --color-on-secondary: oklch(1 0 0);
    --color-accent: oklch(67.34% 0.068 332.28);
    --color-on-accent: oklch(1 0 0);

    --color-info: oklch(0.587 0.088 233.094);
    --color-on-info: oklch(1 0 0);
    --color-success: oklch(0.616 0.115 197.1);
    --color-on-success: oklch(1 0 0);
    --color-warning: oklch(0.776 0.145 70.7);
    --color-on-warning: oklch(1 0 0);
    --color-error: oklch(0.59 0.193 26.231);
    --color-on-error: oklch(1 0 0);
}

:root[data-theme="dark"] {
    --color-text: oklch(90.90% 0.001 197.14);

    --color-bg: oklch(0.163 0.001 264);
    --color-on-bg: oklch(0.956 0.001 264);
    --color-surface: oklch(0.28 0 0);
    --color-on-surface: oklch(0.82 0 0);
    --color-surface-variant: oklch(0.239 0.001 264);
    --color-on-surface-variant: oklch(0.768 0.001 264);

    --color-border: oklch(0.17 0 0);

    --color-primary: oklch(64.00% 0.038 229.71);
    --color-on-primary: oklch(1 0 0);
    --color-secondary: oklch(35.69% 0.053 313.09);
    --color-on-secondary: oklch(1 0 0);
    --color-accent: oklch(48.50% 0.074 332.90);
    --color-on-accent: oklch(1 0 0);

    --color-info: oklch(0.583 0.072 231.8);
    --color-on-info: oklch(1 0 0);
    --color-success: oklch(0.667 0.087 182.3);
    --color-on-success: oklch(1 0 0);
    --color-warning: oklch(0.696 0.117 65.1);
    --color-on-warning: oklch(1 0 0);
    --color-error: oklch(0.619 0.13 30.047);
    --color-on-error: oklch(1 0 0);
}