DevExtreme React - ThemeBuilder
The ThemeBuilder is a tool that allows you to create custom themes based on Bootstrap or predefined DevExtreme themes. It consists of a UI version (illustrated below) and a command-line interface (CLI).
Get Started
Once you open the ThemeBuilder, a theme configuration wizard appears. You can choose whether to create a new theme or import an existing DevExtreme or Bootstrap theme.
Create a New Theme
New themes are based on predefined DevExtreme themes. Follow these steps to create a new theme in the wizard:
Click Choose a Base Theme.
Select a base theme: Generic or Material.
Select a color scheme and change basic appearance settings.
If the appearance on the preview meets you requirements, click Export to export the theme. Otherwise, click Advanced Settings to navigate to the main view for additional customization.
Import an Existing Theme
You can import an existing theme from DevExtreme metadata saved beforehand or from Bootstrap variables. Follow the steps below to do that in the wizard:
Click Import a Theme.
Choose whether to import a theme from DevExtreme metadata or Bootstrap variables.
To import DevExtreme metadata, upload a
.json
file with the metadata or paste the metadata in the text area.To import Bootstrap variables, upload a
variables.less
for Bootstrap 3 or_variables.scss
file for Bootstrap 4. The ThemeBuilder uses colors from the variables to create a theme that is consistent with the Bootstrap theme.
After you import a theme, the wizard navigates to the main view for additional theme customization.
Customize the Theme
After you create or import a theme, the ThemeBuilder navigates you to the main view where you can customize the theme.
The main view consists of the following elements:
Settings list (left-hand menu)
Contains all customization settings divided into groups:Basic Settings - settings used by multiple widgets
Typography Settings - settings that configure fonts
Specific widgets or widget groups - settings used by an individual widget or widget group
The settings list also contains a search box to search for a widget or widget group.
Toolbar (top panel)
Contains the theme switcher and Import and Export buttons.Preview area
Displays DevExtreme components in the customized theme. Updates automatically when you change a setting or switch between themes.
Postpone Customization
To return to customization later, save the theme's metadata beforehand. Click Export on the toolbar to open the Theme Export popup dialog. In this dialog, select the Export Metadata tab and click Save to File. A .json
file with metadata is saved on your computer. Alternatively, you can copy the metadata from the text area at the bottom:
To continue customization, click Import on the toolbar. In the appeared Theme Import dialog, click Upload File and select the .json
file that you exported previously. If you have copied the metadata rather than exported it as a .json
file, paste it in the text area and click Upload Metadata:
Export the Resulting Theme
Click Export to open the Theme Export popup dialog. In this dialog, enter the color scheme name. If you want to export the theme as a color swatch, check the check box as well.
Click Save to File to save a file named dx.[base-theme-name].[color-scheme-name].css
(for example, dx.material.brown.css
) on your computer. Alternatively, you can copy the CSS from the text area at the bottom:
Your custom theme uses icons, which should be located next to the theme. When using npm, you can find the icons
folder in node_modules/devextreme/dist/css
. In other cases, the folder is in the directory with predefined themes. Copy the icons
folder to the directory that contains your theme.
Finally, register the exported theme. If you exported a color swatch, apply it as described in Color Swatches.
ThemeBuilder CLI
The ThemeBuilder CLI allows you to generate themes programmatically or at build time. This tool is part of the DevExtreme CLI.
If you have technical questions, please create a support ticket in the DevExpress Support Center.