title: Add CSS variables (custom properties) in the root not in the document
body: <p>I am working with angular 12 and I am creating dynamic theme change.</p>
  <p>When my application is loaded according to the selected theme I set all my color variables like this:</p>
  <pre><code>document.documentElement.style.setProperty(colorKey, colorValue);
  </code></pre>
  <p>After it, all colors are set to the document element not to the root element.</p>
  <p><a href="https://i.stack.imgur.com/yuxRR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yuxRR.png" alt="enter image description here" /></a></p>
  <p>As you see I also have some variables to the root element. But those variables are defined in the css file as:</p>
  <pre><code>:root {
      --primary: #005d7a;
      --primary-50: #edf1f2;
      --primary-400: #0094bd;
      --primary-700: #027498;
      --secondary-50: #ffebb7;
      --silver: #3a3a3a;
      --silver-light: #e4e7ea;
      --silver-light-border: #dad7d6;
      --main-background: white;
      --main-page-background: #e4e7ea;
      --main-text-color: #3a3a3a;
      --disabled-color: #ccc;
  }
  </code></pre>
  <p>And that works fine.</p>
  <p>My question is:</p>
  <ol>
  <li>How to set other variables which are defined from the ts file to the root not to the document element ?</li>
  <li>According to the <a href="https://www.techiediaries.com/css-root/" rel="nofollow noreferrer">post</a> root selector is stronger than document. How then (as you can see on the image above) my root primary-50 color is overridden with document primary-50 ?</li>
  </ol>