Building an Ionic Theme Switcher & Dynamic CSS Variables [v4]

ionic-4-theme-switcher

Since Ionic 4 makes use of CSS variables, it has become incredibly easy to switch the whole style of your application or dynamically style parts of your components.

We don’t need any tricks and can easily apply a completely different styling that we define upfront. Or we could even set the values from code, and that’s what well do in this Quick Win.

ionic-4-theme-switch

There’s also a new functionality to implement a dark mode for your app more genuinely. Check out the official Ionic blog for their take on the dark mode!

Building our Theme Switcher

Let’s get started this time with the tabs template as it contains a few more elements that we can style:

We’ll also use a service to control the classes and styling added to the body. But before we dive into that, we need to define the styling for our dark mode.

Good thing we can easily use the CSS variables that we find on the elements on our page, so here’s some CSS for a simply dark theme that you can add to your app/app.scss:

Now to the service that actually performs the magic. But don’t be sad, there are actually only 2 interesting lines in there.

We can inject a reference to our Document and use the Angular Renderer to dynamically add or remove a class to our DOM. That means, we can add or remove the previously defined dark-mode class!

If you want to switch between even more themes you, of course, have to remove all of the classes when you switch so you only have one active class on the body at a time, or none for the default/light theme.

So go ahead and change your services/theme.service.ts to:

Now with our mighty theme switcher in place we can easily change the whole appearance of our app by calling the appropriate functions.

To do so, simply add the functions to the first page of the current tabs layout inside the app/tab1/tab1.page.ts:

And finally connect it to our view inside the app/tab1/tab1.page.html:

Now you can switch between the dark and light mode with a simple click! You can also inspect the elements of your page and see that the dark mode class is added to the body of your app whenever you click the button (and removed when you enable the light mode).

Dynamic CSS Variables

To take this one step further, let’s imagine you want to set the background color of a list item based on some API data or calculated color.

The problem is, that you can’t simply set the background because this is defined by a CSS variable of the ion-item which. So we have to find a way to set that CSS value, dynamically!

So now add a little array to your page with some dummy items, and the interesting part follows:

First, we create a new class in which we define the background variable like usually, but this time we also use another variable as value and not just a fixed value, so add a new class to your app/tab1/tab1.page.scss

Now we add a simple list based on our items with the new class, but also another style attribute that will call a function in our class. Go ahead and add the snippet somewhere to your app/tab1/tab1.page.html

The last missing part now is to set our own CSS variable with the name –myvar in the function that we called from the view with the color string.

Also, we need to use the DomSanitizer in order to trust the CSS we create in that string, so go ahead and apply the changes to the app/tab1/tab1.page.ts:

This process is a bit tricky, but the result should look like this:

ionic-4-dynamic-css

If you had problems following the approach, make sure to also check out the video version of this Quick Win below!

Leave a Reply

Your email address will not be published. Required fields are marked *