1

I am working with angular 12 and I am creating dynamic theme change.

When my application is loaded according to the selected theme I set all my color variables like this:

document.documentElement.style.setProperty(colorKey, colorValue);

After it, all colors are set to the document element not to the root element.

enter image description here

As you see I also have some variables to the root element. But those variables are defined in the css file as:

: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;
}

And that works fine.

My question is:

  1. How to set other variables which are defined from the ts file to the root not to the document element ?
  2. According to the post 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 ?
Milos
  • 1,678
  • 4
  • 23
  • 49

1 Answers1

5

Nothing is set on the document. The documentElement is the root element.

You have a stylesheet that sets some things on :root, which is the html element in an HTML document.

i.e. :root in CSS targets the same element as document.documentElement in DOM.

You have some inline style (a style attribute) on the html element (which is the same element).

Cascading rules give rules in the style attribute priority over all other rules of equal importance and from the same source.

The document you reference says that the selector :root has higher specificity that the selector html. Neither of them have higher specificity than a style attribute.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks for good explanation. Whenever I read how to change value of the root CSS variable I get the same answer: document.documentElement.style.setProperty(colorKey, colorValue). That is confusing part for me. If I want to change root CSS variable is the same piece of code as adding inline CSS variable to the document element ? – Milos Jul 26 '21 at 09:45
  • I have no idea what you are trying to ask now. – Quentin Jul 26 '21 at 09:46
  • How to change value of (for example:) root { primary } variable I defined in my CSS ? Without adding inline style to the document... – Milos Jul 26 '21 at 09:52
  • My whole point is that I do not want to see those style as inline style, if that is possible. – Milos Jul 26 '21 at 09:52
  • https://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript – Quentin Jul 26 '21 at 09:55
  • As far as I understand according to the link you post is that changing pseudo selector rules ( :root in my case ) is not so easy/possible. The only way to do that is dynamically insert style to the document like" document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0); Which my differ from browser to browser ? – Milos Jul 26 '21 at 10:37
  • The selector isn't really relevant, the process for editing rules is the same regardless. APIs for changing rules are stable these days, they weren't 12 years ago. – Quentin Jul 26 '21 at 10:38
  • Thanks for explanation. I think that I got the point. I will accept your answer anyway. You can add this small explanation about overriding/changing pseudo rules, if you want for someone else who read this article. – Milos Jul 26 '21 at 10:46