Guidance on dynamically changing the primary color in Ionic 5

Question

Guidance on dynamically changing the primary color in Ionic 5

Currently, my app-component routes to a split-layout which then navigates to other pages. When I want to change the accent color in the settings page, I use the following workaround:

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

The accent color is applied like this:

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

and in other places like this:

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

While this method somewhat works, it feels like a hack to me because I am unable to utilize Ionic's standard color handling methods. Is there a way to directly change the primary color during runtime, and if not, what would be the best alternative?

css angular ionic-framework ionic3 ionic4

Answer 1

Answer №1

To dynamically change styles in Angular, the most common method is to utilize ngStyle

If ngStyle doesn't work with ion-toggle in your situation, you can directly bind the color variables to the style and modify them as needed throughout your code like so:

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}}'>Toggle</ion-toggle>

Answer 2

To dynamically change styles in Angular, the most common method is to utilize ngStyle

If ngStyle doesn't work with ion-toggle in your situation, you can directly bind the color variables to the style and modify them as needed throughout your code like so:

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}}'>Toggle</ion-toggle>

Guidance on dynamically changing the primary color in Ionic 5

Answer №1

Similar questions

Tips for obtaining results from a File Reader

Exploring the Benefits of Incorporating Multiple Navigations into a JQuery Slider

The dynamic tabs in Angular Material only appear to have a functioning Sidenav on the initial tab

Display the div element only if the router is active and the navbar is visible

What steps can I take to ensure that Bootstrap components are compatible with my mobile device?

Checkboxes display on a separate line when rendered inlines

Creating a dynamic background image with automatic cropping techniques: How to do it?

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Angular code for opening a PDF from an API response in a new tab

Is the 3D cube spinning with a slight perspective glitch?

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

What is the best way to customize the interval time for my specific situation?

Exploring the SetCustomValidity Function in Angular

Adding or changing class in Angular 2 based on specific conditions

How to align a list item to the right using CSS

using jquery to trap anchor in unordered list items

The issue of binding subjects in an Angular share service

Include an iframe with hidden overflow specifically for Safari browsers

Can you provide me with information on how to indicate the activated menu item by highlighting the triggering button in Angular 14 and Material Design?

Achieving Vertical Tabs on Larger Screens and Horizontal Tabs on Smaller Screens with Css Bootstrap 4