Dark Theme for Ionic 4

Question

In Ionic 3 I could easily apply a dark theme to my app by adding just one line to my variables.scss:

@import "ionic.theme.dark";

Is that still possible in Ionic 4 as simple as that? And if yes, how?

Answer 1

I think you should declare your theme in variable css

https://beta.ionicframework.com/docs/theming/color-generator

Answer 2

You have to make your own CSS variable. As an example

:root {
  .red-theme {
    // your colors --ion-color-primary etc
  }
}

and use RendererFactory2 for more info you can see on this link

Answer 3

You have to create a rule in variables.scss like this:

:root {
  ...
}

.ion-color-special {
  --ion-color-base: #faa;
  --ion-color-base-rgb: 38, 36, 58;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: #ffffff;
  --ion-color-shade: #100f19;
  --ion-color-tint: #493535;
}

The special part of the class is the name of the theme. Names that are already included in the :root {} rules (e.g. dark) can't be created this way.

You have to pass the name of the theme to the color attribute of each ionic component like this:

<ion-button color="special">Press me</ion-button>

If you want to use the theme in a non-ionic tag like a <p>, you need to specify with css how the theme colors affect your element or elements:

p {
  background: var(--ion-color-base);
  color: var(--ion-color-contrast);
}

And then you just add the class to the element that needs to have the theme:

<p class="ion-color-special">Lorem ipsum</p>