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
- Creating Themes using Mixins
Canvas Themes for Web and Mobile Applications
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.