Adding a Custom Theme

Add a custom theme to apply to your applications.

AppBuilder provides two default themes—MVI and BlueCrystal. These themes cannot be edited, but you can customize your own them and add it to the library of themes. You can then apply the theme to your application as described in Setting the Application Theme. The default location for themes in the AppBuilder directory structure is <AppBuilder-Home>\ares-project\ares\ui5\resources.

  1. Add your theme folder to the default AppBuilder themes directory, or to the file structure for your project. For example, to apply a custom theme to a project named "My Project", add the folder to <AppBuilder-Home>\ares-project\hermes\root\guest\<My_Project>\src\css\.
  2. In the AppBuilder start page, select the application for which to add the theme, and click Settings.
  3. In the Settings dialog, click Themes to display the theme settings.

    appbuilder_new_theme

    The default settings available to the application appear in the theme list.

  4. Click + to add a row for the custom theme settings.
  5. Enter the settings for the new theme:
    • Name - the display name which will be displayed in the application's theme property.
    • Fullname - the internal name which used for the applyTheme API.
    • Root - the location where you placed the theme folder in Step 1. Leave blank if you placed the theme folder in the default AppBuilder themes directory. Default themes are in the ui5\resources directory. For new themes, refer to the theme folder structure in ui5\resources.
  6. Click Confirm to save your settings.
    When you complete the steps in Setting the Application Theme, the new theme that you added is available in the application theme property list.
Parent topic: Themes and Styles
Related tasks
Setting the Application Theme
Creating a New Project
Related reference
Project Management
Saving a Project as a Template