devextreme-theming

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.