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.
-
Use the ThemeBuilder to create a custom theme.
- This option allows customization of the theme colors with the free version, or full control with the Pro version.
- Upgrading the custom theme is straight-forward via manual or automatic approach.
-
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-themesrepo 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.
-
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.