New to Telerik UI for Blazor? Download free 30-day trial

Blazor Theme Customization Options

Environment

Product UI for Blazor

Description

What is the best approach to create a base company fully customized CSS stylesheet for Telerik UI for Blazor?

How to provide visual flexibility and change the appearance of the components? How to override CSS styles with the app via style sheets or CSS isolation?

What are your recommendations to change the overall component styles? Should I modify the css manually?

Is there a simple and streamlined way to customize all component styles?

Solution

Generally, there are three ways to customize the appearance of the Telerik Blazor components. Each approach adds an extra step to every UI for Blazor version update.

  1. Use the ThemeBuilder to create a custom theme.
    • This option allows customization of the colors only.
    • Upgrading the custom theme is straight-forward via JSON file import.
  2. Build a custom theme from our SASS source.
    • This option provides full control over the resulting CSS code.
    • Upgrading requires you to pull the changes from the kendo-themes repo and rebuild the custom theme. Ideally, make only variable and style overrides with minimal edits to our source code itself. However, major customizations may require more changes and maintenance.
  3. Override theme styles with additional CSS code.
    • This approach is possible with both built-in themes or custom themes made by the ThemeBuilder.
    • This option allows full control over the styling, but makes sense only up to a certain amount of customization. Beyond that, resort to building the theme from the source.
    • Upgrading may require changes to the additional custom CSS code, but only if there are breaking changes in the HTML output and styling.

To change the sizing and layout of most or all our components, go for manual theme build. For minor adjustments here and there, consider overrides only.

The final decision depends on what and how much you need to customize and what future requirements may appear.

Figma UI Kits allow designers to include visual representations of the Telerik components in their application designs. Custom kits still require you to create a custom theme afterwards.

See Also

In this article