Ionic 4: The Ultimate theme switcher

Switch the design of your app with Ionic 4 and CSS variables

Ionic 4 uses CSS variables and we will use this technique to let a user switch the theme of an app. As you can see above, this is working really great. And in this article I will show you how to implement it.

The Basics: CSS variables

CSS variables (also known as CSS custom properties) can be used in plain css. It’s supported by all MODERN browsers (Firefox >31, Chrome >49, Edge >15, Safari). Internet Explorer doesn’t support CSS variables.

Now you can add inside your css styles for example the following:

:root {
  --color: red;
}

A CSS variable always starts with -- and if you put it inside the :root pseudo class, it will be available in your document for all elements. To use this variable, we just use var() in our element, for example

.my-box {
  color: var(--color);
}

All elements with the class my-box gets the color now. A great benefit if you have a primary color and want this color use everywhere in your project. And exactly this is Ionic 4 using!

How to make a theme switcher in Ionic 4

And now I want to show you how a user can switch the theme in Ionic.

Step 1: Add different themes