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

Question

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

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 的正常方式来处理颜色了。

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

Answer 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>

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

How to change primary color in Ionic 5 programmatically?

css

ionic-framework

ionic3

angular

ionic4