Edit a Radzen Blazor Themelink

The Appearance panel in Radzen Blazor Studio lets you easily customize the global look and feel of your application — live, as you work.

How-to Videolink

Basic Color Customizationlink

Note:
Color customization is a premium feature and is available only for apps that use the Radzen Blazor Components library.

Follow these steps to customize your app’s theme colors:

1. Open a .razor file from your Radzen Blazor project in Radzen Blazor Studio.
2. In the left-hand Navigation bar, click Appearance to open the panel.
3. (Optional) Choose the theme you want to edit from the dropdown at the top.
4. (Optional) Pick a swatch from the list of available Swatches.
5. In the Colors section, you’ll see color pickers for each theme color.
6. Click a color picker and select new colors for your app. Repeat as needed.

All color changes are saved automatically to your app’s site.css file (wwwroot/css/site.css). You can open and edit this file directly if you want to fine-tune styles manually.

Note:
Changing theme colors affects all components in your application. Choose colors that work well together for a consistent look.

Tip:
Some lighter shades have built-in opacity. This helps maintain good contrast between backgrounds and text.

Advanced Theme Customizationlink

Note:
Advanced theme customization is a premium feature available for apps using the Radzen Blazor Components library.

Advanced customization lets you control more aspects of your app’s design — such as typography, borders, shadows, spacing, and component sizing.
You can also override default global styles for individual components. Some changes may require basic CSS knowledge.

Stepslink

1. Open a .razor file that includes the elements or components you want to style, so you can preview your changes live.
2. In the left-hand Navigation bar, click Appearance to open the panel.
3. Find the section or component you want to customize.
4. Adjust the available properties as needed. Repeat for each setting you want to change.

Note:
Global theme customizations affect components unless they have styles edited locally in the Styles tab.
Local edits override global styles.

Important:
Any adjustments made through the Appearance panel are stored in your project’s site.css file (wwwroot/css/site.css).
This means you can reuse or modify those styles directly if you need to adjust them outside Radzen Blazor Studio.

You can customize:

• Typography (base font size, font family)
• Background colors for components or the app
• Base icon size
• Theme-defined borders, shadows, and transitions
• All theme properties and interaction states for Radzen Blazor components

Export and Import Styleslink

Exporting and importing themes in JSON format makes it easy to reuse the same styles across multiple apps, ensuring a consistent design.

Note:
Exporting and importing custom themes is a premium feature.

Export Styleslink

To export your theme:

1. Click Export styles in the Appearance panel.
2. Radzen Blazor Studio will create a file named {theme}-custom.json.
   You can use it as a backup or import it into another Radzen Blazor project.

Import Styleslink

To import a custom theme:

1. Click Import styles in the Appearance panel.
2. Select a JSON theme file created by Radzen Blazor Studio.
   The imported styles will be applied automatically.

Reset a Customized Themelink

To restore a theme to its original design, click Reset in the Appearance panel.
This removes all customizations and reloads the default theme styles.

Tip for Teamslink

Since all theme changes are saved to site.css, you can easily version-control them with Git or any other source control system.

This makes it simple for teams to review, share, and roll back design updates as part of your regular development workflow.