Layouts

The Layouts section of the Themes allows you to establish suitable colors for all layout components, offering a variety of color combination options to customize your application layout. This section consists of three segments, and the layout configuration in themes is captured and presented using the Preview option.

Figure: Layouts

The Layout section comprises three segments:

• Layout Mode
• Layout Style
• + Custom Flat Layouts

Layout Mode

In this section, you have the option to choose the types of layout modes you wish to configure for your application. 

There are two types of modes:

• Light 
• Dark 

Light

Light mode themes feature bright colors, usually with a white or lighter background. Those who prefer a vibrant and lively interface often favor light mode themes for their clean and minimalist aesthetic. 

Figure: Light Mode

Dark

Dark mode themes displays the user interface with dark and black background. It provides users a distinct visual experience that is frequently more comfortable to watch in dim or dark settings. Light mode themes showcase bright colors, typically accompanied by a white or lighter background. Individuals who appreciate a more vivid and lively interface often lean towards light mode themes due to their clean and minimalist aesthetic. 

Figure: Dark Mode

Layout Style

In this section, you can select the type of layout style that you want to set for your application. It's style enables you to structure of the themes in the application based on the requirement. It comprises Top Panel, Secondary Navigation, and Primary Vertical Navigation. 

There are two types of modes:

• Flat
• Special

Flat

Flat layout enables you to configure colors for the Top Panel, Menu Text, Side Bar Background, and Side Bar Text Color. You can select different colors from the Default Layouts to set the color for the panels of a Flat layout. 

Figure: Default Layouts

By default, white color is selected. You can select a color from the Default Layout and set the color of a Flat Layout based on your requirement. In the following example, user has selected Green color from Default Layout and the panel colors changed accordingly.

Figure: Flat Layout

Special

Special Layout Style enables you to select predefined picture background for your Flat Layout panel. Based on the selected theme with a special layout, the layout panels are changed accordingly as displayed in the following screenshot.

Figure: Special Layouts

+ Custom Flat Layouts

+ Custom Flat Layouts enables you to apply a particular color of your preference as the background for a design or interface. You can customize the color combination by selecting color from the Color Palette and select a spectrum of color shades to your liking. The color combination is configured to the Top Panel background, Menu text, Sidebar Background, and Sidebar Text.

To add the Custom Flat Layout, perform the following steps:

1. Click + Custom Flat Layouts from the Layouts section.
   The list of color option are displayed:
   Figure: Custom Flat Layouts
2. Enter the required details as described in the following table and click Add.

On adding the color combination the configured color is displayed in the Custom Layouts section.

Figure: Custom Layouts