Ionic 5 动态改变原色

Question

我正在尝试根据使用该应用时发生的事件来更改我的 Ionic Angular 应用的配色方案。该应用程序非常大，有许多组件都需要在发生颜色变化时注意它。理想情况下，我想知道一种方法让我的元素引用一种颜色（比如说 --primary），并能够在一个地方更改该颜色并让所有元素对更改做出响应。

我在 Ionic 文档中没有找到任何关于能够在运行时更改 CSS 变量定义的内容，因此我研究了在运行时交换我使用的变量。

我考虑在 variables.scss 中列出许多不同的颜色，然后使用 ngClass 应用可以响应更改的全局定义的类名。这样做的缺点是我必须预测并单独声明需要颜色的每个可能的属性。例如，我可以使用 [ngClass]="primary-1" 来应用这样定义的类：

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

但如果我想使用需要 background-color 属性的元素，我还需要为该属性使用不同的类：

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

我的问题是我不希望全局类定义知道特定的元素属性，除非有一种简洁而全面的方法来做到这一点。

我也研究过使用 setProperty，但据我所知，它只会更改特定上下文中的样式，而不是整个应用程序。

感谢任何解决方案/想法。

Answer 1

我认为你想要的是修改 Ionic 的全局 CSS 变量。它们是一堆运行时可修改的变量。你很幸运，因为在过去，你只能在编译时修改这些变量。现在，有一些方法可以在运行时进行修改。

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