Theme Switcher for DevExtreme - Implement a Theme Switcher within the DevExtreme Application Template

DevExtreme Application Templates include two default themes: base and swatch. This example implements a DevExtreme SelectBox designed to switch between themes at runtime.

Our Application Templates contain SCSS variables designed to change theme colors. You can also use our predefined CSS classes (dx-theme-background-color, dx-theme-text-color, etc.) to style native HTML elements to maintain a consistent look across your application.

To switch between themes, use StyleSheet APIs to disable all loaded base/swatch stylesheets (excluding the active stylesheet) and update SCSS variables. Refer to the following files to review framework-specific implementations:

• Angular Theme Service
• Vue Theme Service
• React Theme Service

This example also uses our predefined CSS classes to customize elements outside of DevExtreme components.

Add Themes to the Theme Switcher

1. Add theme metadata JSON files to src/themes. For additional information on theme metadata files, refer to the following help topic: Export Theme Metadata.
2. Add new metadata files to the command list in devextreme.json (as build-theme commands).
3. Execute the following command: npm run build-themes. This command uses our ThemeBuilder CLI to generate theme files. You can find these files in the outputFile directory (specified in devextreme.json).
4. Add links to new themes in index.html.
5. For base themes only. Add new entries to the getThemeData array within the theme service. The theme switcher SelectBox uses this array as a data source.

This example implements two swatch themes (light and dark). To switch between three or more swatch themes, extend the applySwatchTheme method in the theme service.

You can also generate theme files using our ThemeBuilder CLI. The following commands generate light and dark swatch themes:

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
  • app.component.ts
  • app.component.html
  • theme.service.ts
  • theme-selector.component.ts
  • theme-selector.component.html
  • variables.base.scss
  • variables.additional.scss
  • angular.json
• Vue
  • App.vue
  • theme-service.ts
  • theme-selector.vue
  • main.ts
  • variables.base.scss
  • variables.additional.scss
  • public
• React
  • App.tsx
  • variables.base.scss
  • variables.additional.scss
  • theme-constants.ts
  • theme.tsx
  • ThemeSelector.tsx
  • public

Documentation

• Predefined Themes
• Project Template - Configure Themes

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)