SPIKE: try using custom properties as the base for dark mode
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