如何以编程方式更改 Ionic 5 中的原色？答案

【问题标题】：How to change primary color in Ionic 5 programmatically?如何以编程方式更改 Ionic 5 中的原色？
【发布时间】：2021-10-05 19:46:12
【问题描述】：

目前我的应用程序组件路由到一个拆分布局，该布局路由到其他页面。在设置页面中，我的解决方法是像这样更改强调色：

changeAccentColor() {
    console.log('Accent-color changed to: ', this.selectedAccentColor);
    document.body.style.setProperty('--accentColor', this.selectedAccentColor);
    document.body.style.setProperty('--toggleHead', '#ffffff');
  }

颜色是这样分配的：

<ion-toggle style='--handle-background-checked:var(--toggleHead); --background-checked:var(--accentColor)'>Umschalten</ion-toggle>

还有这样的地方：

.active-link {
    --ion-text-color: var(--accentColor);
    font-weight: bold;
}

虽然这种方法有些奏效，但对我来说似乎真的很老套，因为我不能再使用 Ionic 的正常方式来处理颜色了。

有没有办法在运行时直接改变原色？如果没有，最好的选择是什么？

【问题讨论】：

你想做什么？更改开关的颜色？
你可以在css中定义颜色，就像：ion-toggle { --background: #000; --background-checked: #7a49a5; --handle-background: #7a49a5; --handle-background-checked: #000; }

标签： css angular ionic-framework ionic3 ionic4

【解决方案1】：

在 Angular 中动态更改样式的最常用方法是使用 ngStyle

但由于在您的情况下它不适用于 ion-toggle，您可以直接绑定 颜色变量到样式和改变它就像你想在你的代码中的任何地方这样：

在您的 .ts 文件中：

ngOnInit() {
   this.selectedAccentColor = 'blue';
   this.toggleHeadColor = 'red';
}

changeAccentColor() {
    this.selectedAccentColor = 'green';
    this.toggleHeadColor = 'yellow';
}

在您的 .html 文件中：

<ion-toggle style='--handle-background-checked:{{toggleHeadColor}}; --background-checked:{{selectedAccentColor}}'>Umschalten</ion-toggle>

【讨论】：