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

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 Theme Generator 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 the 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

To apply the needed theme to the particular UI component, select the Run TypeScript action for the Page component, for example, Page and then choose the snippet you need:

• Get current theme snippet:

• Set theme snippet:

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: