Angular 黑暗主题和根 css 变量

Question

在我的网站上，我添加了在暗模式和亮模式之间切换的可能性。 因此，我有一项服务可以让我在 css 端进行此切换而不会出现太多问题。 基本上，我在：root 级别声明了 css 变量，并在：root.dark-theme 中重新声明了这些相同的变量。

当我单击一个按钮时，我添加或删除了深色主题 class。

if (this.isDark) {
      this.renderer.addClass(this.document.body, 'dark-theme');
    } else {
      this.renderer.removeClass(this.document.body, 'dark-theme');
    }

我的问题是我试图直接在我的组件中检索一些变量的值。

我尝试了这段代码来检索特定变量的值。

getComputedStyle(
        document.documentElement
      ).getPropertyValue('--border-color');

我设法检索了 in:root 中的那个，但是当我切换并添加暗主题时，它总是检索 in:root 而不是 in:root.dark-theme 中的值。

我怎样才能设法检索深色主题中的值？

Answer 1

将getComputedStyle的元素参数改为document.body

getComputedStyle(document.body).getPropertyValue('--border-color')