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>
...