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

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

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