title: Using SCSS variables with Nuxt color mode
body: <p>I am trying to use Nuxt color mode, with my existing SCSS stylesheets. So far I've used variables like $primary and $secondary for all the colors throughout the app. And I would like to use nuxt color mode to change the theme. The example <a href="https://nuxtjs.org/blog/going-dark-with-nuxtjs-color-mode/#lets-get-started" rel="nofollow noreferrer">here</a> shows a set of CSS variables, that change depending on the class of the html element e.g. (.dark-mode, .light-mode)</p>
  <p>How can I apply this logic (changing the color variables, depending on the class of the html element) with SCSS?</p>
  <p>I tried this:</p>
  <pre><code>.light-mode {
      $primary: #196b69;
      $accent: #e69496;
      ...
  }
  .dark-mode {
      $primary: red;
      $accent: blue;
      ...
  }
  </code></pre>
  <p>And a little bit of this:</p>
  <pre><code>$themes: (
      light-mode: (
          primary: #196b69,
          accent: #e69496,
          ...
      ),
      dark-mode: (
          primary: red,
          accent: blue,
          ...
      )
  );
  </code></pre>
  <p>But it hasn't worked.
  Thanks in advance for any help or references to helpful documentation! :)</p>