1

I'm using Bootstrap in my project and I would like to change the body-bg variable based on the user's system color preferences.

It's the initial value:

$body-bg: #fff;

I am trying to change with using this media query:

@media (prefers-color-scheme: dark) {
  $body-bg: #000;
}

But it doesn't work. Is there any way to change this variable?

Ramazan Erikli
  • 147
  • 1
  • 5
  • 16
  • 3
    Unfortunately you can’t do that. What you likely need are css custom properties/ css variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties – Luckyfella Dec 19 '21 at 23:01
  • 1
    A better answer is already provided here: https://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries – Luckyfella Dec 19 '21 at 23:05
  • 1
    Does this answer your question? [Using Sass Variables with CSS3 Media Queries](https://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries) – Luckyfella Dec 19 '21 at 23:05
  • 1
    Yes, it was helpful. Thank you. – Ramazan Erikli Dec 21 '21 at 05:14

0 Answers0