title: Is there a way to replace global variables conditionaly in SCSS?
body: <p>I have discovered the "prefers-color-scheme" media query recently and saw that newer versions of most common browsers are compatible with it.</p>
  
  <p>I wanted to make some SCSS code that generates global variables to export with the value depending on the "prefers-color-scheme" in order to avoid duplicating "theme classes".</p>
  
  <pre><code>$schemeColor: #eeeeee !default;
  $reverseColor: #333333 !default;
  $textColor: #000000 !default;
  
  
  @media (prefers-color-scheme: dark){
    $schemeColor: #333333 !global;
    $reverseColor: #eeeeee !global;
    $textColor: #FFFFFF !global;
  }
  @media (prefers-color-scheme: light) {
      $schemeColor: #eeeeee !global;
      $reverseColor: #333333 !global;
      $textColor: #000000 !global;
  }
  
  </code></pre>
  
  <p>When I use one of the variables after this piece of code, whatever is the prefers-color scheme, the values stored in variables will be the last that are written </p>
  
  <p>(here: the values that are set in <code>@media (prefers-color-scheme: light)</code>).</p>
  
  <p>I have tried to create classes inside the media queries.<br>
  When I do this, the classes declared inside the media-queries are correctly applied depending on color-scheme, but the variables keep storing the last value that they had been set to.</p>