Theme Generator
This document describes using Appery.io Theme Generator
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.
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 Button Color property (accessed from the Styles tab) 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 the Page component component, for example, Screen1 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.
Updated 12 months ago