CSS Styles

Colors

You can modify the colors either at the theme-root level or at any custom element level via any class you want to use staring with 'theme-' (e.g. 'theme-mod'). These are the CSS variables you can define, all other in-between colors will be derived from these.

custom-colors.css

.theme-root {
    --cAcc: color(display-p3 0 0.43 0.89);
    --cDark: color(display-p3 0.11 0.11 0.13);
    --cLight: color(display-p3 0.54 0.56 0.68);
    --cErr: color(display-p3 1 0 0.33);
}

Why is there only one accent color? I need more. – Because it's very easy to set this up by yourself. Just add a class, that overwrites the var(--cAcc) and make sure, it starts with 'theme-'.

custom-themes.css

.theme-error {
    --cAcc: color(display-p3 1 0.32 0.36);
}
.theme-warning {
    --cAcc: color(display-p3 1 0.95 0.32);
}