Edit a Radzen Blazor 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.

How-to video

Basic color customization

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:

1. Open a .razor file from your Radzen Blazor project in Radzen Blazor Studio.
2. In the left-hand Navigation bar, click on the Appearance option. This opens the Appearance panel.
3. (Optional) Select the theme to customize from the dropdown at the top of the Appearance panel
4. (Optional) Select a theme swatch from the available list of Swatches.
5. In the Colors section, you will see a list of color pickers. Each picker represents a different color that is used in the theme.
6. To customize a color, simply click on the color picker and select a new color. Repeat this process for each color that you want to customize.

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.

Advanced theme customization

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:

1. Open a .razor file from your Radzen Blazor project in Radzen Blazor Studio. Make sure the file contains the HTML elements or components that you would like to customize, so that you can instantly preview the customizations you make.
2. In the left-hand Navigation bar, click on the Appearance option. This opens the Appearance panel.
3. Find the customization section or Radzen Blazor component to modify
4. Adjust any of the available properties as you see fit and repeat this process for each property that you want to customize.

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:

• Typography such as base font size and font family
• Application or component background colors
• Base Icon size
• Predefined sets of theme Borders, Shadows and Transitions
• All theme defined properties and interaction states of Radzen Blazor components

Export and Import styles

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.

Export styles

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.

Import styles

To import a Radzen Blazor Studio generated theme JSON file, click on the Import styles button in the Appearance panel.

Reset a customized theme

To reset a theme to its original styles, hit the Reset button in the Appearance panel.