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.
Run the Theme Builder in a browser (online) from the following link: http://js.devexpress.com/ThemeBuilder/.
Typically, the Theme Builder is located in the following path after installation.
c:\Program Files (x86)\DevExpress 15.1\DevExtreme\Tools\ThemeBuilder
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.
Choose a Theme
Choose a theme using the BASE THEME drop-down menu in the top menu of the site.
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.
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, as well as a color for the text displayed on the highlighted elements.
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.
You can undo/redo the last change you made to the theme.
To undo all changes made during the current session on the site, press the Reset button.
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.
In the invoked window, you will see your changes displayed in the JSON format.
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.
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.
In the invoked menu, the code for the full theme will be displayed.
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.