devextreme-theming

Name: devextreme-theming
Author: DevExpress

35stars6forks

How to install devextreme-theming?

devexpress/agent-skills/devextreme-theming

$npx -y skills add DevExpress/agent-skills --skill devextreme-theming

Installs into the current project.

Summary

Apply, customize, and switch DevExtreme themes (Generic, Material, Fluent). Covers predefined theme CSS import, ThemeBuilder UI and CLI, SCSS variables, custom CSS overrides, color swatches, and runtime theme switching.

Files · 1

View on GitHub

SKILL.md

1	# DevExtreme Theming Skill
2
3	## When to Use This Skill
4
5	- Applying a predefined DevExtreme theme to a project.
6	- Creating a custom theme with ThemeBuilder (UI or CLI).
7	- Overriding theme styles with CSS classes or component `elementAttr`.
8	- Implementing dark/light mode or runtime theme switching.
9	- Using color swatches for mixed-theme layouts.
10	- Setting up SCSS-based theme imports.
11
12	---
13
14	## Before You Start
15
16	> ⚠️ *Always use DevExtreme theme CSS imports and `themes.current()` from `devextreme/ui/themes` for runtime switching. Never manually swap CSS classes on `document.body`, use Bootstrap, Ant Design, Material UI, or any other theming system. For scoped section overrides, use `.dx-swatch-` wrapper classes — do not edit DevExtreme's internal CSS files directly.**
17
18	## Architecture Overview
19
20	```text
21	DevExtreme Theme Pipeline
22	──────────────────────────────────────────────────────────────────
23	Option A │ Import prebuilt CSS → dx.[theme].css
24	Option B │ SCSS import → devextreme/scss/bundles/dx.[theme].scss
25	Option C │ ThemeBuilder UI/CLI → export dx.[base].[color].css
26	──────────────────────────────────────────────────────────────────
27	Runtime │ DevExpress.ui.themes.current(name) — same theme family
28	Swatch │ .dx-swatch-xxx wrapper class — section-level overrides
29	CSS API │ .dx-* classes / elementAttr / wrapperAttr — component-level
30	```
31
32	---
33
34	## Theme Families
35
36	\| Family \| Base name pattern \| Notes \|
37	\|---\|---\|---\|
38	\| Generic \| `generic.light`, `generic.dark`, `generic.contrast`, `generic.carmine`, etc. \| Also compact variants: `generic.light.compact` \|
39	\| Material Design \| `material.blue.light`, `material.blue.dark`, `material.teal.light`, etc. \| Color + mode segments \|
40	\| Fluent \| `fluent.blue.light`, `fluent.blue.dark`, etc. \| Requires icon archive when exporting \|
41
42	CSS file name pattern: `dx.[theme-family].[color-variant].css`
43	Examples: `dx.light.css`, `dx.dark.css`, `dx.material.blue.light.css`, `dx.fluent.blue.light.css`
44
45	> Compact themes reduce all component sizes. Use these instead of `zoom`/`transform` CSS — DevExtreme does not support those properties.
46
47	---
48
49	## Documentation Reference
50
51	\| Topic \| Reference File \|
52	\|---\|---\|
53	\| Predefined themes — applying and CSS file names \| [references/predefined-themes.md](references/predefined-themes.md) \|
54	\| ThemeBuilder UI and CLI — creating custom themes \| [references/themebuilder.md](references/themebuilder.md) \|
55	\| Custom CSS overrides — classes, elementAttr, defaultOptions \| [references/custom-css.md](references/custom-css.md) \|
56	\| Runtime theme switching and color swatches \| [references/runtime-switching.md](references/runtime-switching.md) \|
57	\| Icons — built-in library, custom icons, external libraries, Fluent archive setup \| [references/icons.md](references/icons.md) \|
58
59	---
60
61	## Quick-Start: Apply a Theme
62
63	### React / Vue (Vite)
64
65	```ts
66	// main.ts or main.tsx — import exactly ONE theme
67	import 'devextreme/dist/css/dx.fluent.blue.light.css';
68	```
69
70	### Angular
71
72	```ts
73	// angular.json — add to "styles" array
74	"styles": [
75	"node_modules/devextreme/dist/css/dx.fluent.blue.light.css",
76	"src/styles.css"
77	]
78	```
79
80	### jQuery
81
82	```html
83	<!-- index.html <head> -->
84	<link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.fluent.blue.light.css" />
85	```
86
87	> Only one prebuilt theme should be active at a time. For runtime switching, see [references/runtime-switching.md](references/runtime-switching.md).
88
89	---
90
91	## Key API
92
93	\| API \| Description \|
94	\|---\|---\|
95	\| `DevExpress.ui.themes.current()` \| Returns the currently active theme name \|
96	\| `DevExpress.ui.themes.current(name)` \| Switches to another theme in the same family (no page reload) \|
97	\| `DevExpress.ui.themes.ready(callback)` \| Fires after a theme finishes loading \|
98	\| `elementAttr` \| Adds CSS classes or attributes to a component's root element \|
99	\| `wrapperAttr` \| Adds CSS classes to a popup/overlay wrapper element (Popup, Tooltip, etc.) \|
100	\| `defaultOptions(rule)` \| Sets default options for all instances of a component type \|
101
102	---
103
104	## Constraints and Rules
105
106	1. One theme family at a time. You cannot mix Generic and Material themes on the same page without color swatches. Switching between families requires a page reload.
107	2. Compact is the right way to reduce size. DevExtreme does not support `zoom` or `transform` for sizing. Use compact theme variants instead.
108	3. `DevExpress.ui.themes.current()` only works within a theme family. Cross-family switches (e.g., Generic → Material) need page reload with `localStorage`/`sessionStorage` persisting the choice.
109	4. **Color swatches cannot style SVG-based

People who liked this also viewed

6 picks

Type

devextreme-theming

35stars6forks

View on GitHub

How to install devextreme-theming?

devexpress/agent-skills/devextreme-theming

$npx -y skills add DevExpress/agent-skills --skill devextreme-theming

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExtreme Theming Skill
2
3	## When to Use This Skill
4
5	- Applying a predefined DevExtreme theme to a project.
6	- Creating a custom theme with ThemeBuilder (UI or CLI).
7	- Overriding theme styles with CSS classes or component `elementAttr`.
8	- Implementing dark/light mode or runtime theme switching.
9	- Using color swatches for mixed-theme layouts.
10	- Setting up SCSS-based theme imports.
11
12	---
13
14	## Before You Start
15
16	> ⚠️ *Always use DevExtreme theme CSS imports and `themes.current()` from `devextreme/ui/themes` for runtime switching. Never manually swap CSS classes on `document.body`, use Bootstrap, Ant Design, Material UI, or any other theming system. For scoped section overrides, use `.dx-swatch-` wrapper classes — do not edit DevExtreme's internal CSS files directly.**
17
18	## Architecture Overview
19
20	```text
21	DevExtreme Theme Pipeline
22	──────────────────────────────────────────────────────────────────
23	Option A │ Import prebuilt CSS → dx.[theme].css
24	Option B │ SCSS import → devextreme/scss/bundles/dx.[theme].scss
25	Option C │ ThemeBuilder UI/CLI → export dx.[base].[color].css
26	──────────────────────────────────────────────────────────────────
27	Runtime │ DevExpress.ui.themes.current(name) — same theme family
28	Swatch │ .dx-swatch-xxx wrapper class — section-level overrides
29	CSS API │ .dx-* classes / elementAttr / wrapperAttr — component-level
30	```
31
32	---
33
34	## Theme Families
35
36	\| Family \| Base name pattern \| Notes \|
37	\|---\|---\|---\|
38	\| Generic \| `generic.light`, `generic.dark`, `generic.contrast`, `generic.carmine`, etc. \| Also compact variants: `generic.light.compact` \|
39	\| Material Design \| `material.blue.light`, `material.blue.dark`, `material.teal.light`, etc. \| Color + mode segments \|
40	\| Fluent \| `fluent.blue.light`, `fluent.blue.dark`, etc. \| Requires icon archive when exporting \|
41
42	CSS file name pattern: `dx.[theme-family].[color-variant].css`
43	Examples: `dx.light.css`, `dx.dark.css`, `dx.material.blue.light.css`, `dx.fluent.blue.light.css`
44
45	> Compact themes reduce all component sizes. Use these instead of `zoom`/`transform` CSS — DevExtreme does not support those properties.
46
47	---
48
49	## Documentation Reference
50
51	\| Topic \| Reference File \|
52	\|---\|---\|
53	\| Predefined themes — applying and CSS file names \| [references/predefined-themes.md](references/predefined-themes.md) \|
54	\| ThemeBuilder UI and CLI — creating custom themes \| [references/themebuilder.md](references/themebuilder.md) \|
55	\| Custom CSS overrides — classes, elementAttr, defaultOptions \| [references/custom-css.md](references/custom-css.md) \|
56	\| Runtime theme switching and color swatches \| [references/runtime-switching.md](references/runtime-switching.md) \|
57	\| Icons — built-in library, custom icons, external libraries, Fluent archive setup \| [references/icons.md](references/icons.md) \|
58
59	---
60
61	## Quick-Start: Apply a Theme
62
63	### React / Vue (Vite)
64
65	```ts
66	// main.ts or main.tsx — import exactly ONE theme
67	import 'devextreme/dist/css/dx.fluent.blue.light.css';
68	```
69
70	### Angular
71
72	```ts
73	// angular.json — add to "styles" array
74	"styles": [
75	"node_modules/devextreme/dist/css/dx.fluent.blue.light.css",
76	"src/styles.css"
77	]
78	```
79
80	### jQuery
81
82	```html
83	<!-- index.html <head> -->
84	<link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.fluent.blue.light.css" />
85	```
86
87	> Only one prebuilt theme should be active at a time. For runtime switching, see [references/runtime-switching.md](references/runtime-switching.md).
88
89	---
90
91	## Key API
92
93	\| API \| Description \|
94	\|---\|---\|
95	\| `DevExpress.ui.themes.current()` \| Returns the currently active theme name \|
96	\| `DevExpress.ui.themes.current(name)` \| Switches to another theme in the same family (no page reload) \|
97	\| `DevExpress.ui.themes.ready(callback)` \| Fires after a theme finishes loading \|
98	\| `elementAttr` \| Adds CSS classes or attributes to a component's root element \|
99	\| `wrapperAttr` \| Adds CSS classes to a popup/overlay wrapper element (Popup, Tooltip, etc.) \|
100	\| `defaultOptions(rule)` \| Sets default options for all instances of a component type \|
101
102	---
103
104	## Constraints and Rules
105
106	1. One theme family at a time. You cannot mix Generic and Material themes on the same page without color swatches. Switching between families requires a page reload.
107	2. Compact is the right way to reduce size. DevExtreme does not support `zoom` or `transform` for sizing. Use compact theme variants instead.
108	3. `DevExpress.ui.themes.current()` only works within a theme family. Cross-family switches (e.g., Generic → Material) need page reload with `localStorage`/`sessionStorage` persisting the choice.
109	4. **Color swatches cannot style SVG-based

People who liked this also viewed

6 picks

Type