skills.rest
DevExpress
DevExpressOFFICIAL
Explore all skills by this author →
WebsiteGitHub

devextreme-theming

Apply predefined and custom DevExtreme themes across Angular, React, Vue, and jQuery.

39|7|Updated Jun 2, 2026
Search Tags:#theming#ui components#css customization#runtime switching#devextreme#themebuilder#color swatches
One-click install
npx skills add https://github.com/DevExpress/agent-skills --skill devextreme-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devextreme-theming
Source: https://github.com/DevExpress/agent-skills/tree/main/plugins/dx-devextreme/skills/devextreme-theming
Command: npx skills add https://github.com/DevExpress/agent-skills --skill devextreme-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the frustration of inconsistent DevExtreme UI theming, broken runtime theme switching, and fragile manual CSS overrides that break on library upgrades, ensuring your web app's look and feel remains consistent and maintainable across all supported frameworks.

Core Features & Use Cases

  • Predefined Theme Setup: Apply Generic, Material, or Fluent themes to Angular, React, Vue, or jQuery projects with correct import paths and framework-specific configuration.
  • Custom Theme Creation: Build bespoke themes using the ThemeBuilder UI or CLI, with support for SCSS variable overrides, custom color palettes, and Fluent theme icon asset configuration.
  • Runtime Theme Management: Implement same-family runtime theme switching, dark/light mode toggles, and color swatches for mixed-theme layouts like a dark sidebar paired with a light main content area.
  • Safe Customization Practices: Follow guardrails to avoid common pitfalls including cross-family theme switching errors, scoped style limitations for overlay components, and incorrect SVG component theming approaches.

Quick Start

Use this skill to configure a Material Blue Light theme for your Angular DevExtreme app, add runtime dark mode switching that persists the user's preference to localStorage, and apply a custom purple accent color via CSS custom properties without modifying internal DevExtreme styles.

Frequently Asked Questions about devextreme-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I switch DevExtreme UI themes at runtime without breaking styles?▼

Runtime theme switching in DevExtreme requires staying within the same theme family, such as toggling between Material Dark and Material Light. This skill implements safe same-family switching and localStorage persistence while avoiding cross-family compatibility errors.

What is the best way to create a custom DevExtreme theme with specific brand colors?▼

Creating a custom DevExtreme theme is best done using the ThemeBuilder UI or CLI to override SCSS variables and define custom color palettes. This approach prevents fragile manual CSS overrides that break during library upgrades.

Does DevExtreme theming support color swatches for mixed light and dark layouts?▼

DevExtreme theming supports color swatches to implement mixed-theme layouts, allowing you to pair a dark sidebar with a light main content area. This skill configures scoped swatches correctly without causing overlay component style conflicts.

How do I apply a predefined DevExtreme theme to an Angular or React project?▼

Applying predefined DevExtreme themes to Angular, React, Vue, or jQuery requires using the correct import paths and framework-specific configuration. This skill sets up Generic, Material, or Fluent themes across these web frameworks.

Why do my DevExtreme overlay components ignore scoped styles during theme customization?▼

DevExtreme overlay components have scoped style limitations because they render outside the component DOM hierarchy. This skill provides theming guardrails to handle SVG component palettes and overlay styling correctly without internal CSS modifications.

Related Skills

Explore More Software Engineering Skills→
DevExpressDevExpress
39

devextreme-numberbox

Configure DevExtreme NumberBox numeric inputs across Angular, React, Vue, and jQuery.

Official
Intermediate
Formspec-orgFormspec-org
4

formspec-integrate

Integrate Formspec into applications to render, style, and validate forms.

Official
Advanced
DevExpressDevExpress
39

devextreme-button

Implement DevExtreme dxButton UI component across Angular, React, and more.

Official
Intermediate
Xenous-IncXenous-Inc

frontend-design

Generate distinctive HTML/CSS/JS frontend components with precise typography and accessibility.

Official
Advanced