Themes and Swatches

Radzen Blazor Studio features sets of free and premium themes and predefined color swatches for Radzen Blazor Components.

Change application theme

To change the theme of your Radzen Blazor application:

  1. In the Navigation bar, click on the Appearance option. This opens the Appearance panel.
  2. Select your preferred theme from the dropdown at the top of the Appearance panel.

Free Themes

  • Default
  • Dark
  • Humanistic
  • Software
  • Standard
  • Material

Explore free theming options in Radzen Blazor Components demos.

Premium Themes

Note: The premium themes and customization options are available during Trial or after activating Radzen Blazor Studio with a license key from a Professional or Enterprise subscription.

Material Dark theme

The theme is based on the principles of Material Design 2, a visual language developed by Google for designing user interfaces. Material Design is based on the idea that user interfaces should be intuitive, functional, and visually appealing.

Fluent UI theme

The Fluent design system is a design language developed by Microsoft. It is used by many of Microsoft’s own products, as well as by third-party developers who want to create user experiences that are consistent with the Microsoft ecosystem.

Swatches

Note: Swatches are a premium feature.

Each theme contains a collection of predefined color swatches.

A swatch is a color palette containing carefully picked color tints and shades of:

  • Base background and text colors
  • Primary color
  • Secondary color
  • Info color
  • Success color
  • Warning color
  • Danger color

Swatches are a great starting point to quickly customize the global styling of your application via a single click.

Apply a color swatch

To apply a swatch, simply select it from the list of available swatches for a chosen theme. Its colors are automatically populated in the pickers under Colors customization section and applied to your app in real time. Read more about Basic color customization.

To reset a theme to its original colors, hit the Reset button in the Appearance panel.