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 …

There are a lot of questions related to Ionic 4 and the Lifecycle Hooks. There are new issues at the Ionic Github Repository where people complain that the Lifecycle Hooks are not working. So I will tell you in this article when the Lifecycle Hooks are running in Ionic 4.

Keep in mind: This post covers the package @ionic/angular— and so the combination of Ionic 4 and Angular. Ionic 4 will be available for other frameworks (like Vue), too (or use it standalone without any other framework).

For example:

When I navigate from the home to another route, the lifecycle…

Earlier this year, I created an IQ Test App based on Ionic 3 and Angular 4. Now a half year later I migrated the app from Ionic 3 to Ionic 4 and Angular 6. It’s a small-medium sized app and not a big one, but I needed around five days to migrate it.

What? Five days? If I only had to migrate from Ionic 3 to Ionic 4, it would be ready in one day. …

How can I add more colors in Ionic 4 and use them as color in different components like the Button, Item and so on?

If you work with Ionic 4 the way how you add colors has changed. Ionic 4 uses CSS variables (a nice way if you ask me).

9 default colors in Ionic 4

Ionic has 9 default colors: Primary, secondary, tertiary, success, warning, danger, dark, medium and light. And the best: Ionic brings a Color Generator so you can easily change this default colors: https://beta.ionicframework.com/docs/theming/color-generator. Just edit the colors there and afterward import it into your variables.scssin src/themefolder. …

Ionic 4 will coming soon and I already working with it for months. Today I want to share how to make a header (exactly the toolbar) transparent. In Ionic 3 you only add the transparent tag to <ion-navbar> , but this is not working anymore.

PS: I will show you two concepts here — first making the toolbar transparent and second to fill the toolbar with a background color after the user scrolls down!

Step 1: Add the fullscreen attribute to ion-content

With the fullscreen attribute, the content will now moving under the header. …