DevExtreme React - Theme Builder

The Theme Builder is a tool for creating custom themes based on predefined DevExtreme and Bootstrap themes. You can use it as follows:

  • Access the online version.

  • Run the local version by opening the index.html file located in the C:\Program Files (x86)\DevExpress 18.1\DevExtreme\Tools\DevExtreme\ThemeBuilder directory by default. This version is available only if you have istalled DevExtreme using the installer for Windows.

The Theme Builder divides theming settings into two groups: Basic Theming for the most frequently used settings, and Advanced Theming for more advanced and widget-specific settings.

Choose a Base Theme

DevExtreme Themes

Select one of the DevExtreme themes from the drop-down menu on the toolbar.

DevExtreme HTML5 JavaScript Theme Builder Selecting a Base Theme

Bootstrap Themes

Upload the variables.less file that defines a Bootstrap theme by selecting Bootstrap variables from the Import menu.

DevExtreme HTML5 JavaScript Theme Builder Import Bootstrap Theme

Undo Changes

Theme Builder allows you to undo/redo changes or reset the whole theme using the corresponding toolbar buttons.

DevExtreme HTML5 JavaScript Theme Builder Undo Redo Button

Postpone Customization

You should save your changes before closing the Theme Builder to avoid losing them. Select Export metadata from the Export menu to open the window with the Theme Builder metadata. Save this metadata wherever it suits you.

DevExtreme HTML5 JavaScript Theme Builder Export Metadata

Copy the saved metadata to the window that opens when selecting Import metadata from the Import menu to continue customization.

DevExtreme HTML5 JavaScript Theme Builder Import Metadata

Save the Resulting Theme

Select Save CSS from the Export menu to save a CSS file with the resulting theme.

DevExtreme HTML5 JavaScript Theme Builder Import Metadata

Link this theme to your project after dx.common.css but before the DevExtreme script:

HTML
<head>
    <link rel="stylesheet" type="text/css" href="css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="css/dx.mycustomtheme.css" />
    <script type="text/javascript" src="js/dx.all.js"></script>
</head>
NOTE
Predefined themes are periodically updated and improved. We recommend saving your custom theme's metadata to avoid possible difficulties when upgrading to the latest release. Refer to the Postpone Customization topic for more details.