Configuring UI Themes

The Theme Designer has its own set of unique qualities, as the users can easily apply the themes of their choices for different items and fields. By using Theme Designer in Canvas Studio, themes can be created and modified in a simple way. Even customized themes can be created easily, but it requires a good deal of knowledge on CSS and SASS. Structure and Primary are the default set of themes in Theme Designer. The key features of Theme Designer are as follows:

Theme Designer facilitates the purpose of designing themes in a well-constructed manner.
With a diverse set of color shades, Theme Designer offers a viable platform for the users.
Given the ample scope of themes in Theme Designer, there is a wide range of options for the users to explore and try out the best combination of themes to figure out their desirable color choices.
Ranging from headers to positive buttons, and even including the likes of page title, workspace menus, icons, form layouts, message headers, app background, table borders etc., Theme Designer paves the way for you to modify the themes of various fields.

To make use of Theme Designer in Canvas Studio, perform the following steps.

On the home page of Canvas Studio, click Create > Theme.

The Theme Designer page appears.

Basic, Layout, App, Forms, Grids, Modal, Variables, Mixins and Custom SASS are the nine different tabs available in Theme Designer.

For the full set of information on Theme Designer, refer the following pages:

Designing Themes for Basic
Designing Themes for Layouts
Designing Themes for Apps (Widgets)
Designing Themes for Forms
Designing Themes for Grids
Designing Themes for Modal
Creating Themes using Variables
Creating Themes using Mixins
Creating Themes using Custom SASS
Editing Themes
Canvas Themes for Web and Mobile Applications

Designing Themes for Apps (Widgets)

The App tab paves the way for you to design the themes for widget (app), its header and footer. To modify the themes of Apps, perform the following steps:

Click App tab. Click icon of the respective fields, for which you wish to modify the themes. You can modify the background colors of App, Filter, Header and Footer. You can adjust both the App Header Height and Filter Bar Height, based on your preference.

Designing Themes for Forms

The Forms tab allows you to modify the themes of form items and even for the miscellaneous fields like Upload Component, Slider Pointer and Slider, the background colors can be modified. To modify the themes of Forms, perform the following steps:

Click Forms tab. Click icon of the respective fields, for which you wish to modify the themes. You can choose the colors of your choice for the different fields in Pagination, Accordion, Button and Miscellaneous. You can even choose different sets of colors for check boxes, radio buttons and form items.

Designing Themes for Grids

The Grids tab allows you to modify the themes of rows and table headers in grids. Table Type, Table Border and Table Spacing can be chosen from the available set of options. To modify the themes of Grids, perform the following steps:

Click Grids tab. Click icon of the respective fields, for which you wish to modify the themes. You can modify the background colors of Table Header, Odd Row, Even Row and Row Hover.

Designing Themes for Modal

The Modal tab allows you to modify the themes of modals. To modify the themes of Modals, perform the following steps:

Click Modal tab. Click icon of the respective fields, for which you wish to modify the themes. You can modify the background colors of Message Modal, Modal, Modal Header and Modal Overlay.

Note

To design themes for customized layouts, type the essential coding requirements in the field of Custom css/scss. For variables and mixins, the essential coding requirements can be entered in the respective fields of Variables and Mixins.

Creating Themes using Variables

For creating customized themes, users must have a great deal of knowledge on CSS and SASS. Variables serve as an integral part of SASS. To create themes using Variables, perform the following steps.

Click Variables tab and click the text field to enter the coding requirements of Variables. The following code snippet and screen shot serve as good references.

$btnGradColor1: #5316b1;
$btnGradColor2: #951313;
$btnFontSize: 1.5rem;

Creating Themes using Mixins

Mixins serve the purpose of component reusability in SASS. Mixins can be effectively used to create customized themes in Theme Designer. To create themes using Mixins, perform the following steps:

Click Mixins tab and click the text field to enter the coding requirements of Mixins. The following code snippet and screen shot serve as good references.

@mixin btnGradientTwo($btnGradColor1, $btnGradColor2) {
  background: $btnGradColor1;
  background: -webkit-linear-gradient(left top, $btnGradColor1, $btnGradColor2);
  background: linear-gradient(to bottom right, $btnGradColor1, $btnGradColor2);
}

Creating Themes using Custom SASS

Customized themes can be created by developers, with an acute set of SASS programming codes. To create themes using Custom SASS, perform the following steps:

Click Custom SASS tab and proceed to type the essential coding requirements in Custom css/scss field. The following code snippet and screen shot serve as good references.
```
.PAY_SUBMIT.ct_btn{
  @include btnGradientTwo($btnGradColor1 0%, $btnGradColor2 100%);
  font-size: 1.5rem;
  border: 0;
}
```
Click Submit to save the changes. A successful save message appears.

The following screen shot serves as a good illustration of the output in the functional application, Modelhouse.

Editing Themes

To edit an existing theme in Theme Designer, perform the following steps in Canvas Studio.

On the home page of Canvas Studio, click Theme Designer on the left pane.
The existing themes appear. Right-click the theme which you want to edit and click the Edit option.
The Theme Designer page appears. You can edit the themes of the fields, for which you wish to apply changes. Click icon of the respective fields, for which you wish to modify the themes.
If you wish to create a clone for the theme, click Clone option.
A new Theme Designer page appears and you have to type the relevant values in the relevant fields.
After you have completed the proceedings, click Submit to save the changes.

The following screen shot serves as a good illustration of the output in the functional application, Modelhouse, showcasing the applied theme on the menu layout.

The following screen shot from the functional application, Modelhouse, showcases the modified background color of the app.

Canvas Themes for Web and Mobile Applications

Theme Designer paves the way for the users to design themes for each and every field, with a varied set of options. The illustrations of Canvas themes in web and mobile applications are provided as follows:

In the web version, when the changes are applied to Primary, which is categorized under the segment of Colors in Basic, the scroll indicator's color gets changed, whereas in mobile version, the colors involving Active Charts, Spinner Icon and the text of the Tool Item header are displayed.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.

Logo appears on the header in both web and mobile versions. In the web version, the logo remains intact for all layouts, but whereas, it differs in the mobile version.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.

In the Layout section, you can select the color of your choice in Body BG.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.
You can choose the color of your choice for Header BG.

In the web version, the changes get reflected in the background of the header, whereas, in the mobile version, the changes even get applied to the headers of components like tab panel, field set, filter component and sort component.

The following screen shots serve as good references for web and mobile versions in the functional application, Modelhouse.
You can choose the colors of your preferred choice for Icon BG, Icon Color and Icon Active Color, involving any of the layouts from Card, App, Menu, Ex Card, Tab and Table Top.

The following screen shots serve as good illustrations of the Card layout for web and mobile versions in the functional application, Modelhouse.

The following screen shots serve as good illustrations of the Table Top layout for web and mobile versions in the functional application, Modelhouse.

The following screen shots serve as good illustrations of the Menu layout for web and mobile versions in the functional application, Modelhouse.

The following screen shots serve as good illustrations of the Tab layout for web and mobile versions in the functional application, Modelhouse.
In the App section, you can choose the colors of your preferred choice for App BG, App Header BG and App Footer BG.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.
In the Forms section, you can choose the colors of your choice for check boxes, radio buttons and form items.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.