如何根据用户输入更改离子工具栏的颜色

Question

我有一个Ionic应用程序，我希望用户能够选择主题

如何有效更改应用中的所有工具栏背景？

Answer 1

使用级联样式表的强大功能。在顶层定义一个主题类，如离子中的材料设计顶级md和构建你的主题

.theme1 ion-header toolbar{
  [...]
}

然后使用ngClass

更改User Choice上的这个顶级类

Answer 2

有几种方法：

1. 您可以使用变量并将该变量分配给html文件中的color。
2. 您可以为每个主题创建一个css类，并根据用户选择更改的变量值将该类分配给您的组件。

如果您只需要更改标题的颜色，请使用方法1.动态更改color变量的值：

<ion-header>
   <ion-navbar color={{color}}>
   <ion-title >Home</ion-title>
</ion-navbar>

你可以在这里看到完整的代码和工作示例：

https://stackblitz.com/edit/ionic-6j7dz7