TABLE OF CONTENTS

• Theme Management Interface
  • Examples Section 
  • Visualization Area
  • Customization Tools 
• Customizing a Button's Color and Style
  • Adding Custom Colors
  • Adding a Component Style
    
    

The Theme Management page in the App Studio provides App Builders with a set of options to customize the look and feel of their app. This tab allows you to modify elements such as colors, component styles, and fonts. 

Theme Management Interface

The Theme Management tab is divided into three main sections:

• Examples Section (Left Sidebar)
• Visualization Area (Center Panel)
• Customization Tools (Right Sidebar)

Examples Section 

The left-hand Examples panel offers a set of component examples. These examples give App Builders a quick visual reference of how various components and styling options will look after the customization. The available categories include:

• Example – Generic app: Provides examples of the appearance of a generic app.
• Graphical: Shows how graphical components will be displayed.
• Comms & Media: Showcases the styling of components under the Comms & Media category.
• User Interaction & Data: Demonstrates examples of components under User Interaction & Data category.

Visualization Area

The center panel is the Visualization Area, where you can see the real-time updates to your customization choices. 

Customization Tools 

The right-hand of the interface contains the Customization Tools, which allow you to customize the interface of the app. The customization options are divided into several categories:

• Colors: Choose from preset colors for key elements such as Accent, Contrast, Text, Primary Background, Secondary Background, and Border, or define and save a Custom color by clicking the plus (+) icon. For details on how to add a custom color, check the Adding Custom Colors section. 
• Component styles: Create and manage custom styles for various UI components, such as Button, Text, Asset, and many more. For details on how to create a new Component Style, check the Adding a Component Style section.
• Font:   Select a font for the app from the available dropdown list.

Note: Updating existing colors, component styles, or fonts applies to the corresponding items in the App; however newly created styles need to be applied manually to the components that are already on the canvas.

Customizing a Button's Color and Style

This section walks you through an example of how to customize the color and style of a button within the Theme Management tab.

Adding Custom Colors

First, we’ll create custom colors for the button and its border.
 To add a custom color:

1. Navigate to the Theme Management tab and click the plus (+) icon under Colors > Custom to open the color palette.
2. Specify a Name for the color.
   
3. Drag the cursor across the palette to select your desired shade. You can also adjust the visibility by modifying the transparency slider. 
4. Alternatively, if you need more precision, you can manually input color values in HEX, RGBA, or HSLA formats. Click the spinner button (an up and down arrow) to the right of the field to switch between the formats.
    

The newly added color appears in the Custom list. Repeat the same steps to create a color for the button border. .

Adding a Component Style

Now, let’s create a custom style for the button. 

To add a component style:

1. Navigate to the Component styles section in the Customization Tools and click the plus (+) icon.
2. In the pop-up window, select the Component type for which the style is being created. In this case, it’s Button.
3. Specify a Name for the style and configure the remaining settings based on your design preferences.
   
4. If you have multiple styles for the same component type, toggle Set as default style for the style to be applied automatically across your app. If you have only one style for the component, the toggle will be active by default.

Now, when you add a new Button component to the canvas, the style will automatically be applied.