3. Creating App UI - Styling Apps

Learn how to design your app UI according to your preferences by using a custom color theme, launch icons and/or launch screens, or adding custom fonts, etc.

Introduction

Ionic provides several global variables that are used throughout components to change the default theme of an entire application: https://ionicframework.com/docs/theming/basics.

In Appery.io, customizing your app UI is easy.

Go to the App settings > General > Assets section to access the UI customizing options like:

1 - Theme Generator
2 - Media Manager
3 - Files Manager1 - Theme Generator
2 - Media Manager
3 - Files Manager

1 - Theme Generator
2 - Media Manager
3 - Files Manager

Also, you can consider using our Dark Theme plug-in.

Using Appery.io Theme Generator

Theme Generator is a tool that allows generating 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.

This extension is available for both Ionic 4 and Ionic 5 frameworks.

Creating Themes

To create a new theme, from the Project view, click CREATE NEW > Theme and give it a name, for example, t1. The theme is created and can be found in the Theme folder of the Project tab:

Using the Theme Generator editor is easy: you just need to select the main colors one by one and configure them using the color picker tool until you get the UI you would like your app to show on the screen:

When ready, you can check how your app UI will look like on both:

  • the Android:
  • and the iOS views:

👍

You can create as many themes as you need:

👍

Exporting Themes as Private Plug-ins

As a bonus, any theme you like can be exported as a private plug-in so that it can be further reused for other project(s) you create with Appery.io. You can read more here.

Adding Custom Colors

You are also free to add custom colors to your app. This can be done under the Custom colors section using the color picker:

Now, when modifying some component's UI, you can select from the predefined value types for the Color property or enter your custom color name (manually) to apply it to the page UI:

Rewriting Colors

In the Rewrite Colors section, you can overwrite any color or add any scss variable.

Extra SCSS

In the Extra SCSS section, you can add any additional scss for your theme. You can use $_THEME_NAME instead of the actual theme name.

If you scroll down, you will also be able to open the theme code preview.

Adding Themes to App

When finished, go to Project > App settings > General and, in the Assets section, select the theme you need:

Previewing Themes

You can use the preview option to see how some particular app page will look like with the selected theme (works in the editor preview only):

Applying Themes

Now, let's see how to apply the needed theme to the particular UI component:
First, you need to select the Run TypeScript action for Page create event of the Page component and then choose the snippet you need:

If you select the second option, you will need to provide the theme name in the code:

Testing

After the needed action(s) have been defined for the page (and its components), its updated UI can be tested in work:

📘

Want to know more?

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

Using Media Manager

Media Manager allows working with custom image files in the App Builder. You can upload, rename, delete images, and/or select them as assets for your app.

To open the Media Manager, click additional menu (the three lines button) in the upper-right corner of the builder and select Media Manager:

Media Manager can also be accessed right from the Assets section. When the Media Manager window opens, you will see all the previously uploaded images:

If you need to upload a new image, just click Upload file and, in the new window click Select files to select the needed one from your drive:

When the upload of the selected images is complete, click Back to images list where you can apply the selected image to your app.

🚧

Only image files can be uploaded with Media Manager. If you select anything but an image file, an error message will be shown. In this case, you will need to use the Files Manager option.

Renaming Images

If you select the image, you will be able to see its name and size in the Image properties block. If needed, you can edit its name:

To save the new image name, click Rename.

Removing Images

To remove an image from the Media Manager click the image on the list, and in the Image properties block, click Delete: the image will be removed:

Selecting Images for Image Component

In the editor, select the Image component and, on the PROPERTIES panel, click Change: the Media Manager opens. Here, you can select the image from the list or upload a new image and select it. To select the image, click it on the list, the image will then appear in the Image properties block. Then click the Select button, (this button appears only when selecting the asset for the Image component).

Using Launch Icons and Screens Generator

Also, you can significantly simplify the process of adding launch icons and screens to your app by using our built-in generator instead of uploading sets of files of needed sizes via the Media Manager.

👍

Important

Note that Appery.io Launch Icons and Screens Generator works for projects with the latest Cordova libraries versions: 2.1 (Ionic4) and 5.2 (JQM).

To do it, follow some simple steps:

  1. Go to the App settings > General tab and, in the Assets section, click Change to upload the image file as a launch icon and/or as a launch screen:

Note that that only the 1024x1024 .PNG files for launch icons and 2732x2732 .PNG for launch screens are accepted.

  1. Switch to the Cordova plugins > Core Cordova plugins tab and make sure that the Appery.io Resource Generator plug-in is enabled (it is enabled for all new Ionic 4/5 projects by default):

Now, you can generate icons and splash screens automatically and this is how it can look like on the device:

Using Files Manager

Using the Appery.io Files Manager is similar to what is described in the Using Media Manager section with the only difference - the type of the managed files are different from the image types ( like .jpg, .png, etc.).
Let's have a look at the example of how it works for adding custom fonts to an Appery.io project.

Changing Font to Custom

To change the default font to any corporate font if needed, you can use our Files manager to upload any the custom font file:

  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 with the uploaded file selected, click Apply:
  1. The font has been added to all project pages and you can test it and see how it looks:

Using Dark Theme plug-in

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:

📘

Want to know more?

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

Application Colors

Application Colors are useful to change the look of most of the Ionic components; Stepped Colors are used as variations in some of the Ionic components.
The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand.

It is important to note that the background and text color variables also require an RGB variable to be set in RGB format.

Name

Description

--ion-background-color

Background color of the entire app

Ionic has a recommended theme for variables to be used in order to get a dark mode based on the device running the app. It can be broken down into the following parts:

  • Changing the default Ionic colors for all modes to complement the dark background in the body.dark selector.
  • Setting variables for the dark theme on iOS devices.
  • Setting variables for the dark theme on MD devices.

The following code can be copied and pasted into an app to get the Ionic's dark theme. We add the dark class to the document body:

/*
 * Dark Colors
 * -------------------------------------------
 */

body.dark {
  --ion-color-primary: #428cff;
  --ion-color-primary-rgb: 66,140,255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #3a7be0;
  --ion-color-primary-tint: #5598ff;

  --ion-color-secondary: #50c8ff;
  --ion-color-secondary-rgb: 80,200,255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade: #46b0e0;
  --ion-color-secondary-tint: #62ceff;

  --ion-color-tertiary: #6a64ff;
  --ion-color-tertiary-rgb: 106,100,255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255,255,255;
  --ion-color-tertiary-shade: #5d58e0;
  --ion-color-tertiary-tint: #7974ff;

  --ion-color-success: #2fdf75;
  --ion-color-success-rgb: 47,223,117;
  --ion-color-success-contrast: #000000;
  --ion-color-success-contrast-rgb: 0,0,0;
  --ion-color-success-shade: #29c467;
  --ion-color-success-tint: #44e283;

  --ion-color-warning: #ffd534;
  --ion-color-warning-rgb: 255,213,52;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0,0,0;
  --ion-color-warning-shade: #e0bb2e;
  --ion-color-warning-tint: #ffd948;

  --ion-color-danger: #ff4961;
  --ion-color-danger-rgb: 255,73,97;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255,255,255;
  --ion-color-danger-shade: #e04055;
  --ion-color-danger-tint: #ff5b71;

  --ion-color-dark: #f4f5f8;
  --ion-color-dark-rgb: 244,245,248;
  --ion-color-dark-contrast: #000000;
  --ion-color-dark-contrast-rgb: 0,0,0;
  --ion-color-dark-shade: #d7d8da;
  --ion-color-dark-tint: #f5f6f9;

  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152,154,162;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0,0,0;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  --ion-color-light: #222428;
  --ion-color-light-rgb: 34,36,40;
  --ion-color-light-contrast: #ffffff;
  --ion-color-light-contrast-rgb: 255,255,255;
  --ion-color-light-shade: #1e2023;
  --ion-color-light-tint: #383a3e;
}

/*
 * iOS Dark Theme
 * -------------------------------------------
 */

.ios body.dark {
  --ion-background-color: #000000;
  --ion-background-color-rgb: 0,0,0;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255,255,255;

  --ion-color-step-50: #0d0d0d;
  --ion-color-step-100: #1a1a1a;
  --ion-color-step-150: #262626;
  --ion-color-step-200: #333333;
  --ion-color-step-250: #404040;
  --ion-color-step-300: #4d4d4d;
  --ion-color-step-350: #595959;
  --ion-color-step-400: #666666;
  --ion-color-step-450: #737373;
  --ion-color-step-500: #808080;
  --ion-color-step-550: #8c8c8c;
  --ion-color-step-600: #999999;
  --ion-color-step-650: #a6a6a6;
  --ion-color-step-700: #b3b3b3;
  --ion-color-step-750: #bfbfbf;
  --ion-color-step-800: #cccccc;
  --ion-color-step-850: #d9d9d9;
  --ion-color-step-900: #e6e6e6;
  --ion-color-step-950: #f2f2f2;

  --ion-toolbar-background: #0d0d0d;

  --ion-item-background: #000000;
}


/*
 * Material Design Dark Theme
 * -------------------------------------------
 */

.md body.dark {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18,18,18;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255,255,255;

  --ion-border-color: #222222;

  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;

  --ion-item-background: #1e1e1e;

  --ion-toolbar-background: #1f1f1f;

  --ion-tab-bar-background: #1f1f1f;
}