Ionic 3/4 How to Change CSS Custom Properties of UI Components

The ionic framework provides very beautiful UI Components like custom buttons, select boxes, loaders, alerts, toasts, checkboxes & radio etc.

These are fully customizable with many options like for example if we take a button, we can easily change its color, shape, fill style with various available options given on respective UI component docs like for button it here

But for custom branding and modification of application to a specific style may need deep style management of each and every UI component. The ionic framework is really a great platform which makes customizations and styling of Ionic web components very easy.

Here we will discuss many easy methods by using which we can customize the Ionic App in a few steps.

The latest stable version of the Ionic framework is Ionic 4 so we will continue our discussion in same. But the same method will also apply of previous Ionic 3 version with minor UI styles

  1. How to Add Custom Font in Ionic 3/4 Application?

  2. How to Customize Ionic 4 UI Component using CSS Custom Properties given at the end of every Ionic UI Components.

  3. How to Add Background Image on Ion-content element of Ionic Pages in latest Ionic 4 Application?

Add Custom Fonts in Ionic 3/4 Application

Adding custom fonts is Ionic application is very easy, we only need to override the default font family currently added in Ionic theme.

Step 1) Choose a Font(TTF), you can download it from Google Fonts. Then download the TTF font file. After downloading place them in application root folder under “~assets/fonts

Step 2) Now open file “~src/theme/variables.scss” then add @font-face and add in :root as shown below

That’s it for changing fonts.

 

CSS Custom Properties: Styling UI Components

You can very easily customize a UI Components. Just visit Ionic UI Components then check CSS Custom Properties which is usually the last section. Let’s take an example of Buttons here. Now if you look closely you will find that background all other properties are preceding with a “–“. These are actually the SCSS variables using which we can customize these.

To change button styling, add a custom class to the button element

Let’s add a Gradient color to the button, add the following style in Component SCSS file or global.scss file

 

Another example of Custom Header color

Scss code

 

Image Background Image on Page Ion Content

Sometimes we may need to change background color or add a background image to make the application more attractive and customized. Adding background image is also related to the above tutorials but a bit tricky.

We usually try to add a background-image property to add image background, but if look as CSS Custom Properties here for Ion-content you will notice there is no background-image property available so it will not work. So a workaround we can only use the background as shown below

Note: Add above Scss code in global.scss file, otherwise it will not work.

So these were some theming tweaks and hacks which can be used easily to customize your app very easily 🙂

 

 

Leave a Reply

avatar
  Subscribe  
Notify of