DevExtreme Vue - ThemeBuilder

The ThemeBuilder 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).

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.

New themes are based on predefined DevExtreme themes. Follow these steps to create a new theme in the wizard:

1. Click Choose a Base Theme.

2. Select a base theme: Generic or Material.

3. Select a color scheme and change basic appearance settings.

4. 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.

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:

1. Click Import a Theme.

2. Choose whether to import a theme from DevExtreme metadata or Bootstrap variables.

3. 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.

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 UI components

  • Typography Settings - settings that configure fonts

  • Specific UI components or UI component groups - settings used by an individual UI component or UI component group

  The settings list also contains a search box to search for a UI component or UI component 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.

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:

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 and fonts. They should be located next to the theme. When using npm, you can find the icons and fonts folders in node_modules/devextreme/dist/css. In other cases, these folders are in the directory with predefined themes. Copy them 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.

The ThemeBuilder CLI allows you to generate themes programmatically or at build time. This tool is part of the DevExtreme CLI.