Ionic 5 動態改變原色

Question

我正在嘗試根據使用該應用程序時發生的事件使我的 Ionic Angular 應用程序的配色方案發生變化。 該應用程序非常大，有許多組件都需要在發生顏色變化時注意顏色變化。 理想情況下，我想知道一種讓我的元素引用顏色（比如說 --primary）並能夠在一個地方更改該顏色並使所有元素響應更改的方法。

我在 Ionic 文檔中沒有找到任何引用能夠在運行時更改 CSS 變量定義的內容，因此我查看了在運行時交換我使用的變量。

我考慮在 variables.scss 中列出許多不同的 colors ，然后使用 ngClass 應用可以響應更改的全局定義的 class 名稱。 這樣做的缺點是我必須預測並單獨聲明需要顏色的每個可能的屬性。 例如，我可以使用 [ngClass]="primary-1" 來應用定義如下的 class：

.primary-1 {
background: var(--ion-color-primary-1);
}

但如果我想使用需要 background-color 屬性的元素，我還需要為該屬性使用不同的 class ：

.primary-1-other {
background-color: var(--ion-color-primary-1) 
}

我的問題是我不希望全局 class 定義知道特定的元素屬性，除非有一種簡潔而全面的方法來做到這一點。

我也研究過使用 setProperty 但據我所知，僅在特定上下文中更改 styles 而不是整個應用程序。

任何解決方案/想法表示贊賞。

Answer 1

我想你想要的是修改 Ionic 的全局 CSS 變量。 它們是一堆運行時可修改的變量。 你很幸運，因為在過去，你只能在編譯時修改這些變量。 現在，有一些方法可以在運行時進行修改。

本指南解釋了如何： https://ionicframework.com/docs/theming/css-variables