Ionic 4: The Ultimate theme switcher
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.