Being able to easily customize the theme of a component library is one of the important factors when it comes to the adoption of a component library. Ionic not only makes it easy to customize—it also provides tools to make the process much simpler.

Ionic uses CSS variables to theme the application. It also provides a Color Generator tool (https://ionicframework.com/docs/theming/color-generator), which can be used to customize the application.

Let's change the Primary color to #002544 in the Color Generator tool, as shown in the following screenshot:

Now, scroll down and copy the CSS variables that were produced by this application and paste them into the src/theme/variables.scss file.

Let's go ahead and use the primary color for the toolbar on our home page, in the home.component.html file:

<ion-header>
    <ion-toolbar color="primary">
        ...
    </ion-toolbar>
</ion-header>

The toolbar will be updated with the color we selected in the Color Generator tool:

Using simple CSS variables, the Ionic theme can be customized, with or without the Color Generator tool that's provided by Ionic. Now that we have set up our theme, let's set up Firebase. We will use this as part of the Realtime Database for our Ionic application.