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')