Theme Builder - Documentation | www.HtmlElements.com

Theme Builder

The Smart Web Components Theme Builder tool allows you to create custom themes based on our Material Light and Dark themes.

Theme Builder Basic

Introduction

After you open the ThemeBuilder, a screen with web components and themes selector appears. You can choose a Theme color from the menu on the left and whether the theme is Light or Dark from the Theme selector on top. The Preview with the web components is updated automatically when you change any setting.

Create a Theme

New themes are based on Smart Web Components Material Light and Dark Themes. Follow these steps to create a new theme in the wizard:

  • Select a theme for Light and Dark modes.

    Theme Builder Basic
  • Select a theme color and change basic appearance settings.

  • If the appearance on the preview meets you requirements, click Export to export the theme.

    Theme Builder Basic

    For more precise customization, click Advanced Settings to navigate to the view with additional more advanced configuration with many theme options.

Import an Existing Theme

You can import an existing theme from previously saved Theme metadata. Metadata is saved in JSON format. Follow the steps below to import a theme:

  • Click Import.

  • Paste the Theme's JSON metadata in the text area.

  • Click UPLOAD METADATA.

    Theme Builder Basic

When the metadata is imported, the Theme Builder displays the imported theme in the list.

Theme Builder Basic

Advanced Theme Settings

Theme Builder Advanced

The Advanced view consists of the following elements:


  • Top Area - Toolbar with Theme selector, Import and Export buttons.

  • Left Area - Settings Menu. It contains the following items:
    • Basic Settings - settings used by all web components

      Theme Builder Advanced
    • Typography Settings - settings that configure font family, font size, icons font and icons

      Theme Builder Advanced Typography
    • Web components - settings used by an individual web component or web components group

      Theme Builder Advanced Editors
  • Right Area - Preview with Web components. It it updated automatically when you change any theme setting.


The Advanced view of the Theme Builder enables you to customize many more settings. For example, the Smart.Grid's customization options are more than 50 and you can customize the appearance from the cell horizontal and vertical borders to the column menu with sorting and filtering options.
Theme Builder Advanced Grid
Shapes of the components and inner items can be customized by using settings for border top-left, top-right, bottom-left and border-right radius. For example, in the image below, the Tree items are with custom shapes.

Theme Builder Advanced Shapes
Theme Builder Advanced Shapes 2
Theme Builder Advanced Shapes 3

Export the Theme

Click Export to open the Theme Export popup dialog. In this dialog, enter the theme name.

Click Save to File to save a file named smart.[theme-name].css or copy the generated CSS from the text area at the bottom:


Using the Theme

  • Copy the theme CSS file to '/source/styles/'. Ex: 'smart.custom.css'.
  • Add the theme CSS file to your project.
  • Import the theme CSS file after 'smart.default.css'.
  • Set the 'theme' attribute of your web component to the theme's name. Ex: ''

Example

<!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>Custom Theme</title>  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
      <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />  
      <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.custom.css" />  
      <link rel="stylesheet" type="text/css" href="styles.css" />  
   <!-- scripts -->   
      <script src="../../../scripts/data.js"></script>       
   <script src="../../../source/smart.element.js"></script>   
   <script src="../../../source/smart.data.js"></script>   
   <script src="../../../source/smart.button.js"></script>   
   <script src="../../../source/smart.scrollbar.js"></script>   
   <script src="../../../source/smart.menu.js"></script>   
   <script src="../../../source/smart.listbox.js"></script>   
   <script src="../../../source/smart.dropdownlist.js"></script>   
   <script src="../../../source/smart.pager.js"></script>   
      <script src="../../../source/smart.grid.js"></script>   
      <script src="index.js"></script>                   
 </head>  
 <body>  
   <smart-grid theme="custom" id="grid"></smart-grid>  
 </body>  
</html>  


Theme Builder Advanced Shapes 3