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:

In the Navigation bar, click on the Appearance option. This opens the Appearance panel.
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.

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.

Material 3 theme

The theme builds on top of Google’s Material Design 3 principles, featuring natural colors and enhanced accessibility.

Material 3 Dark theme

A sleek and elegant dark version of Material 3 theme for enhanced readability and visual appeal.

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.

Fluent UI Dark theme

The Fluent UI Dark theme aligns your applications with Microsoft’s Fluent Design System, delivering a polished user experience with a dark twist.

Using a premium theme in a Visual Studio application

The premium theme asssets are not included in the Radzen.Blazor Nuget package. To use a premium theme in your Visual Studio application you need to:

Create a new Blazor Server application in Radzen Blazor Studio and pick the desired premium theme.
Copy the theme CSS file from the newly created application to your Visual Studio application’s wwwroot directory. The theme CSS file is located in wwwroot\css.
Copy the wwwroot\fonts directory to your Visual Studio application’s wwwroot directory.

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.