Available for: UI for ASP.NET MVC | UI for ASP.NET AJAX | UI for Blazor | UI for WPF | UI for WinForms | UI for Xamarin | UI for WinUI | UI for ASP.NET Core | UI for .NET MAUI

New to Telerik Document Processing? Download free 30-day trial

Document Themes

Document themes enable you to specify colors, fonts and a variety of graphic effects in a document and affect the look and feel of the whole document. Each theme contains a color scheme and a font scheme and is represented by the DocumentTheme class and can be modified by the Theme property of RadFlowDocument. Document theme contains two parts – color scheme – responsible for the colors, and font scheme – responsible for the fonts.

Color Schemes

A color scheme has a unique name and contains a number of predefined colors. Its representation in RadFlowDocument's model is the ThemeColorScheme class. A scheme defines twelve colors and each of these is assigned a sole ThemeColorType. The following list contains all ThemeColorType values:

  • background1
  • text1
  • background2
  • text2
  • accent1
  • accent2
  • accent3
  • accent4
  • accent5
  • accent6
  • hyperlink
  • followed hyperlink

The twelve color types above are used for creating ThemableColor objects. They determine the color of the scheme that appears as the actual color of the ThemableColor instance. As you change the theme or the color scheme, the actual color of the ThemeableColor object changes as well. For example, if you set the fill of a cell to be a ThemableColor, applying a new theme or another scheme also affects the solid fill.

Example 1 demonstrates how to create a ThemeColorScheme object. Note that the example passes a name and twelve colors to the constructor. Every color has a comment next to it, so you can see its corresponding ThemeColorType.

Example 1: Create a ThemeColorScheme object

ThemeColorScheme colorScheme = new ThemeColorScheme( 
    Colors.Black,     // background 1 
    Colors.Blue,      // text 1 
    Colors.Brown,     // background 2 
    Colors.Cyan,      // text 2 
    Colors.DarkGray,  // accent 1 
    Colors.Gray,      // accent 2 
    Colors.Green,     // accent 3 
    Colors.LightGray, // accent 4 
    Colors.Magenta,   // accent 5 
    Colors.Orange,    // accent 6 
    Colors.Purple,    // hyperlink 
    Colors.Red);      // followedHyperlink 

There are several ways to create a ThemableColor object:

  • Passing two parameters to the constructor – ThemeColorType and double.

    • ThemeColorType is an enum which has twelve possible values (the aforementioned color types).

    • The second parameter is of type double and should be between -1 and 1. It represents the tint and shade to be applied to the selected color.

  • Passing ThemeColorType and ColorShadeType.

    • ThemeColorType is the same as in the previously mentioned constructor.

In order to create colors that depend on the current document theme, you need to use ThemableColor objects.

Example 2: Create a ThemableColor object

ThemableColor themableColor = new ThemableColor(ThemeColorType.Accent1); 

Font Schemes

A font scheme is represented by the ThemeFontScheme class. Every font scheme consists of a name and a number of predefined font families. Each font family corresponds to one of two font types:

  • Major

  • Minor

The code in Example 3 illustrates how to create a ThemeFontScheme object. A name and two font family names are passed to the font scheme constructor. The former font family name corresponds to the Major ThemeFontType and the latter - to the Minor.

Example 3: Create a ThemeFontScheme

    ThemeFontScheme fontScheme = new ThemeFontScheme( 
        "Times New Roman",   // Major 
        "Arial");          // Minor 

In order to use the document theme's fonts you need to use ThemableFontFamily objects. Again, there are several ways you can create one:

  • Passing a ThemeFontType object as a constructor parameter – this way you will bind the object being created to the currently selected document theme.

  • Passing a FontFamily object or a string representing a FontFamily name – the result would be a static FontFamily, meaning it will not be changed when the document theme is changed.

When you need to create a font that depends on the current document theme, you need to use ThemableFontFamily objects.

Example 4: Create a ThemableFontFamily object

ThemableFontFamily themableFont = new ThemableFontFamily(ThemeFontType.Major); 

Document Themes

Now that you have a color and a font schemes, you can create a new DocumentTheme. You need to specify a name and pass the already created color and font schemes.

Example 5: Create a DocumentTheme object

DocumentTheme theme = new DocumentTheme("Mine", colorScheme, fontScheme); 

There are a number of predefined color and font schemes. You can find them in a static class called PredefinedThemeSchemes. The class exposes the properties ColorSchemes and FontSchemes that hold all predefined schemes.

Example 6: Using a predefined scheme

DocumentTheme theme1 = new DocumentTheme("From Predefined schemes", PredefinedThemeSchemes.ColorSchemes[0], PredefinedThemeSchemes.FontSchemes[5]); 

Changing the current document theme is as easy as setting a single property.

Example 7: Change the document theme

RadFlowDocument document = new RadFlowDocument(); 
document.Theme = theme; 

Getting Actual Values

In order to get the actual value from ThemableColor or ThemableFontFamily, you need to call the GetActualValue() method on the corresponding object.

Example 8: Get actual value from ThemableColor

Color actualColor = themableColor.GetActualValue(theme); 
// The actual color is the same as Accent1 color of the colorScheme. 

Example 9: Get actual value from ThemableFont

var actualFont = themableFont.GetActualValue(theme); 
// The actualFont is the same as the Major font of the fontScheme. 

See Also

In this article