Theme Builder

We are excited to announce that the Theme Builder for Smart Web Components is available now.
We have built a new web tool that enables you to create or customize existing themes. The Theme builder generates a CSS file, which you can download and apply to your web application. The good news is that the tool is Shadow DOM friendly, because of the CSS variables support deeply integrated into Smart Web Components.

Highlights

• Create or customize a theme.
• Customize basic and advanced web components settings.
• Light and Dark rendering modes.
• Export and Import changed settings.
• Export the Theme as CSS file or copy it directly from a text field.

Using the theme builder

Navigate to the theme builder application at the Theme Builder web page. The theme builder application page is divided into two main sections - theme settings on the left and preview on the right.

• Click the accent color to change the theme and start over.
• Click the Theme chooser to choose 'Light' or 'Dark' theme mode.
  
• Click the color pickers in the theme settings section to select your desired colors. The selected colors are applied automatically in the 'Preview'.
• Click the 'Export' button, when you are ready, to save your theme or theme settings.
  
  
  
  The downloaded theme comes as a smart.custom.css file. "custom" is the theme's name, which you can change from the export window.

Advanced settings

The advanced settings mode adds many more customization options for precise Theme design. From the left section, you can choose which component category to design and select a color for specific settings such as "Row Alternation Text Color".

• More customization settings for each Smart Web Component and each part of the web component. This allows you to customize an existing theme just for some of the web components.
• Import or Export theme settings. Import previously saved Theme settings by clicking the "Import" button: