Theming in Ionic 4

In my themes/variables.scss I have two color themes (dark and light):

/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
  primary: #ffffff,
  secondary: #fafafa,
  danger: #f53d3d,
  light: #1b1e28,
  sliderColor: #fff,
  colorIcon: #CCCBDA,
  colorIconText: #7F7E96,
  category: #fff,
  listBackgroundColor: #ffffff,
  backgroundColor: #fafafa,
  toobarBackground: #ffffff,
  toobarButton: #AAB2B7,
  toobarText: #FFFFFF
);*/



/* DARK COLOR THEMES
========================================= */
 $colors: (
   primary: #282C39,
   secondary: #1b1e28,
   danger: #f53d3d,
   sliderColor: #fff,
   light: #fff,
   colorIcon: #7F7E96,
   colorIconText: #7F7E96,
   category: #fff,
   listBackgroundColor: #1B1E28,
   backgroundColor: #282C39,
   toobarBackground: #1B1E28,
   toobarButton: #D8D8D8,
   toobarText: #FFFFFF
 );

Right now I can only put one theme in my app. If I want to change the theme, I have to comment the one variable out and the other I have to remove the comments.

How can I using these two themes, change the theme dynamically in the app in typescript?

In every tutorial I see these --ion-color-primary but I do not have these --ion-color prepending

Hmm, this seems to be v3 related styles…
This is not how v5(v4) handles theming.

Please review the docs

And the default theme file for new apps.

1 Like

I did:

:root {
 --ion-color-primary: #282C39;
 --ion-color-secondary: #1b1e28;
 --ion-color-danger: #f53d3d;
 --ion-color-sliderColor: #fff;
 --ion-color-light: #fff;
 --ion-color-colorIcon: #7F7E96;
 --ion-color-colorIconText: #7F7E96;
 --ion-color-category: #fff;
 --ion-color-listBackgroundColor: #1B1E28;
 --ion-color-backgroundColor: #282C39;
 --ion-color-toobarBackground: #1B1E28;
 --ion-color-toobarButton: #D8D8D8;
 --ion-color-toobarText: #FFFFFF;
}

But I am getting during build:

[10:52:02]  sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35 
            The value `` must be a color. If you are setting the value as a map make sure both the base and contrast are 
            defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64, contrast: #000), ); 

      L35:    @error $error-msg;

OK, I even did:

:root {
 --ion-color-primary: #282C39;
 --ion-color-primary-rgb: 40,44,57;
 --ion-color-primary-contrast: #ffffff;
 --ion-color-primary-contrast-rgb: 255,255,255;
 --ion-color-primary-shade: #232732;
 --ion-color-primary-tint: #3e414d;

 --ion-color-secondary: #1b1e28;
 --ion-color-secondary-rgb: 27,30,40;
 --ion-color-secondary-contrast: #ffffff;
 --ion-color-secondary-contrast-rgb: 255,255,255;
 --ion-color-secondary-shade: #181a23;
 --ion-color-secondary-tint: #32353e;

...
}
.ion-color-secondary {
 --ion-color-base: var(--ion-color-secondary);
 --ion-color-base-rgb: var(--ion-color-secondary-rgb);
 --ion-color-contrast: var(--ion-color-secondary-contrast);
 --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb);
 --ion-color-shade: var(--ion-color-secondary-shade);
 --ion-color-tint: var(--ion-color-secondary-tint);
}

.ion-color-primary {
 --ion-color-base: var(--ion-color-primary);
 --ion-color-base-rgb: var(--ion-color-primary-rgb);
 --ion-color-contrast: var(--ion-color-primary-contrast);
 --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb);
 --ion-color-shade: var(--ion-color-primary-shade);
 --ion-color-tint: var(--ion-color-primary-tint);
}
...

But still, I am getting the error:

[10:52:02]  sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35 
            The value `` must be a color. If you are setting the value as a map make sure both the base and contrast are 
            defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64, contrast: #000), ); 

      L35:    @error $error-msg;