Please make themes use colour variables, not ignore them (CSS)
P
Paul G.
Hi, I was just reminded of the fact that themes ignore the colour variables stored in CSS. Switching to dark mode meant that my
var(--whites1)
thick border still showed the same slightly grey colour, on top of a black background..I should not need to also add this:
body.dark-portal (other selectors here) {
border-color: var(--black);
}
What is the point of variables if we need to double up CSS work for dark themes?
P
Paul G.
I was just explaining this concept to someone and I'll expand a little more here.
Themed colours should be named (and used) by their relationship to the primary colours of the theme, that being background (typically white or black) and your primary colour.
Currently dark mode removes --whites2 for example, but more importantly CSS is using that directly to apply colour. It's not using a theme at all in many places.
Below is purely conceptual, to visualise.
The colour names are the same on the left, but the colours change with the theme. It would be great if at least
some
of the colours could be more standardised between light/dark mode and other theme variations.Light example:
Background = white
Text = black
Primary colour = purple
Primary for buttons = light purple, or light grey
Primary for mouseover buttons = dark purple
Primary for headers or borders = darker purple, or dark grey
---
Dark example:
Background = black
Text = white
Primary colour = purple
Primary for buttons = dark purple, or dark grey
Primary for mouseover buttons = light purple
Primary for headers or borders = lighter purple, or light grey