title: Change css variables dynamically in angular
body: <p>In my angular project, I have some css variables defined in top level <strong>styles.scss</strong> file like this. I use these variable at many places to keep the whole theme consistent.</p>
  <pre><code>:root {
    --theme-color-1: #f7f7f7;
    --theme-color-2: #ec4d3b;
    --theme-color-3: #ffc107;
    --theme-color-4: #686250;
  
    --font-weight: 300
  }
  </code></pre>
  <p>How can I update values of these variables dynamically from <strong>app.component.ts</strong> ? And What is the <strong>clean way</strong> to do this in angular ?</p>