Themes and Swatches
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.
Explore free theming options in Radzen Blazor Components demos.
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
wwwrootdirectory. The theme CSS file is located in
- Copy the
wwwroot\fontsdirectory to your Visual Studio application’s
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 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.