DevExtreme CLI - Custom Theme Generation (v18.2)

Here is an interesting piece of news for command line users: new versions of the DevExtreme CLI tool now support functionality to create custom themes, and to export theme variables in Less and Sass (SCSS) formats.

DevExtreme CLI is installed using npm:

npm install -g devextreme-cli

Customize A DevExtreme Theme

To customize an existing theme, you need a theme metadata file. This is a JSON file with a simple structure:

{"items": [
    {"key": "@base-accent","value": "#ff00b7"
    }
  ],"baseTheme": "material.blue.light"
}

It is possible to export a metadata file by running this CLI command:

devextreme export-theme-meta --base-theme="material.blue.light"

  OR - to include only the "base" values

devextreme export-theme-meta --base-theme="material.blue.light" --base

A word of caution: a complete export file contains many values that you will likely not change, some of which may be calculated based on others. If you choose to start with a complete export, you should remove all those entries from the file that you did not modify, so they fall back to their default calculated values.

The easiest way to create a custom theme is to use the ThemeBuilder (a detailed guide is available). You can take advantage of the preview mechanism in the online tool and then export your custom theme as a metadata file.

Here’s a cool feature that’s easy to miss: the metadata file can contain calculated values defined using Less syntax. For instance:

..."items": [
  {"key": "@base-border-radius-large","value": "@base-border-radius * 2"
  },
  {"key": "@base-warning","value": "lighten(@base-danger, 20%)"
  }
]
...

To generate your custom theme from the metadata file, another simple CLI call is sufficient:

devextreme build-theme --input-file=mymetadata.json

This call creates the CSS file for your custom theme. Of course it can be including in your build toolchain easily, and it will automatically update your custom theme if the base theme changes, e.g. after major version updates of DevExtreme.

Reuse DevExtreme Theme Colors

If you intend to write additional style sheets for your app that refer to the base settings from your chosen DevExtreme theme, you can export variables for that theme using this call:

devextreme export-theme-vars --base-theme="material.blue.light"

  To include only "base" values:

devextreme export-theme-vars --base-theme="material.blue.light" --base

  To export in SCSS format instead of the default Less format:

devextreme export-theme-vars --base-theme="material.blue.light" --output-format=scss

As an example, the Less output may look like this:

@base-bg: #fff;
@base-text-color: rgba(0, 0, 0, 0.87);
@base-border-color: #e0e0e0;
@base-border-radius: 4px;
@base-accent: #03a9f4;

Now you can import the file in your own stylesheet (@import "dx.material.custom-scheme.less";) and use the variables in your styles.

Let’s Hear Your Thoughts

The new CLI functionality makes it much easier to integrate custom theme creation and maintenance with your build process. Please let us know what you think, by submitting the short survey below, or by leaving a comment or opening a support ticket for further discussion.