CSS variables (custom properties)?

[mabster]

Categorising this as an idea but perhaps it's already available. Please let me know if it is!

I was hoping you might be able to introduce CSS custom properties for the colour schemes, so that they're easy to override in custom CSS.

Something like

:root {
  --dark-text: white;
  --dark-background: black;
  --dark-accent: orange;
  --dark-link: blue;

  --light-text: black;
  --light-background: white;

   /* etc etc */
} 

Right now I'm having to define some very specific CSS rules to override colours for things. For example, my custom CSS file has code like this:

body.colorscheme-light a, 
body.colorscheme-light .footer a,
body.colorscheme-light a:hover,
body.colorscheme-light a:focus,
body.colorscheme-light .navigation a:hover, 
body.colorscheme-light .navigation a:focus,
body.colorscheme-light .content .centered .about ul li a:hover, 
body.colorscheme-light .content .centered .about ul li a:focus {
    color: sienna;
}

body.colorscheme-dark a, 
body.colorscheme-dark .footer a,
body.colorscheme-dark a:hover,
body.colorscheme-dark .navigation a:hover, 
body.colorscheme-dark .navigation a:focus,
body.colorscheme-dark .content .centered .about ul li a:hover, 
body.colorscheme-dark .content .centered .about ul li a:focus {
    color: rosybrown ; 
}

Simply redefining a couple of colour custom properites would make that much simpler!

[mabster]

Ah, I just realised I can make my own copy of variables.scss and customise there! I'll close this.