Skip to main content

Please make themes use colour variables, not ignore them (CSS)

Core Web App

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?

1 comment

Log in to comment and vote

Comments1

  • Black Quasar

    •

    Oct 16, 2024

    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 = whiteText = blackPrimary colour = purplePrimary for buttons = light purple, or light greyPrimary for mouseover buttons = dark purplePrimary for headers or borders = darker purple, or dark grey---Dark example:Background = blackText = whitePrimary colour = purplePrimary for buttons = dark purple, or dark greyPrimary for mouseover buttons = light purplePrimary for headers or borders = lighter purple, or light grey