May 26

 Themes

Themes are style elements which work at the widget or UI component level. Themes help you provide a consistent look and feel to your application. Theme mainly contains the following styling for all the elements on the page:

  1. color – background, text color, border color, hover/active/focus colors etc.
  2. properties for text like text-align, text-decoration, font-size, font-weight etc.
  3. layout like margin, padding, border-radius etc.

In this document the following concepts are elaborated upon:

Applying Theme

To change the theme of the page, simply click on the Themes option from the Workspace Toolbar:

This will open a Theme dialog with a list of available themes to choose from.


NOTE: WaveMaker provides a few default themes that can be applied to your apps. From time to time, these Themes might undergo changes and you might be asked to update the theme when you open the project. Remember that the updates will re-write any changes you made directly to the CSS styles of the corresponding theme.

Importing Theme

You can use your own theme by importing it into your app. See below to know how to create Theme.

(NOTE: For Enterprise version, the custom themes will be available once they are published to the EDN and approved by the EDN Admin, WITHOUT any need for Import)

From the above Themes dialog, choose the Import Theme button for a pop-up window which will allow you to select a WaveMaker theme zip file. Once imported, the Theme will appear in the Theme dialog. To apply the theme, select the imported theme and Re-Apply.

Creating Theme for WaveMaker Apps

WaveMaker app (Web & Mobile) theme is based on the BootStrap CSS markup. Creation of a theme requires a working knowledge of HTML, CSS, LESS and Grunt.

Prerequisites: Before creating a Theme, make sure you have the following installed on your system:

Setup:

  1. Open GIT Bash prompt
  2. Install grunt using the following command:

    For more information on grunt click here
  3. Install bower using the following command:

    For more information on bower click here
  4. Setup the WaveMaker Theme repository

    Follow the instructions given at the GIT repository
  5. After setting up the repository, under the src folder you will find the following files that can be modified as per your needs:
    theme-web
    NOTE: Themes for Web and Mobile(Android/iOS) apps are different, use the appropriate theme source file to generate the theme bundle.

Directory Structure

  1. Fonts folder: The web fonts can be copied here and referenced in the theme. There will be references to Roboto regular fonts in the variables.less (src/web), to avail them please download Roboto regular fonts and paste them in fonts directory (src/web/fonts).
  2. .wmprojects.properties: This contains essential properties required to identify the theme
    • name: for the theme,
    • version: of the theme. Updated version will be used to replace the existing theme in the project.
    • description: a short meaningful description of the theme,
    • type: THEME (DO NOT CHANGE THIS), and
    • author: name of the author for the theme.
  3. theme.png: Used to visually identify the Theme in the Theme dialog. The size of the image should be 160 x 120 px.
  4. style.less: This less file includes styles for components like header, footer, leftnav, calendar etc., which are not defined in the bootstrap CSS. These components can be further customized in this file by using the variables defined at the beginning of the file eg header background color can be changed using the @wm-header-bg-color variable.
  5. variables.less: This less file includes the styles defined by bootstrap. The values defined in this file are used by the widgets like buttons, links, textbox etc. Refer Bootstrap documentation on LESS variables for more details.

Creating WaveMaker Theme for Web Apps

Following are steps for creating a theme for a web app:

  1. After setting up theme repository, navigate to the web folder.
  2. Open style.less and variables.less in the editor of your choice.
  3. To use the web fonts in the theme, copy the web fonts (.ttf,.eot,woff) in the font folder and include the font definition in variables.less:
  4. The variables.less contain variables which are used while building the bootstrap CSS.  For example, @brand-primary value change will affect all the styles using this specific property value. More information on variables at the Bootstrap site.

    More on Styling App Components
  5. Replace the theme.png with your image in the web folder
  6. Update the .wm-properties to provide theme information
  7. Build the theme.
  8. The theme will be saved under grunt-wavemaker-theme/dist as web.zip
  9. Import and Apply the Theme to your app.

Creating WaveMaker Theme for Web apps using Bootswatch

Bootswatch provides bootstrap themes that can be integrated into your WaveMaker web apps.
The prerequisites and setup for building WaveMaker theme are the same as mentioned in the previous section.

  1. Select a theme from Bootswatch.
  2. Download the variables.less and bootswatch.less files for the selected theme.
  3. After setting up theme repository, navigate to the bootswatch folder.
  4. Copy bootswatch.less and variables.less files to  grunt-wavemaker-theme/src/bootswatch folder.
    bootswatch_folder
    NOTE: The variable files downloaded from bootswatch will fail if placed in any other theme folders like mobile or web.
  5. You can further customize the theme in style.less specific to the header, footer, leftnav etc. See here for details.
  6. Replace the theme.png with your image in the bootswatch folder
  7. Update the .wm-properties to provide theme information
  8. Build the theme.
  9. The theme will be saved under grunt-wavemaker-theme/dist as bootswatch.zip
  10. Import and Apply the Theme to your app.

Creating WaveMaker Theme for Mobile Apps

Mobile Apps come in two flavors – Android and iOS. The theme renders differently on these platforms and as such the theme needs to be packaged differently.

For example, below is the rendering of a Live Form within List on Android and
theme-diff-android
iOS device:

theme-diff-ios

As mentioned in the previous section, WaveMaker provides two folders for Mobile Themes – Android and iOS. The structure is replica of that for Web with the content tailored for the specific platform. When building theme for Mobile Apps, make sure that you use the appropriate files and make the same changes to both sets. DO NOT replicate the files, make changes where needed.

Building WaveMaker Theme

Once you have incorporated all your changes to the Theme files, you need to build it.

  1. From the command prompt, build the themes using the following commands:
  2. A zip file (web.zip/mobile.zip/bootswatch.zip) for the theme will get generated in the grunt-wavemaker-theme/dist folder.
  3. You can import the theme and apply it to your application.

Testing a Custom Theme

You can test the custom theme, before import, by copying the style.css file directly into your app. From the left Developer Utilities, open File Explorer and you will find the style.css file under webapps -> current theme folder. Save and run the app.
Notes:

  • These changes are temporary, for permanent change you have to import the Theme.
  • If you make changes to the default theme style.css file and do not import it as your custom theme, updating the theme will erase those changes.

Publishing a Custom Theme

Enterprise Version post 10.0 release

In order to make a custom theme available to developers across the enterprise, it needs to be published. Following are the steps to publish a Theme:

  1. Once you have created a custom theme, import and test it in your application.
  2. From the Project Configurations, under Export select the Theme to EDN option.
  3. Theme publishing wizard with three steps will appear:
      1. Information regarding the Category, Version, Description and Change Log.
      2. Configuration allows you to add Tags for search and tracking purposes and also includes the Metadata populated automatically.
      3. Summary for a review before Publishing.

  4. Note that the current Theme applied to the application will be selected for Publishing.
  5. Once the EDN Admin approves the Theme, the same will be available in the Artifacts listing and the Themes dialog for other developers to select and apply.

WaveMaker Theme Package Structure

Web Responsive

For creating a custom theme for WaveMaker application, you need to understand the package structure.
The theme package contains the following files:

Name Description
Fonts Folder containing web-based fonts used in the app. Required
.wmproject.properties Containing essential properties required to identify the theme which includes the name of the theme, version of the theme, a short meaningful description of the theme, the type should be THEME (DO NOT CHANGE THIS), and the name of the author for the theme. Required
style.css Containing styles related to the theme. Required
theme.png Theme icon. Required
variables.less LESS variables to define colors, sizes and more. Required

Hybrid Mobile

In a hybrid app mobile theme, there can be different flavors for android and ios systems. Hence, in a theme bundle, there are different folders for android and ios.

Following is the package structure:

Sub-Folder Name Description
none .wmproject.properties Containing essential properties required to identify the theme which includes the name of the theme, version of the theme, a short meaningful description of the theme, the type should be THEME (DO NOT CHANGE THIS), and the name of the author for the theme. Required
none theme.png Theme icon. Required
Android Fonts Folder containing web-based fonts used in the app. Required
style.css Containing styles related to the theme. Required
variables.less LESS variables to define colors, sizes and more. Required
ios Fonts Folder containing web-based fonts used in the app. Required
style.css Containing styles related to the theme. Required
variables.less Less variables to define colors, sizes and more. Required

We have learned how WaveMaker themes work and how we can build, import and apply custom themes.

 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.