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