0

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.

JueK3y
  • 267
  • 9
  • 22
  • So i found a "solution" in another post: https://stackoverflow.com/questions/60456346/how-to-set-light-and-dark-modes-with-scss-variables – JueK3y Feb 25 '21 at 14:19

1 Answers1

0

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.

JueK3y
  • 267
  • 9
  • 22