I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company?
Note: My specific requirement is to update the primary variable globally without having to consider individual HTML elements. This way, any changes made to primary will be reflected throughout the design.
.html
<ion-button color="primary" (click)="reservation()">Book Now</ion-button>
variables.scss
:root {
/** primary **/
--ion-color-primary: rgb(180, 151, 90);
}
For another company's theme, I need to customize this dynamically.
:root {
/** primary **/
--ion-color-primary: rgb(129 147 171);
}
Would implementing a service help in achieving this goal?
export class ThemeSwitcherService {
constructor() { }
setTheme(data: string): void {
switch (data) {
case "com1":
primary:com1 color//how to do it here
break;
case "com2":
primary:com2 color
break;
default:
}
}
}