The latest version of our open-source Radzen Blazor Components delivers major UI improvements across the board.
TLDR, in no particular order:
- FREE Material theme - based on Google’s famous Material Design 2 guidelines for developing modern Web and mobile applications.
- CSS Variables - all components now use custom CSS properties for theming.
- UI Fundamentals - a new
<RadzenText>component and a set of predefined utility CSS classes for applying various text, background or border colors, border radiuses, and shadows.
- Color palettes - all themes now share the same color palette system that enables quick predictable customizations, and scalability.
- Optimized components’ sizing - updated sizing in all themes with respect to component’s specifics, such as ease of use and accessibility.
Open-sourced Material Theme
We are happy to share with the community our revamped Material design light theme. The theme shares the same theming mechanism (explaned further below) with the rest of the Radzen Blazor themes.
CSS properties (variables) add dynamic values to static CSS files - a value stored in one place can be referenced in multiple other places. Using our predefined set of CSS variables, you can make non-Radzen UI elements look consistent when used together with Radzen Blazor Components.
If you prefer to add CSS classes instead of inline styles, you can do so using Radzen Blazor utility CSS classes. The classes use CSS variables underneath and allow you to effortlessly adjust the styling of UI elements and components.
You can use CSS classes to set:
- Text Color, e.g.
.rz-color-primaryapplies theme’s primary color to the text
- Background Color, e.g.
.rz-background-color-primaryapplies theme’s primary color to the background
- Border Color, e.g.
.rz-border-color-primaryapplies theme’s primary color to the border
- Border, e.g.
.rz-border-primaryapplies theme’s primary border
1px solid var(--rz-primary)
- Shadow, e.g.
.rz-shadow-2applies theme’s predefined shadow with level 2
Use the RadzenText component to format text in your application. The component allows you to apply various predefined styling and alignment for headings and content while keeping the compiled code semantically correct.
We’ve reorganized the themes’ color system to make it more universal. The update impacts the relationships between color values and properties to create scalable palettes. It is important to note that introducing new color schemes does not implicitly mean new color values, yet some of the colors have been updated to improve themes’ overall look and feel.
All themes now ship with a predefined:
- Base color palette
--rz-base-900. The palette includes hardcoded hex values of tints and shades of the base theme color, used to style components’ base backgrounds, texts and borders.
--rz-secondaryaccent colors. They have lighter tints and darker shades that are automatically generated via SCSS.
- Info, Success, Warning, and Danger functional colors. They also have lighter tints and darker shades that are automatically generated via SCSS.
- Default chart series palette.
At the very top of each theme SCSS file you can find a mapping between the legacy color variables and the new ones.
See Colors demo.
We reviewed thoroughly each UI theme across components and optimized spacing and sizing to better match component’s functionality, ease of use, accessibility, and comply with different design languages (e.g. Material, Fluent).