1 Introduction
The Theme Customizer is a tool that helps you customize your app in Mendix Studio. For example, you can adjust colors, upload a logo, change a text style, thus making your app look consistent and unique.
To open the Theme Customizer, click the paintbrush icon in the left menu bar.
On the left, the Theme Customizer contains settings that you can change to customize different elements of your app. The changes you make are previewed on the right side. There are two preview modes:
Widget View – previews the style on individual widgets
Page View – previews the style on a page
The Page View feature is in Beta. This means there might be changes to this feature. For more information on Beta features, see Mendix Beta Features.
You can switch between the modes by clicking the corresponding button in the top-bar:
2 Settings
You can change the way your app looks using different settings on the left side of the Theme Customizer, that are divided in the following sections:
2.1 Upload Logo
In the Upload Logo section, you can upload a picture that will be used as a logo in your app. You can upload images with extensions png, jpg, jpeg, gif, svg. For more information on how to upload the logo, see the Uploading a Logo section.
Once the logo is uploaded, a color palette is generated based on the logo colors. You can then select Logo Colors in color-pickers of different settings and align your app style with the style of your logo:
For more information on how to select a new color in a setting, see Adjusting Colors.
2.2 Brand Colors
In the Brand Colors section, you can define colors of different styles: Default, Primary, Inverse, Info, etc. These styles are applied for widgets that have the Style property, for example, buttons. That means, if you selected a green color for the Success style, buttons that have Success selected in the Style property will be green:
2.3 UI Customization
In the UI Customization section, you can adjust the style and color of the main UI elements: topbar, sidebar, and backgrounds.
2.4 Typography
In the Typography section, you can override the text styles and text colors for your app, such as colors and size of headings and hyperlinks in your app:
3 Widget View
The Widget View previews the style on an individual widget or UI elements as an example. For instance, when you change Typography, the changes will be previewed on individual headings and paragraphs.
4 Page View
The Page View feature is in Beta. This means there might be changes to this feature. For more information on Beta features, see Mendix Beta Features.
In the Page View, you can select any page from your app to preview changes on it. You can select a page from a drop-down menu in the top bar. You can also switch the Device modes to see how your style looks on the Phone, Tablet, or Responsive view.
5 Performing Basic Actions
5.1 Uploading a Logo
To upload a logo, do the following:
Open the Theme Customizer.
In the Upload Logo section, click Select File.
In the dialog box, select the picture you want to use as the logo.
The selected picture is uploaded and shown in the preview.
Click Save to save changes.
The logo of your app has changed.
5.2 Adjusting Colors
You can override the default colors of different elements in your app. You can change the colors of the elements that have a color picker in the drop-down window.
To change the color, do the following:
In Brand Colors, UI Customization or Typography sections, select a setting you would like to change.
Click this setting and pick a color by doing one of the following:
- Select a color in the palette.
- Filling in the code of the color.
- Selecting the color from Brand Colors and Logo Colors (Logo Colors are only available when you upload a logo).
See the result in the preview.
Click Save to save your changes.
The color has been applied to your app.