Skip to content

SPIKE: try using custom properties as the base for dark mode

Simon Knox requested to merge psi-scss-science into master

What does this MR do and why?

Science for #301147 (closed)

The problem

We currently compile a whole second version of application.css for dark mode. This is bad if we want to add more themes, or split application.css into multiple files.

This solution

Use CSS variables in application.css, and then override them per theme.

How to do?

To avoid having to replace every instance of $white with var(--white);, I wanted to do this:

--white: #fff;

$white: var(--white);

But then SCSS functions like darken($white, 20%); will error - as SCSS doesn't know the value of var(--white) at compile time. We could replace usages of these in our codebase, but there are still some in bootstrap that we can't replace. So this MR re-implements necessary ones to crudely support CSS variables.

How to support CSS variables?

Added a function, is-custom-property to check if values start with var(-- or --

Edited by Simon Knox

Merge request reports