How to change primary color in Ionic 5 programmatically?

Question

Currently my app-component routes to a split-layout which routes to the other pages. In the settings page my workaround is to change the accent color like this:

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

The color is assigned like this:

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

and elsewhere like this:

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

While this approach somewhat works it seems really hacky to me, because I can't use Ionic's normal way to handle colors anymore.

Is there are way to directly change the primary color during runtime and if not what is the best alternative?

Answer 1

The most common way of changing styles dynamically in Angular is using ngStyle

But since it doesn't work on ion-toggle in your case, you can directly bind the color variables to the style and change it like you want anywhere in your code like this:

in your .ts file:

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

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

And in your .html file:

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