Problem change the $colors map

Ionic Framework ionic-v3
1

I have a project finished and i have to add a new function to put 1 theme depending the user connected. I have solvented this point added a dynamic class in

inside in app.html, 
<div [ngClass]="appTheme">
scss:
.themeSelected {
    --primaryColor: #6DC0AA;
    --primaryLight:  #94D4C3;
    --primaryDark:   #2BA887; 
}
variable.sccs:
$primaryColor:  var(--primaryColor);
$primaryLight:  var(--primaryLight);
$primaryDark:   var(--primaryDark);

but i have 1 problem with the $colors … I cannot change this value depending of selected class… somebody may be how I can to do this?

thanks

2

I can’t say this is the best way to do this but you could try:

const themeWrapper = document.querySelector('body');
.themeWrapper.style.setProperty('--ion-color-primary', '#6DC0AA');

You could also load the themes in JSON and loop through the options.

for (const col in this.theme.colors) {
            if (col) {
                for (const key in this.theme.colors[col]) {
                    if (key) {
                        this.themeWrapper.style.setProperty(key, this.theme.colors[col][key]);
                    }
                }
            }
        }

Your JSON file could look like:

{"theme":{"colors":[{"--ion-color-primary":"#6DC0AA"}]}}

Again, there could be another and better way to do this but for my purposes, this is working.

3

thanks for your proposal, i think I don’t explain good. My actual treatment works… and change good the big part on design. My treatment is this:

.theme-1 {
    --primaryColor: #6DC0AA;
    --primaryLight:  #94D4C3;
    --primaryDark:   #2BA887; 
}
.theme-2 {
    --primaryColor: red;
    --primaryLight:  orange;
    --primaryDark:   pink; 
}
.theme-3 {...

And I change the “appTheme” to “theme-1” or “theme-2” etc, depending of user… and this works, the big part the design it’s changed, but there is a little part that use this map:

$colors: (
        primary:    #6DC0AA,
        secondary:  #32db64,
    );

And i cannot to change the value of this map! i don’t have way… :frowning: only have problem whit this variables (its a ionic variable in variables.scss)