Styling Ionic 4/5 Apps

Adding customized tabs, a custom color theme, and custom fonts to an Ionic 4/5 application.

This guide demonstrates how you can customize an Ionic 4/5 mobile app with a custom color theme, custom fonts, and how to design the app tabs according to your preferences.

First of all, you need to create a new app. We will use the Appery.io Ionic 4 Tabs template with several predefined pages to create an app from scratch.

📘

Note!

You might like to add our Tabs Plug-in to create the out-of-the-box Ionic 4 example app with tabbing functionality: in the Project view, click CREATE NEW > From Plugin, then select Tabs Plugin and confirm by clicking the Import selected plugins button.

Creating New Tabbed App

  1. From the Apps tab, click Create new app.
  2. Click the Ionic 4 tab, select the Ionic 4 Tabs application type, enter the app name, for example, StyledApp, and click Create.
  3. You will see that an app with a default app page, 5 custom pages (Home, Info, NiceTabs, Profile, Tabs), and a default variables theme has been created:

When you click TEST, the Home screen with three default tabs bar will open:

Styling App Tabs Bar

To style the app navigation tabs bar:

  1. Go to Project > Routing and change the default route from Tabs to NiceTabs:
  1. Click TEST again to see how much the tabs bar has changed:

The icons have been modified and a big plus button has been added.

  1. To change the location of the plus button, go to the NiceTabs page, select the Button1 component and cut its Class property text (central-button).
  2. Now, select the Button2 component and paste the text you just copied into its Class property field.
  3. You might also like to play around with the button icon styles: unfold the Icon folder and click the icon for the Style property selecting the needed style to customize the button looks:
  1. If needed, select other tabs and modify their icon styles.
  2. To modify the behavior of the tabs and reassign the tab that will be selected on the app start, select the TabBar component and change its Selected Tab property, for example, from Home to Profile:
  1. If you click the TEST button now, the Profile tab with its modified icon will launch first:

You can also check this Appery.io Community video that shows how to create an Ionic 4 app with customized navigation tabs:

Adding Custom Color Theme

👍

Theme Generator

Appery.io now offers Theme Generator, the extension that allows you to generate custom color themes that can be reused in an app.
With this extension, you can instantly visualize how changes made to the app are reflected on its UI.
Please check out this document to learn more.

Customizing App Screen Color Theme

Now, let's customize the app screen elements by applying the preferred color theme. You re free to use the corporate colors or apply the predefined set of colors available free on the Internet.
To demonstrate how it works, we will use the Info tab of our application as an example.

  1. In the Project view, unfold the Pages folder and click Info.
  2. Go to the DESIGN tab and click Info on the app screen. Change the header color in the Color property to Primary on the right menu. To do it, select Toolbar1 and, on the PROPERTIES tab, select primary for its Color property.

Now, let's add some components to the screen.

  1. From the components PALETTE, drag & drop a List component to the screen and add an Icon to each of both List Items.
  2. You might also want to modify the icons and the Items labels filling some data in to make the page look well-rounded:
  1. Now, you can test the application and see how it looks: save and click TEST
    When the app launches, select the Info tab:
  1. Now, to generate a custom color theme so that your app can look unique, you first need to look for some resources for designers and artists featuring different color palettes. Visit, for example, https://colorhunt.co/ and select the palette set you like most. When hovering over the selected color, its code will be shown:
  1. Now, open the Ionic Color Generator page and copy and paste the color codes into the Primary, Secondary, and Tertiary fields of the generator checking how the theme preview changes
  2. Then, scroll down to the CSS Variables section, click the Copy button to copy the compiled CSS to clipboard:
  1. Go back to the Appery.io Visual editor, unfold the Theme folder and click variables. Replace the default CSS file with the one you copied:
  1. Now, you can test your application with the custom color theme:

Adding Dark Theme

Adding dark mode to your app is made easy by using our Dark Theme plug-in.
To do it:

  1. Click the CREATE NEW drop-down menu and select From Plugin.
  2. In the Themes section, select the Dark Theme checkbox, then click the Import selected plugins button:
  1. Unfold the Theme folder and check that the needed theme was imported:

Supporting Different Color Themes

And what if you need to make an app that supports different color themes?
Let's check how to do it and add the dark mode to your app by using the Appery.io Theme Switcher plug-in.

To add dark mode to your app:

  1. Click the CREATE NEW drop-down menu and select From Plugin.
  2. In the Themes section, select the Theme Switcher checkbox, then click the Import selected plugins button:
  1. Unfold the Services folder and check that the following two services were imported:
  • GetCurrentThemeService – returns the theme name.
  • SetCurrentThemeService – accepts the theme name and sets it as a current theme:
  1. Go to this Ionic resource, scroll down to the section with the CSS and click the Copy button:
  1. Now, go back to the Appery.io Visual editor, unfold the Theme folder, select variables and add the code you just copied below the custom one (pasted before):
  1. If you check the Pages folder now, you will see that one more page, ThemeScreen has been imported by the Theme Switcher plug-in:
  1. Unfold the Project folder, click Routing and select ThemeScreen as the default route.
  2. Test the app:
  1. The theme that is applied now is named as default. To change it to Dark Mode, in the Theme Name field, type in dark and click ACTIVATE THEME.
    Now, you can see how the application looks in Dark Mode:
  1. To change it back to the default one, type in default in the Theme Name field and activate it.

You might also like our Appery.io Community video that shows how to create an Ionic 4 mobile application with customized color themes:

Changing Font to Custom

Using Files Manager

To change the default font to the custom one, you can use the corporate font if needed.
A very easy way to upload the needed font is by using our Files manager:

  1. Open the App settings > General tab and, under Assets, click Change for the Font asset:
  1. In the new window, click Upload file and select the font file you prepared beforehand (there are many resources to download fonts, like https://www.1001freefonts.com/):
  1. Click Back to files list, select the file in the Files Manager, and click Apply:
  1. The font has been added to all project pages and you can test it and see how it looks:

Using CSS

You can also use an alternative variant of uploading the font you found on the Internet (for example, on fontspace.com or the like resources).

To demonstrate how it works, we will use the Profile tab of our application as an example.

  1. In the Project view, unfold the Pages folder and select Profile.
  2. Go to its DESIGN tab and drag & drop some sample components from PALETTE.
    In this example, we have added three Text components and modified their Text and Container properties a bit:
  1. Open Project > Routing and change the default route to NiceTabs.
  2. Now, open the resource that offers downloading custom fonts, for example, https://www.fontspace.com, and select the font you like.
  3. Scroll down and click the FREE DOWNLOAD link to save the file to your drive and unzip it:
  1. Now, go back to the Appery.io Visual editor, switch to the app Source tab, unfold the Ionic > src > assets folder, and click the gear button next to it.
  2. From the drop-down, select Create folder:
  1. Enter the name of the new folder, fonts, and click Create.
  2. To upload the downloaded font to the fonts folder you have just created, click the gear button next to it and, from the drop-down, select Upload to this folder:
  1. In a new window, click Upload files and select the needed font file (it should be unzipped first) from your drive or simply drag & drop the previously downloaded font to the Upload files window and click Close. The font should appear in the fonts folder.
  2. Now, witch back to the Project view, unfold the Theme folder and open the variables folder. Copy & paste the following CSS code into the code editor:
@font-face {
         font-family: 'font';
         src: url('../assets/fonts/KaushanScript-Regular.otf');
         font-weight: normal;
         font-style: normal;
         }
         :root 
         {
         --ion-font-family: 'font';
         }
  1. Then, change the font family name inside the code typing in the name of the uploaded file:
  1. Save your app and test to see how your app looks with a new custom font:

You can also watch this Appery.io Community video that shows how to use custom fonts in an Ionic 4 app: