我正在尝试让我的Ionic Angular应用程序的配色方案根据使用应用程序时发生的事件进行更改。该应用程序相当大,有许多组件,它们都需要在颜色更改发生时意识到颜色更改。理想情况下,我希望知道一种方法来让元素引用颜色(s)(比如说--原色)并且能够在一个地方改变颜色,让所有的元素都对这个变化做出React。
我没有在Ionic文档中找到任何可以在运行时更改CSS变量定义的内容,所以我转而考虑交换我在运行时使用的变量。
我考虑过在变量.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,但据我所知,它只会在特定上下文中更改样式,而不是整个应用程序。
任何解决方案/想法都将受到欢迎。
2条答案
按热度按时间8wigbo561#
我认为你想要的是修改Ionic的全局CSS变量。它们是一堆运行时可修改的变量。你很幸运,因为在过去,你只能在编译时修改这些变量。现在,有了运行时可修改的方法。
本指南介绍如何:https://ionicframework.com/docs/theming/css-variables
8gsdolmq2#
这对我很有效:
感谢@XML的提示。