Theme Builder

You may sometimes wish to make minor changes to one or more of the DevExtreme Themes shipped, and then use the modified theme(s) in your mobile applications and web sites. For instance, you might require the modification of some predefined color settings, or may need to make changes to the font settings. To simplify the process of theme modification, DevExtreme comes with the Theme Builder tool. With this tool, you can create a custom theme using any shipped theme (such as the Generic light/black, Android light/dark, iOS, etc.) as a base. You can also modify different visual element style settings as required, save the results as a CSS file to any location on your computer, or add a reference to your custom theme file to the application project.

Launch the Theme Builder

The DevExtreme ThemeBuilder can easily be launched in two different ways.

  • Online
    Run the Theme Builder in a browser (online) from the following link: http://js.devexpress.com/ThemeBuilder/.

  • Locally
    Typically, the Theme Builder is located in the following path after installation.

    Run the index.html page in a browser.

  • From a DevExtreme Project
    When developing an application using one of the DevExtreme project templates, you can run the Theme Builder using the application project's context menu.

    Theme Builder from DevExtreme Project

Choose a Theme

Choose a theme using the BASE THEME drop-down menu in the top menu of the site.

Choose a Theme

The styles specified in this theme will be illustrated in the demos displayed for different widgets on the right panel.

You can modify the styles of the selected theme and get a custom theme as a result.

Modify the Theme

Use the following approaches to customize the selected theme.

Modify a Theme

  • Base Theming
    You can set the base color to be used within the current theme. In platform-independent themes, you can also set:

    • a color for highlighting widget elements that are currently selected or hovered over

    • a color for the text displayed on the highlighted elements

    • a background color for your application's pages

    • a color for widget element's border, as well as its radius

    Modify Widget Styles

    The HTML5 Generic Theme is now visually compatible with the Bootstrap framework. The DevExtreme Theme Builder allows you to create a custom DevExtreme theme based on a custom Bootstrap theme. For this purpose, import variables from a .less file to the Theme Builder, and it will analyze these variables in the file and use them for the newly created DevExtreme theme.

    Upload Less Variables

    To get a theme that looks like the old Generic Theme, import the following configuration to the Theme Builder.

    JavaScript
    {
        "version": "16.1.10",
        "themeId": "1",
        "hue": null,
        "items": [
        {"key":"@base-text-color","value":"#232323"},
        {"key":"@base-accent","value":"#606060"},
        {"key":"@base-border-color","value":"#d3d3d3"},
        {"key":"@base-border-radius","value":"0px"},
        {"key":"@badge-bg","value":"#31afe3"},
        {"key":"@texteditor-bg","value":"#fafafa"},
        {"key":"@radiogroup-bg","value":"#fafafa"},
        {"key":"@button-border-radius","value":"3px"},
        {"key":"@button-normal-bg","value":"#f5f5f5"},
        {"key":"@button-default-border-color","value":"#31afe3"},
        {"key":"@button-default-bg","value":"#31afe3"},
        {"key":"@checkbox-bg","value":"#fafafa"},
        {"key":"@list-group-header-bg","value":"rgba(96, 96, 96, 0.05)"},
        {"key":"@overlay-shader-bg","value":"rgba(0, 0, 0, 0.75)"}]
    } 

    For more information about import, see the Save the Changes section of this article.

  • Advanced Theming
    You can observe all styles defined in the current theme for each DevExtreme widget. In the leftmost navigation menu, select a widget. Set the required styles for this widget. Use the demo in the right panel to see the result.

    Modify Widget Styles

You can undo/redo the last change you made to the theme.

Undo and Redo Changes

To undo all changes made during the current session on the site, press the Reset button.

Reset Changes

Save the Changes

You may need to save the changes that you made to receive a custom theme in the following cases.

  • If you have not finished your custom theme but need to close the Theme Builder, you can save the changes you made during the current session.
  • When a new product version is released (a minor or major one), the stylesheets of the predefined themes may be changed. To apply these changes, it is recommended that you save your custom theme in a form of differences from the predefined theme. When you upgrade to the new product version, you should apply your differences to the newly released version of the corresponding theme.

To save the changes (differences), use the Export button on the top menu of the site.

Save Temporary Results

In the invoked window, you will see your changes displayed in the JSON format.

Export Window

Copy these changes to the buffer and then save them to the required file on your machine.

To continue working with the previously saved changes or apply them to the newly released version of the corresponding theme, use the Import button. Paste the changes that you saved in the JSON format (using the Export window) to the invoked window.

Import Window

Click Apply and continue building the custom theme in the Theme Builder.

Save the Resulting Theme

When you are finished, and satisfied with the resulting theme after applying various changes to the base theme, save it. For this purpose, use the GetCSS button in the topmost menu on the site.

Get CSS

In the invoked menu, the code for the full theme will be displayed.

Get CSS Window

Copy the code to a CSS file. This file will be a ready-to-use theme for your DevExtreme applications/sites. Simply include a link to this theme in the project to apply the styles.

Import a Bootstrap Theme

The DevExtreme Theme Builder allows you to create a theme based on a custom Bootstrap theme. To do this, upload less variables of a Bootstrap theme to the Theme Builder.

Theme Builder Upload Less Variables

The variables.less file is shipped with each Bootstrap theme. For example, you can download it from the bootswatch.com.

Download variables.less