[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Expand]Client-Side Functionality
  [Expand]Cookies Support
  [Collapse]Appearance Customization - Theming
    DevExpress Themes Overview
    Available Themes
    ASPxThemes Assembly
    Modifying Themes
    Changing Theme Base Color and Font Settings
    ASPxThemeDeployer Tool
    ASPxThemeBuilder Tool
    Apply a Theme with the DevExpress Mechanism
    Apply a Theme with the ASP.NET Mechanism
    Attaching a Custom Theme Assembly
    DevExpress Resource Management Mechanism
   [Expand]Obsolete Approaches (prior to 2012.1)
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Data Annotation Attributes
   Supported Document Types
  [Expand]Accessibility Support
   Right to Left Support
   HTML Encoding
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Changing Theme Base Color and Font Settings

Starting with v16.2, there is an option to modify an applied theme's base color (for certain themes) and font settings.

Expanded Available API

The following API enables you to change the theme base color and font settings declaratively in the web.config file or programmatically at runtime.

  • Web.config Options

    • baseColor

      Specifies the name of the base color for the theme to be globally applied to all DevExpress controls within a website. Refer to the Theme Base Color topic to learn more.

    • font

      Specifies the font settings for the theme to be globally applied to all DevExpress controls within a website. See the Theme Font Settings topic for more information.

    Example:

  • Programmatic API

    • For ASP.NET WebForms Controls:

      Static Property Description
      ASPxWebControl.GlobalThemeBaseColor Gets or sets the base color for the theme to be globally applied to all DevExpress web controls across a web page or entire web site.
      ASPxWebControl.GlobalThemeFont Gets or sets the font settings of the theme to be globally applied to all DevExpress web controls across a web page or entire web site.

      Example:

    • For ASP.NET MVC Extensions:

      Static Property Description
      DevExpressHelper.GlobalThemeBaseColor Gets or sets the base color for the theme to be globally applied to all DevExpress MVC extensions across a web page or entire web site.
      DevExpressHelper.GlobalThemeFont Gets or sets the font settings of the theme to be globally applied to all DevExpress MVC extensions across a web page or entire web site.

      Example:

If theme settings (the base color or font) are defined declaratively in web.config and programmatically, the settings specified programmatically via static properties (GlobalThemeBaseColor and GlobalThemeFont) take priority.

Expanded Value Formats

The following formats are used when specifying values for a theme's base color and font.

  • For Base Color

    Use a color value in HTML format. The following formats will be parsed correctly:

    • RGB or RGBA colors - Note that the alpha parameter is not taken into account for RGBA colors

      Examples: "rgb(255, 0, 0)", "rgba(0, 255, 0, 0.3)"

    • Hexadecimal colors - in six-digit (#rrggbb) or three-digit (#rgb) form

      Examples: "#FFF000", "#FFF"

    • Color names - Note that color names are case-insensitive

      Examples: "Red", "green"

  • For Font

    Use a value that sets all font properties in one declaration. Refer to the CSS shorthand font property to learn more.

    The font properties that can be set are as follows: "font-style font-variant font-weight font-size/line-height font-family"

    The font-size and font-family values are required. If one of the other values are missing, default values will be inserted, if any.

Example:

Important

Font Value Validation Required

In contrast to the base color value (which is validated by DevExpress internal code), the font value is not validated by default. This value must be validated manually, or set from a list of predefined valid values, to protect the application from potential malicious modifications.

Expanded Limitations

The specified values for the base color and font are applied only to a global theme, which is defined using static properties (ASPxWebControl.GlobalTheme - for WebForms, DevExpressHelper.Theme - for MVC) or through the web.config option (theme). If a global theme is not defined, the specified base color and font settings are not in effect.

The table below lists available themes and describes which parameters (base color or font) can be specified.

Supported Parameter

Theme Name

Base Color and Font

Both base color and font can be changed.

iOS,

Material,

MaterialCompact,

Metropolis,

MetropolisBlue,

Moderno,

Mulberry

Font

Only font can be changed.

The base color value setting is ignored.

Aqua,

BlackGlass,

DevEx,

Glass,

Office2003Blue, Office2003Olive, Office2003Silver,

Office2010Black, Office2010Blue, Office2010Silver,

PlasticBlue,

RedWine,

SoftOrange,

Youthful

For the font value, if you only need to change part of a font setting (such as font size or font family) and leave other settings unchanged (default), use the theme-related default font value as the font value and modify its parts as required. Default theme settings are listed in the table below.

Theme Name

Default Value (case and whitespace are important)

Aqua,

Black Glass,

Glass,

Office2003Blue, Office2003Olive, Office2003Silver

PlasticBlue,

RedWine,

SoftOrange,

Youthful

Font:

"12px Tahoma, Geneva, sans-serif"

DevEx,

Office2010Black, Office2010Blue, Office2010Silver

Font: "11px Verdana, Geneva, sans-serif"

IOs

Font:"14px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif"

Base Color: "#007BF7"

Material

Font:"14px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif"

Base Color: "#009688"

MaterialCompact

Font:"14px 'Roboto Regular', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif"

Base Color: "#35B86B"

Metropolis

Font:"12px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif"

Base Color: "#FF8800"

MetropolisBlue

Font:"12px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif"

Base Color: "#0072C6"

Moderno

Font:"14px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif"

Base Color: "#1279C0"

Mulberry

Font:"14px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif""

Base Color: "#BF4E6A"

Example:

To set the font size for the Aqua theme to 20px, specify the font value in the following manner.

Note that you can set a theme's base color and font when using custom theme assemblies, but not when applying a theme with the ASP.NET Mechanism.

Expanded See Also

Is this topic helpful?​​​​​​​