DevExtreme Theming Skill

When to Use This Skill

• Applying a predefined DevExtreme theme to a project.
• Creating a custom theme with ThemeBuilder (UI or CLI).
• Overriding theme styles with CSS classes or component elementAttr.
• Implementing dark/light mode or runtime theme switching.
• Using color swatches for mixed-theme layouts.
• Setting up SCSS-based theme imports.

Before You Start

⚠️ 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.

Architecture Overview