In my Ionic Angular app, I am exploring ways to dynamically change the color scheme based on user interactions. With a large number of components needing to be responsive to these color changes, I am seeking a method where elements can reference a color variable (such as --primary) and update globally when that color is changed in one place.
While I have not come across any documentation in Ionic discussing runtime CSS variable modifications, I have considered switching between variables at runtime as an alternative solution.
One approach I've pondered involves defining multiple color options in variables.scss and utilizing ngClass to apply a universal class that can adapt to color changes. However, this method would require individually declaring attributes for each potential color variation needed. For instance, using [ngClass]="primary-1" may entail creating a specific class like:
.primary-1 {
background: var(--ion-color-primary-1);
}
If an element requires a different attribute like background-color, a distinct class must also be defined:
.primary-1-other {
background-color: var(--ion-color-primary-1)
}
The challenge lies in avoiding dependency of global class definitions on specific element attributes, unless there exists a streamlined and inclusive solution.
I have also explored the use of setProperty, although it appears to solely impact styles within a designated context rather than throughout the entire app.
Any insights or suggestions are welcomed!