DevExtreme Vue - Predefined Themes

DevExtreme provides Generic, Generic Compact, and Material Design themes. These themes are available in the following colors:

Generic Themes

Light

Light Compact

Dark

Dark Compact

Carmine

Carmine Compact

Soft Blue

Soft Blue Compact

Dark Moon

Dark Moon Compact

Dark Violet

Dark Violet Compact

Green Mist

Green Mist Compact

Contrast

Contrast Compact

Material Design Themes

Blue Light

Blue Dark

Lime Light

Lime Dark

Orange Light

Orange Dark

Purple Light

Purple Dark

Teal Light

Teal Dark

Each theme is a stylesheet that contains a collection of CSS classes. The following stylesheets are available out of the box:

Generic	Generic Compact	Material Design
`dx.light.css` `dx.dark.css` `dx.carmine.css` `dx.softblue.css` `dx.darkmoon.css` `dx.darkviolet.css` `dx.greenmist.css` `dx.contrast.css`	`dx.light.compact.css` `dx.dark.compact.css` `dx.carmine.compact.css` `dx.softblue.compact.css` `dx.darkmoon.compact.css` `dx.darkviolet.compact.css` `dx.greenmist.compact.css` `dx.contrast.compact.css`	`dx.material.blue.light.css` `dx.material.blue.dark.css` `dx.material.lime.light.css` `dx.material.lime.dark.css` `dx.material.orange.light.css` `dx.material.orange.dark.css` `dx.material.purple.light.css` `dx.material.purple.dark.css` `dx.material.teal.light.css` `dx.material.teal.dark.css`

CSS themes are designed to customize HTML-based widgets. However, SVG-based widgets use their own themes to assume an appearance that matches a particular CSS theme. Refer to the Themes article for more information on themes in SVG-based widgets.

Apply a Theme

Do the following to apply a theme:

jQuery, Knockout, AngularJS
Include dx.common.css and a theme stylesheet in the <head> tag on your index page. You can use local files or get the stylesheets from CDN.
Angular, React, or Vue
Configure the module bundler you are using and import dx.common.css and a theme stylesheet. See the instructions in the dedicated GitHub repositories: Angular, React, Vue.
ASP.NET MVC 5
1. Go to the AppStart folder.
2. Open the DevExtremeBundleConfig.cs file
3. Find the following code and replace dx.light.css in it with the theme stylesheet of your choice:
```
styleBundle
    .Include("~/Content/dx.common.css")
    .Include("~/Content/dx.light.css");
```
ASP.NET Core
1. Go to the Views/Shared folder (for conventional Razor views) or Pages folder (for Razor Pages).
2. Open the _Layout.cshtml or _DevExtremeLayout.cshtml file (depending on which of them is used in the _ViewStart.cshtml file).
3. Find the following line and replace dx.light.css in it with the theme stylesheet of your choice:
```
<link href="~/lib/devextreme/css/dx.light.css" rel="stylesheet">
```

Switch Between Themes at Runtime

There are two ways to switch between themes. Use the following way if the themes belong to the same group. For instance, you can switch from Generic Light to any other Generic theme, but not to a Generic Compact or Material Design theme (see Predefined Themes).

Include theme stylesheets on your index page as shown below. Note that the dx.common.css stylesheet should be included using conventional <link> syntax. A theme with the data-active attribute set to true is applied. In the following code, it is Generic Light:

<head>
    <link rel="stylesheet" href="css/dx.common.css">
    <!-- Generic themes -->
    <link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="true">
    <link rel="dx-theme" data-theme="generic.dark" href="css/dx.dark.css" data-active="false">
    <link rel="dx-theme" data-theme="generic.contrast" href="css/dx.contrast.css" data-active="false">
    <!-- ... -->
    <!-- or Generic Compact themes-->
    <!-- link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="true" -->
    <!-- link rel="dx-theme" data-theme="generic.dark.compact" href="css/dx.dark.compact.css" data-active="false" -->
    <!-- link rel="dx-theme" data-theme="generic.contrast.compact" href="css/dx.contrast.compact.css" data-active="false" -->
    <!-- ... -->
    <!-- or Material Design themes-->
    <!-- link rel="dx-theme" data-theme="material.blue.light" href="css/dx.material.blue.light.css" data-active="true" -->
    <!-- link rel="dx-theme" data-theme="material.blue.dark" href="css/dx.material.blue.dark.css" data-active="false" -->
    <!-- link rel="dx-theme" data-theme="material.teal.light" href="css/dx.material.teal.light.css" data-active="false" -->
    <!-- ... -->
</head>

Switch to a theme using the DevExpress.ui.themes.current(themeName) method. It accepts the data-theme attribute's value from the previous code. The following example shows how to apply the Generic Contrast theme:
```
DevExpress.ui.themes.current("generic.contrast");
// ===== or when using modules =====
import themes from "devextreme/ui/themes";

themes.current("generic.contrast");
```

The following way is suitable for switching between any themes, but it involves page reload:

Include theme stylesheets on your index page as shown below. The syntax is the same as in the step 1 of the previous instructions, but the data-active attributes are set to false for all themes.

<head>
    <!-- ... -->
    <link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="false">
    <link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="false">
    <link rel="dx-theme" data-theme="material.blue.light" href="css/dx.material.blue.light.css" data-active="false">
    <!-- ... -->
</head>

Save the target theme's name in the localStorage and reload the page:

var switchTheme = function(themeName) {
    window.localStorage.setItem("dx-theme", themeName);
    window.location.reload();
}

On page loading, restore the theme name and pass it to the DevExpress.ui.themes.current(themeName) method. You can also specify the theme to be applied in case no theme name is found in the localStorage. In the following code, it is the Material Blue Light theme.
```
DevExpress.ui.themes.current(window.localStorage.getItem("dx-theme") || "material.blue.light");
// ===== or when using modules =====
import themes from "devextreme/ui/themes";

themes.current(window.localStorage.getItem("dx-theme") || "material.blue.light");
```

Color Swatches

Color swatches are secondary color schemes used alongside a primary color scheme. You can use them to stylize parts of your application differently, for instance, when the navigation sidebar should be dark and the content area light.

A color swatch is defined by scoped CSS rules that are prefixed with a specific selector: dx-swatch-xxx (for instance, dx-swatch-green). To apply a color swatch to a part of an HTML document, wrap this part as follows:

HTML

<div>
    This content applies the primary color scheme

    <div class="dx-swatch-dark">
        This content applies the "dark" color scheme
    </div>
</div>

NOTE

Color swatches should be based on a single theme (Generic, Generic Compact, or Material) and do not allow compiling different themes.

You can generate color swatches with the DevExtreme CLI or ThemeBuilder UI:

DevExtreme CLI

The following command generates a new custom color swatch that uses Generic Dark as a base theme.
```
> devextreme build-theme –-base-theme="generic.dark" --make-swatch --output-color-scheme="dark"
// ===== or without installing DevExtreme CLI globally =====
> npx -p devextreme-cli devextreme build-theme –-base-theme="generic.dark" --make-swatch --output-color-scheme="dark"
```
The result of this command is a dx.generic.dark.css file in which every rule is prefixed with the .dx-swatch-dark CSS selector. Move the file to the application folder, register it, and add the swatch class to a page element.

Refer to DevExtreme CLI: ThemeBuilder for more information about CLI commands and command line arguments.
ThemeBuilder UI

Click Export on the toolbar to open the Export a Theme popup dialog. Enter the color swatch's name, enable the Swatch mode switcher, and click Export CSS:

Save the resulting CSS file in the application folder, register it, and add the swatch class to a page element.