Selector for DevExtreme - How to implement Theme Selector for the DevExtreme Project Template

The DevExtreme Project Template has two default themes: base and swatch. You can change the base theme to another Material theme at runtime. To switch between themes, use the StyleSheet API. For this, disable all loaded theme stylesheet links excluding the active one.

The DevExtreme Project Template has several places where the SCSS variables used to change the color. To have the same color as main theme we use CSS variables and change them.

This sample demonstrates how to do this via a drop-down editor (SelectBox) located in a header (Toolbar). The default Project Template also has several elements that don't apply theme CSS rules (font color, background color) automatically. For these elements, you can use our predefined CSS classes:

• dx-theme-background-color
• dx-theme-text-color

To generate swatch themes you can use ThemeBuilder CLI:

npx devextreme-cli build-theme --base-theme="material.blue.light" --output-file="theme.additional.light" --make-swatch --assetsBasePath="../../../node_modules/devextreme/dist/css" --output-color-scheme="additional"

npx devextreme-cli build-theme --base-theme="material.blue.dark" --output-file="theme.additional.dark" --make-swatch --assetsBasePath="../../../node_modules/devextreme/dist/css" --output-color-scheme="additional"

Files to Review

• Angular
  • index.html
  • theme.service.ts
  • theme-selector.component.ts
  • theme-selector.component.html
  • app.component.ts
  • variables.css
  • variables.base.scss
  • variables.additional.scss
  • angular.json
• Vue
  • theme-service.js
  • App.vue
  • theme-selector.vue
  • main.js
  • variables.css
  • variables.base.scss
  • variables.additional.scss
  • public
• React
  • App.js
  • variables.css
  • variables.base.scss
  • variables.additional.scss
  • theme-constants.js
  • theme.js
  • ThemeSelector.js
  • public

Documentation

• Predefined Themes
• Project Template - Configure Themes