A DevExtreme-powered application's appearance depends on its theme and applied customizations. This topic describes all available customization options.

DevExtreme ships with the following built-in themes:

• Fluent Next
  DevExpress Design System-based themes that use CSS variables to declare color, typography, spacing, border, opacity, and shadow styles. Key capabilities include:

  • Predefined accent colors
  • Custom accent colors
  • Light and dark modes
  • Compact mode
  • Theme customization using public --dxds-* CSS variables

• Fluent, Material, and Generic
  Themes that use SCSS to implement styles. For more information, refer to the following help topic: Predefined Themes.

Apply custom CSS styles to specific classes to customize the appearance of DevExtreme components. You can also assign these CSS classes to custom elements for a consistent look and feel across your app.

For a list of common DevExtreme classes, refer to the following help topic: CSS Classes.

Refer to the following help topic for information about how to customize Fluent Next themes: Fluent Next Theme Customization.