Select theme:
The Appearance panel in Radzen Blazor Studio provides a comprehensive interface for easily customizing the global look and feel of your application in real time.
Note: Color customization is a premium feature, available for apps using the Radzen Blazor Components library.
To customize the colors of a theme in your Radzen Blazor application, follow these steps:
Note: Customizing the colors of the theme will affect the appearance of all components in your Radzen Blazor application. Be sure to carefully select colors that will provide a consistent and cohesive look and feel for your application.
Hint: You might notice that Lighter color shades have opacity applied to them. This is done intentionally to keep proper color contrast ratios between background and text color pairs.
Note: Theme customization is a premium feature, available for apps using the Radzen Blazor Components library.
Advanced theme customization includes the ability to edit typography, borders, shadows, modify the spacing and sizing of elements, and override default global styles for individual components. This can be useful for creating a consistent design across the application. In some cases, advanced theme customization may require knowledge of CSS.
To customize a theme in your Radzen Blazor application, follow these steps:
Note: Customized properties affect components that does not have the same properties edited locally. Local component edits (these applied via the Styles tab of the component) override the global theme styles.
You can customize the following themes properties:
The ability to export and import styles in JSON file format allows for consistent use of styles across multiple apps, making it easy to maintain a cohesive look and feel across your entire application portfolio.
Note: Export/Import of custom themes is a premium feature.
To export your custom theme, simply click on the Export styles button in the Appearance panel. Radzen Blazor Studio generates a {theme}-custom.json file that can be used as a backup or applied to another Radzen Blazor app via the import styles functionality.
To import a Radzen Blazor Studio generated theme JSON file, click on the Import styles button in the Appearance panel.
To reset a theme to its original styles, hit the Reset button in the Appearance panel.
Radzen is free to use. You can also test the premium features for 15 days.
Download NowSelect theme: