# Theming in Ionic 4

**URL:** <https://forum.ionicframework.com/t/theming-in-ionic-4/188003>\
**Category:** Ionic Framework\
**Created:** [April 24, 2020, 7:27am UTC](https://forum.ionicframework.com/t/theming-in-ionic-4/188003 "2020-04-24T07:27:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![farazahmed](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@farazahmed](https://forum.ionicframework.com/u/farazahmed)\
**Post date:** [April 24, 2020, 7:27am UTC](https://forum.ionicframework.com/t/theming-in-ionic-4/188003/1 "2020-04-24T07:27:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [April 24, 2020, 2:37pm UTC](https://forum.ionicframework.com/t/theming-in-ionic-4/188003/2 "2020-04-24T14:37:40Z")

</div>

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

Please review the docs

> **[Theming Basics - Ionic Documentation](https://ionicframework.com/docs/theming/basics)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

And the default theme file for new apps.

> <https://github.com/ionic-team/starters/blob/88fa82478752b9b21353930eac413dc58f467700/angular/base/src/theme/variables.scss>

---

<div class="post-metadata">

**Author:** ![farazahmed](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@farazahmed](https://forum.ionicframework.com/u/farazahmed)\
**Post date:** [April 26, 2020, 8:54am UTC](https://forum.ionicframework.com/t/theming-in-ionic-4/188003/3 "2020-04-26T08:54:30Z")

</div>

I did:

```auto
: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:

```auto
[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;

```

---

<div class="post-metadata">

**Author:** ![farazahmed](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@farazahmed](https://forum.ionicframework.com/u/farazahmed)\
**Post date:** [April 27, 2020, 5:00pm UTC](https://forum.ionicframework.com/t/theming-in-ionic-4/188003/4 "2020-04-27T17:00:20Z")

</div>

OK, I even did:

```auto
: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;

...
}

```

```auto
.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:

```auto
[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;

```