在根目录而不是文档中添加 CSS 变量（自定义属性）

Question

我正在使用 Angular 12，并且正在创建动态主题更改。

当我的应用程序根据所选主题加载时，我设置所有颜色变量，如下所示：

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

之后，所有颜色都设置为文档元素而不是根元素。

正如您所看到的，我还有一些根元素的变量。但这些变量在 css 文件中定义为：

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

效果很好。

我的问题是：

1. 如何将从 ts 文件定义的其他变量设置到根目录而不是文档元素？
2. 根据帖子根选择器比文档强。那么（如上图所示）我的根primary-50颜色如何被文档primary-50覆盖？

Answer 1

上没有设置任何内容document。是documentElement根元素。

您有一个样式表，它设置了一些内容:root，即htmlHTML 文档中的元素。

即:rootCSS 中的目标元素与 DOM 中的元素相同document.documentElement。

元素（是同一个元素）style上有一些内联样式（属性）。html

级联规则赋予属性中的规则style优先于同等重要性且来自同一源的所有其他规则的优先级。

您引用的文档说选择器:root比选择器具有更高的特异性html。它们都没有比style属性更高的特异性。