Progress ThemeBuilder
ThemeBuilder is a SaaS tool that enables you to create custom themes and instantly preview how they affect the appearance of the components. The tool generates a CSS file that you can use in your Blazor app instead of a built-in theme.
Key Procedures
Visit the ThemeBuilder documentation to learn how to:
- Create a custom theme.
- Migrate custom themes to new component versions automatically or manually.
- Export and use a theme in your Blazor app.
Key Features
Whether you're developing a custom design system or applying a consistent look and feel across your applications, ThemeBuilder streamlines the process. Its features reduce the complexity of manual CSS/SASS adjustments and enable easy collaboration.
Atomic Customization
ThemeBuilder gives you full control over your components' styles. From high-level settings such as color schemes and typography to detailed adjustments for specific elements and states, you can fine-tune the look of every UI component and its parts. This flexibility ensures that your components not only look great but also match your brand's guidelines.
Custom SASS/CSS Variables
Simplify your workflow with ThemeBuilder’s support for SASS and CSS variables. Create and manage multiple variables as a single source of truth for your styles—adjusting one variable updates the appearance of multiple components across your project. This ensures consistency and saves time by eliminating repetitive editing.
Custom HTML Support
In ThemeBuilder, you can work not only with Telerik and Kendo UI components but also with custom HTML elements. This flexibility lets you style entire web UIs, ensuring a consistent look across projects that combine your own components with the Telerik and Kendo UI controls.
Figma Integration
ThemeBuilder’s Figma integration allows you to export Figma variables directly to SASS/CSS variables including colors, typography, metrics, and more. Designers can now collaborate seamlessly with developers, ensuring that the design intent translates perfectly into the final product.
Theme Modes and Built-In Themes
ThemeBuilder comes with five built-in themes—Material, Bootstrap, Fluent, Default, and Classic—that provide a solid foundation for your design. You can also switch between light and dark modes, enabling quick implementation of modern UI practices.
Importing and mapping of Figma variables to ThemeBuilder modes is also supported.
Custom Fonts and Iconography
ThemeBuilder also enables you to upload and use custom fonts and icons, making it easy to apply your brand's unique visual identity.
Project Sharing, Version Control, and Collaboration
ThemeBuilder’s features such as project sharing, version control, and user access rights make it easy for multiple users to work together without overwriting each other’s changes. Every project can be versioned, enabling you to roll back to earlier designs and maintain a detailed history of your progress.