title: Vue change global color variables after login
body: <p>i'm looking for ideas on how to completely repaint a website. We use vue with nuxt and sass with sass variables and bootstrap. I need to change the complete colors on the web after logging in, ideally just to change the sass variables file ... somehow. In main.scss all scss are imported and main.scss is imported in nuxt app.js. Any ideas?</p>
  <p>EDIT</p>
  <p>the correct solution is to use the css variables as follows</p>
  <pre><code>:root {
    --color-primary: limegreen;
  }
  
  .application {
    color: var(--color-primary);
  }
  
  .application.dark {
    --color-primary: green;
  }
  </code></pre>
  <p>after changing the class, the color changes, but now i get an error this one</p>
  <p>Custom property ignored: not scoped to the top-level :root element</p>
  <p>I tried to use it in main.js and directly in the component but still have the same problem. Any idea?</p>