aspnet-118729-common-concepts-appearance-customization-theming-changing-theme-base-color-and-font-settings.md
We introduced an option to modify a theme’s base color (for certain themes) and font settings in v16.2.
The following API enables you to change a theme’s base color and font settings declaratively in the web.config file or programmatically at runtime.
baseColorSpecifies the name of a theme’s base color that is globally applied to all DevExpress controls within a website. Refer to the following help topic to learn more: Theme Base Color.fontSpecifies font settings for a theme that is globally applied to all DevExpress controls within a website. See the following topic for more information: Theme Font Settings.
<configuration>
...
<devExpress>
...
<themes enableThemesAssembly="true" styleSheetTheme="" theme="Metropolis"
customThemeAssemblies="" baseColor="Green" font="30px 'Calibri'" />
...
</devExpress>
...
</configuration>
ASPxWebControl.GlobalThemeBaseColorGets 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.GlobalThemeFontGets 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.
protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
// ...
DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "Green";
DevExpress.Web.ASPxWebControl.GlobalThemeFont = "30px 'Calibri'";
}
Protected Sub Application_PreRequestHandlerExecute(ByVal sender As Object, ByVal e As EventArgs)
' ...
DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "Green"
DevExpress.Web.ASPxWebControl.GlobalThemeFont = "30px 'Calibri'"
End Sub
If theme settings (base color or font) are defined both declaratively (in the web.config file) and programmatically, settings specified programmatically via static properties (GlobalThemeBaseColor and GlobalThemeFont) are applied.
The following formats are used when you specify values for a theme’s base color and font.
Specify the color value in HTML format. The following formats will be parsed correctly:
RGB or RGBA colorsNote that for RGBA colors, the alpha parameter is not applied.
Examples: "rgb(255, 0, 0)", "rgba(0, 255, 0, 0.3)"Hexadecimal colorsSix-digit (#rrggbb) and three-digit (#rgb) formats are allowed.
Examples: "#FFF000", "#FFF"Color namesNote that color names are not case-sensitive.
Examples: "Red", "green"
Use a value that sets all font properties in one declaration. Refer to the following section of the W3C website to learn more: Shorthand font property: the font property.
You can set the following font properties: font-style, font-variant, font-weight, font-size/line-height, font-family”
Values are required for font-size and font-family.
DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "#00FF00";
DevExpress.Web.ASPxWebControl.GlobalThemeFont = "14px 'Segoe UI', Helvetica, Geneva, sans-serif";
DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "#00FF00"
DevExpress.Web.ASPxWebControl.GlobalThemeFont = "14px 'Segoe UI', Helvetica, Geneva, sans-serif"
Important
Font Value Validation Required
In contrast to the base color value (which is validated by DevExpress internal code), the font value is validated only if you select it from a list of predefined valid values. A custom font value should be validated manually to protect the application from potential malicious modifications.
Base color and font values are only applied to a global theme, which is defined via static properties (ASPxWebControl.GlobalTheme - for Web Forms, DevExpressHelper.Theme - for MVC) or within 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 themes that support base color and/or font parameters.
|
Supported Parameter
|
Theme Name
| | --- | --- | |
Base Color and Font
Both base color and font can be changed.
|
iOS,
Material,
MaterialCompact,
Metropolis,
MetropolisBlue,
Moderno,
Mulberry,
Office365,
Office365Dark
| |
Font
Only font can be changed.
The base color value is ignored.
|
Aqua,
BlackGlass,
DevEx,
Glass,
Office2003Blue, Office2003Olive, Office2003Silver,
Office2010Black, Office2010Blue, Office2010Silver,
PlasticBlue,
RedWine,
SoftOrange,
Youthful
|
If you only need to change part of a font setting (e.g., font size) and leave other settings unchanged (default), use the theme’s default 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”
| |
Office365,
Office365Dark
|
Font: “14px ‘Segoe UI’, Helvetica, ‘Droid Sans’, Tahoma, Geneva, sans-serif”
Base Color: “#F87C1D”
|
The code sample below demonstrates how to set the font size for the Aqua theme to 20px, specify the font value in the following manner.
DevExpress.Web.ASPxWebControl.GlobalThemeFont = "20px Tahoma, Geneva, sans-serif";
DevExpress.Web.ASPxWebControl.GlobalThemeFont = "20px Tahoma, Geneva, sans-serif"
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.
See Also