Styling and Themes
- 3 minutes to read
The appearance of DevExpress Blazor components depends on your application’s theme and applied customizations. This topic describes all available options you can use to customize your application.
Themes
The DevExpress Blazor suite ships with four built-in themes: Blazing Berry, Blazing Dark, Purple, and Office White. DevExpress Blazor components also support Bootstrap-based themes. You can use a theme from an external library, such as Bootswatch.
DevExpress Blazing Berry
Bootswatch Cerulean
Refer to the following topic for more information on how to apply a theme to a Blazor application: Themes.
Size Modes
You can change the size of components within your application. You can use the SizeMode application-wide option to specify the size mode for DevExpress Blazor components that support this feature. Individual controls can use their own SizeMode property to override the global option.
Refer to the following topic for more information: Size Modes.
Appearance Customization
You can customize DevExpress Blazor components in the following ways: add custom icons, apply CSS rules, and modify built-in DevExpress themes.
Apply CSS Classes
If you need to customize individual components or their elements, use the CssClass property. The Blazor Grid also includes the CustomizeElement event that customizes the component’s rows, columns, and other predefined areas. These API members support isolated styles.
If you need to customize a number of components on several pages or keep all custom CSS rules in one place, you can create a custom stylesheet in addition to the application’s theme. Make sure to include this stylesheet into the <head> section after the theme’s link.
For more information about CSS, refer to the following topics:
Add Custom Icons
DevExpress components support custom icons from any library of your choice. For navigation and layout components, you can use the IconUrl property to specify your icon’s URL. For other components, use the IconCssClass property to assign a CSS class that specifies a custom icon for a component or its element.
Refer to the following topic for more information: Icons.
Build a Custom Theme
If you need to make significant changes to the entire application, build a custom theme.
Refer to the following topic for a step-by-step instructions on how to create a custom theme based on a DevExpress built-in theme: DevExpress Theme Customization.