Wisej.Core.ClientTheme
Namespace: Wisej.Core
Assembly: Wisej.Framework (2.5.0.0)
Represents a Wisej theme.
public class ClientTheme : IWisejSerializablePublic Class ClientTheme
Inherits IWisejSerializableYou can create a new custom theme based on an existing theme, empty, or initialized from a JSON string.
You can alter any aspect of a theme by using the dynamic properties: Colors, Images, Fonts, Appearances, Settings, and Stylesheet. These properties, being dynamic, can support any field and any structure. To alter these properties in a way that doesn't break the theme, look at the theme's structure in the ThemeBuilder or a text editor. To save a custom theme you may convert it to a JSON string simply by calling the extension method added to all objects by the Wisej framework.
Default private constructor.
Constructs a new theme from the name and JSON definition.
Constructs a new theme from the base theme.
: Theme appearances.
This is a complex dynamic object with several child objects. The structure can get quite complicated. Before messing with the Appearances object, please study the structure of the themes using the ThemeBuilder or a text editor. Being a dynamic object, you can either create a new appearance or alter an existing appearance at any level.
: Theme colors.
You can add or change any color in the current theme:
: Theme fonts.
You can add or alter any font to the theme. The structure of the font definition can get complicated. Please refer to the existing themes and the ThemeBuilder to determine the structure to use. The simplest way is to change an existing theme font:
: Theme images.
You can add or change any theme image. Images in the theme are just URLs but can be defined in several ways:
Absolute URL An URL starting with http: or https: pointing to an image resource.
Relative URL An URL relative to the current site or relative to value of Images.baseUrl.
base64 A base64 encoded embedded image.
: The name of the theme.
: Theme settings.
The Settings property, added in Wisej 2, allows a theme to define certain internal properties. Currently these are the supported properties:
native-scrollbars Instructs Wisej to use the native scrollbars instead of the themed scrollbars. Setting this property can have negative side effects for virtual scrolling widgets like the DataGridView. The default is false.
overlapped-scrollbars Instructs Wisej to layout the scrollbars over the content being scrolled, similar to Windows' fluent themes or mobiles. The default is false.
: Stylesheet rules embedded in the theme.
The Stylesheet property is a new theme property added since Wisej 2.0. It allows a theme to define a set of CSS rules, just as if Default.html specified a css file. This property has only one string array field: "rules". When the theme is rendered, the client library joins all the rules into a css string and creates a stylesheet loaded into the browser.
Returns the resolved color defined in the theme for the specified appearance, property or style name and optionally the state.
Returns: . A representing the color in the theme.
Returns the resolved theme color from the color list.
Returns: . A representing the color in the theme.
Returns the resolved font defined in the theme for the specified appearance, property name and optionally the state.
Returns: . A representing the queried font or null if not found.
Returns the resolved font defined from the font list.
Returns: . A representing the queried font or null if not found.
Returns the resolved image defined in the theme for the specified appearance, property or style name and optionally the state.
Returns: . A representing the queried image or null if not found. SVG images at runtime always return null, they are resolved only at design time.
Returns the resolved image defined from the image list.
Returns: . A representing the queried image or null if not found. SVG images at runtime always return null, they are resolved only at design time.
Returns the size of the inset border and padding.
Returns: . Dimension of the border and optionally the padding as a value
Returns the property value for the specified name and state within the specified appearance key.
Returns: . The typed value of the requested property, or default(T) if not found.
Returns the style value for the specified name and state within the specified appearance key.
Returns: . The typed value of the requested style, or default(T) if not found.
Returns true if the color is a theme color.
Returns: . True if color is a theme color.
Since the theme may also define , using on a system color returns false, but the rendering on the browser will use the color in the theme, if defined.
Returns true if the font is a theme font.
Returns: . True if font is a theme font.
Theme fonts (font's with the starting with "@") are always rendered using the definition in the theme for their size and style. However, an application may use a theme font and change the size and style. In this case, the is the theme name without the "@". If the name of the font (which could be a system name like "Arial") matches a theme font, Wisej will use the theme font but it uses the size and style set by the application.
Returns the resolved with the proper RGB values. If the color specified in color is a theme color, the value is resolved from the current theme, otherwise the original color is returned.
Returns: . A instance with the resolved RGB values.
Returns the resolved from the theme font. If the font is a theme font, the value is resolved from current theme.
Returns: . A instance that can be used directly.
// create a new custom theme cloned from the current theme.
var myTheme1 = new ClientTheme("MyTheme1", Application.Theme);
// create a new custom theme from a JSON string.
var myTheme2 = new ClientTheme("MyTheme2", json);The state that defines the property. It can omitted, the default state is "default".
The state that defines the property. It can omitted, the default state is "default".
name
Unique name of the theme.
name
Unique name of the theme.
json
JSON definition of the theme.
name
Unique name of the theme.
baseTheme
Original theme to copy into the new theme.
appearance
The appearance path that identifies the component in the theme. Nested appearances can be specified using a forward slash: i.e. window/captionbar.
name
The name of the property or the style value to query.
state
The name of the state to query. It's optional. The default is "default".
name
The name of the color to resolve from the color list.
appearance
The appearance path that identifies the component in the theme. Nested appearances can be specified using a forward slash: i.e. window/captionbar.
name
The name of the property value to query.
state
The name of the state to query. It's optional. The default is "default".
name
appearance
The appearance path that identifies the component in the theme. Nested appearances can be specified using a forward slash: i.e. window/captionbar.
name
The name of the property or the style value to query.
state
The name of the state to query. It's optional. The default is "default".
name
appearance
The name of the appearance in the theme. Child component appearances can be specified using the forward slash, i.e. "button/icon".
state
The state that defines the property. It can omitted, the default state is "default".
includePadding
Whether to include padding in the insets dimension.
T
The Type of the value to retrieve.
appearance
The name of the appearance in the theme. Child component appearances can be specified using the forward slash, i.e. "button/icon".
name
The name of the property to retrieve.
T
The Type of the value to retrieve.
appearance
The name of the appearance in the theme. Child component appearances can be specified using the forward slash, i.e. "button/icon".
name
The name of the property to retrieve.
color
Color to check.
font
Font to check.
color
The Color to resolve to a usable value.
font
The Font to resolve to a usable instance.
Allows an object to serialize itself.
state
state
// alter the border of buttons.
// note that when there is a keyword clash you can use the @ prefix.
Application.Theme.Appearances.button.states.@default.styles.width = 3;
Application.Theme.Appearances.button.states.@default.styles.radius = 0;
// additionally, you my use a string indexer to reach any property.
Application.Theme.Appearances.button.states["default"].styles.radius = 0;
// change existing color.
Application.Theme.Colors.buttonFace = "red";
// create a new color.
Application.Theme.Colors.myCoolColor = "rgba(5,23,55,0.9)";
// since the theme objects are all dynamic and use a special DynamicObject
// class part of the Wisej Framework, you can also use a string indexer
// to address any field.
Application.Theme.Colors["buttonFace"] = "red";
// make the window title bigger and bold.
Application.Theme.Fonts.windowTitle.size = 18;
Application.Theme.Fonts.windowTitle.bold = true;
// create a custom css rules in the theme.
Application.Theme.Stylesheet.rules = new []{
"body: { background-color: red };",
".myClass: { background-color: red };"
};