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 14.1\DevExtreme\Tools\ThemeBuilder
Run the index.html page in a browser.
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.
This button is available for generic themes only (not mobile themes). When setting a custom highlight color, the selected color will be applied to all widgets as the color for widget elements that must be highlighted.
The selected color will be used in all styles of this theme as the main color.
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
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. For this purpose, 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 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.