Edit this page

Fluent Themes Blending

Telerik UI for WinForms suite offers a touch optimized theme which provides additional features such as custom fonts, built-in animations and shadows. The Visual Style Builder tool provides a functionality to blend the colors of an existing theme so that a completely new theme can be created for couple of minutes.

The Fluent themes as well as the Material themes are designed to work with predefined set of colors - primary and accent for the Material themes, and entire palettes for the Fluent themes. The tutorial here will demonstrate how a new Fluent theme can be created. The same steps can be also followed with the FluentDark theme.

Figure 1: Fluent Theme

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 001

Figure 2: Fluent Dark Theme

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 001

Generate Fluent Variation

Visual Style Builder provides an easy way to generate different color variations of the Fluent and FluentDark themes. Fluent theme blending uses the basic Fluent theme by executing a series of predefined commands.

Select Tools >> Generate Fluent Variation menu item:

Figure 3: Generate Fluent Variation

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 002

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 006

note

If you already have loaded a customized Fluent theme (but not a Fluent variation) it will remain loaded when generating a Fluent variation.

This will open the Fluent Blend Dialog from which you can create a new palette or modify the selected one.

Figure 4: Fluent Blend Dialog

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 003

If you click the Generate theme button, a new variation of the Fluent theme will be exported using the selected colors.

Figure 5: Save the Theme

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 004

After loading the custom theme in Theme Viewer the primary/accent colors are replaced:

Figure 6: Load FluentGreen theme variation

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 005

Figure 7: Load FluentDarkGreen theme variation

tools-visual-style-builder-working-with-visual-style-builder-fluent-themes-blending 005

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy