title: Angular - How to get SCSS variable in style.scss by javascript in a component?
body: <p>I have an application with Angular 9 using Angular Material, which has 2 themes (dark and light). They are defined like this in the style.scss file:</p>
  <pre><code>$rasd-dark-text-color: mat-palette($mat-grey, 300);
  $rasd-light-text-color: mat-palette($mat-grey, 800);
  
  .rasd-dark {
     --text-color: #{mat-color($rasd-dark-text-color)};
  }
  
  .rasd-light {
     --text-color: #{mat-color($rasd-light-text-color)};
  }
  </code></pre>
  <p>And to set the theme for the application, I just set it as a class of the body element:</p>
  <pre><code>&lt;body class=&quot;mat-typography rasd-dark&quot;&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I have a small Angular component which will need to get the value from <strong>--test-color</strong> as <strong>Hex color</strong> which depends on which (dark or light theme is applied on the <strong>body</strong> element).</p>
  <pre><code>export class ChartComponent implements OnInit {
      textColor: string;
      
      ngOnInit(): void {
        // (!!!) How can I set the value for textColor from --test-color in SCSS?
        // e.g: after setting, the value of textColor is #001100
      }
  }
  </code></pre>