Using the theme builder

Customize your application’s look by using the theme builder.

Updated over a week ago

After reading this article you’ll know how to:

  • Personalize the theme of your application

  • Work with color styles and typography

The theme builder enables you to apply styling for your application. You can accommodate brand requirements, for example, by applying specific color codes used when building your application. This article is a brief guide showing how to customize your application using theme builder tools.

Check out this video for more information about navigation and the theme builder:

Colors

Go to the tools section in the bottom left corner of the screen. Click on it and find the theme builder.

Here you can pick up the most suitable color scheme for your application. These changes will be applied to all the pages changing these kinds of components:

  • Primary

  • Secondary

  • Success

  • Info

  • Warning

  • Danger

Besides kinds of components, there are also editable shades (dark, medium, light, white) and accents.

Let’s try and change the primary color and see how it will align with the rest of the elements on the page. Click on ‘Primary’ (1) and pick up the needed color in a drop-down menu. You can see it changed on the preview on the right (2). When you’ve finished, click on the ‘Save and apply’ button to apply changes.

This is what the home page looked like with the default colors:

Now it looks like this. You can see the color of the navigation bar and buttons has changed:

Typography

In the next step, we are going to customize the typography in our application. See different kinds of options for changing the look of titles:

  • Size (displayed on various kinds of devices: monitor, tablet (vertical and horizontal positions), and phone)

  • Transform (enables capitalization, uppercase and lowercase options for the text)

  • Font family

  • Font weight (thin, light, regular, etc.)

  • Letter spacing

  • Color

Let’s apply some changes to ‘Title 3’ which was used on a homepage to welcome guests:

  1. Font family: Roboto -> Sans Serif

  2. Font weight: Light -> Medium

  3. Color: Black -> Warning (orange)

Body text customization settings are similar to the title settings. Some changes we are making:

  1. Transform: None -> Capitalize

  2. Font family: Roboto -> Sans Serif

  3. Font weight: Light -> Semi-Bold

  4. Color: Black -> Secondary (grey)

Don’t forget to click the ‘Save and apply’ button once you’ve finished.

Return to the page builder and see the result of our typography editing:

Customizing your application could be really fun, whether you already have some references or want to do everything from scratch. Play around with styles and find the one you enjoy. More information about the theme builder and its settings is available here.

Did this answer your question?