DevExtreme React - ThemeBuilder

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.

  • Open the index.html file in the C:\Program Files (x86)\DevExpress 18.2\DevExtreme\Tools\DevExtreme\ThemeBuilder directory (the default directory) to run the local version. This version is available only if you have used the DevExtreme installer for Windows.

The Theme Builder divides theme 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

Select Bootstrap variables from the Import menu to upload the variables.less file that defines a Bootstrap theme.

DevExtreme HTML5 JavaScript Theme Builder Import Bootstrap Theme

Undo Changes

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

DevExtreme HTML5 JavaScript Theme Builder Undo Redo Button

Postpone Customization

Save your changes before you close 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 in a text file on your computer.

DevExtreme HTML5 JavaScript Theme Builder Export Metadata

Copy the saved metadata into the window that opens when you select 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" href="css/dx.common.css">
    <link rel="stylesheet" href="css/dx.mycustomtheme.css">
    <script type="text/javascript" src="js/dx.all.js"></script>
</head>
NOTE
We periodically remove and remap unused constants to optimize our predefined themes. This can cause compatibility issues when you upgrade custom themes. We recommend saving your theme's metadata to enable you to fix these issues. Refer to the Postpone Customization topic for more details.