DevExtreme: A new set of themes and palettes (v17.2)

Since the first DevExtreme release, we shipped the product with a generic theme in both light and dark color schemes. We wanted to avoid color accents so the widgets would fit in any design.

For us this meant that we needed to customize quite a bit in our demos like the DevAV and GolfClub projects to give them their own unique visual appearance.

As a result, we occasionally got questions from you about customizing the generic theme, or use one of those demo themes.

Because we value your feedback, with v17.2 we will give you 5 totally new themes that you can use in your DevExtreme projects:

Soft Blue, Carmine, Green Mist, Dark Moon and Dark Violet.

Customizing your entire application

Each new theme makes every single widget, from Button to Data Grid look vivid and shiny. The only thing you need to do is include the desired theme’s css file in your page and optionally add your own customizations to it.

All the new themes will be available as separate css files e.g. dx.generic.carmine.css. They are included in the installation package and on the DevExtreme CDN which hosts the new release.

Not enough?

Ok, so for our visualization widgets, we’ve taken things a bit further; besides the themes, we have added a new palette with every theme for these widgets to make them stand out. 

A palette is basically a set of colors for each series, range or area in widgets like the Chart, Pie Chart, Polar Chart, Circular Gauge, Linear Gauge, Vector Map, Tree Map and Funnel.

You can apply an individual palette to one control or to all the controls without including different css files.

If you want to use a palette for a single widget, you can use the palette property like:

var chartOptions = {
    palette: 'Dark Moon', // or 'Carmine', 'Dark Violet', 'Soft Blue', 'Green Fog'
    //...
};

If you want to change the palette for all widgets, you can call the changePalette method at the start of your application:

DevExpress.viz.currentPalette('Dark Moon'); // or 'Carmine', 'Dark Violet', 'Soft Blue', 'Green Fog'

Play around with the demos

Once we have officially released our v17.2 version, the DevExtreme web-site will be updated as well so you can have a look how those new themes look by selecting one in the dropdown of the DevExtreme Gallery.

The ThemeBuilder

One of the things I love about the new themes is that we have created them with our own DevExtreme ThemeBuilder. And now that we have those themes, the ThemeBuilder itself will be updated with the official v17.2 release to include these themes as well.

This means that you can use one of the themes as a starting point to create your own!

Can’t wait for the official release?

You can start with the Soft Blue, Carmine, Green Mist, Dark Moon and Dark Violet themes today by getting the pre-beta version of DevExtreme through npm or bower by using the following command in your project folder:

npm install devextreme@17.2.2-pre-beta

Let me know what you think of these new themes!