DevExtreme – New ThemeBuilder

Maybe you already noticed the beta-versions alert in our DevExtreme ThemeBuilder. We have been working very hard on an improved version which makes it even more simple to create a very slick custom theme for your DevExtreme client-side app.
Whether your app is built with Angular, React, Vue, ASP.NET MVC and .NET Core or even jQuery, you can apply your theme on all of those technologies.

We’ve taken a good look at your feedback on the usability as well as some technical improvements on our own todo-list.

This has resulted in a new design with some awesome new functionality!

What has been done

One of the first things to notice is the choice you’ll get when starting the new ThemeBuilder. You can start importing an existing theme or use one of the standard themes included with DevExtreme. This also includes the super slick Material Themes we’ve recently added to DevExtreme.

Theme colors

Once working on a theme, you’ll be able to generate a color swatch – a new v18.2 feature to make styling your app more simple. These swatches are secondary color schemes alongside a primary color scheme. You can read more about this in one of Mehul’s recent blogposts.

Advanced settings

Besides the swatches, we’ve also extended the advanced settings section to change more detailed styling features. This works for common styling as well as advanced widget styling.

Another thing is that base constants can now be specified in a separate view. In many cases, only this will be enough to create a customized look and feel for your app.

Improved import and export

As a result of adding the swatches feature, one of the things we also improved is the import and export functionality of the new Themebuilder. As you can see in the picture below, there is not only an option to export swatches, but also a button to import/export files.

DevExtreme CLI integration

One of the other cool things with the new ThemeBuilder is the integration with our DevExtreme CLI. When generating the metadata for your custom theme, the ThemeBuilder uses a number of routines which are also used by the DevExtreme CLI. This allows you to pass the ThemeBuilder generated metadata as input into the CLI.

This CLI integration makes it possible to generate your CSS in a Continuous Integration environment, and it makes upgrading to a newer version of DevExtreme easier.

The ThemeBuilder metadata from one of your custom designed themes can also be used when generating a new Angular project with the DevExtreme CLI.

More to come

We’re still improving this brand new ThemeBuilder on a couple of different aspects like: finalizing a new user-guide on this release of the ThemeBuilder and we tune and tweak the advanced settings to give you even more control over the way the DevExtreme controls look.

Angular, Vue, React, ASP.NET MVC / Core and more

All the generated themes can be applied to applications built with any of the frameworks DevExtreme supports including:
Angular, Vue, React, jQuery, ASP.NET MVC and .NET Core.

Try it now?

If you want to give this new ThemeBuilder a test-drive, check it out here!

What do you think?

Let me know what you think of this by replying on this article or if you have questions or suggestions, then please create an issue on GitHub.

Free DevExpress Products - Get Your Copy Today