Search code examples
cssvariablessassdarkmode

SCSS variables do not work in conjunction with prefers-color-scheme: dark

I'm currently experimenting a bit with the CSS feature prefers-color-scheme.
Since I'm using SCSS, I declare all the colors I use at the beginning. So here's what I did:

$textColor: #1B1C1E;
$hoverColor: #0203048a;

@media (prefers-color-scheme: dark) {
  $textColor: #FAFAFA;
  $hoverColor: #BBC6C6;
}

When I then try the whole dark mode thing, prefers-color-scheme: dark is ignored and the colors are displayed as without preferd-color-scheme. I test the whole thing in Chrome and use the Dev Tool to emulate the CSS feature.

Does anyone know why this is? Can't I use SCSS variables in conjunction with preferd-color-scheme?

The only solution so far would be to put all the code that is changed in darkmode into the @media (prefers-color-scheme: dark) {} part. But this is a bit time-consuming, if you have to do this for every change.

Solution

  • As I said before, I found the solution in another StackOverflow post.
    Here the content briefly summarized:

    TL;DR: When converting SCSS to CSS, the SCSS variables (i.e. the ones with $ in front of the name) are not converted as well.

    In order to use variables that also work with CSS, they must be declared with -- (instead of $).
    To use them then var(--varName) is specified.