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 ↗
• Humanistic Dark ↗
• Software ↗
• Software Dark ↗
• Standard ↗
• Standard Dark ↗
• Material ↗
• Material Dark ↗

Explore free theming options in Radzen Blazor Components demos ↗.

Premium Themes

• Material 3
• Material 3 Dark
• Fluent UI
• Fluent UI Dark

Note: The premium themes and customization options are available after activating Radzen Blazor Studio with a license key from a Professional or Enterprise subscription. They are not available during trial mode. Check the online demos of the Radzen Blazor components to get a preview.

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:

1. Create a new Blazor Server application in Radzen Blazor Studio and pick the desired premium theme.
2. 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.
3. 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.

WCAG Swatches

WCAG stands for Web Content Accessibility Guidelines - an internationally recognized set of recommendations for making web content more accessible. The WCAG color swatches cover the minimum contrast requirements for AA level of conformance in WCAG 2.2 - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

High Contrast Swatches

The High Contrast swatches cover the enhanced contrast requirements for AAA level of conformance in WCAG 2.2 - The visual presentation of text and images of text has a contrast ratio of at least 7:1.

Note: Inappropriate component positioning or configurations might lead to low contrast between text and background colors. It is recommended to always test your layouts, content, and component configurations against the desired accessibility guidelines. See testing and evaluating web accessibility on the W3C website.

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.