ClientTheme

Namespace: Wisej.Core

Assembly: Wisej.Framework (2.5.0.0)

Represents a Wisej theme.

public class ClientTheme : IWisejSerializable

Public Class ClientTheme
    Inherits IWisejSerializable

You can create a new custom theme based on an existing theme, empty, or initialized from a JSON string.

// 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);

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 ToJSON extension method added to all objects by the Wisej framework.

Constructors

ClientTheme(name)

Default private constructor.

ClientTheme(name, json)

Constructs a new theme from the name and JSON definition.

Constructs a new theme from the base theme.

Properties

Object: 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.

// 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;

Object: Theme colors.

You can add or change any color in the current theme:

// 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";

Object: 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:

// make the window title bigger and bold.
Application.Theme.Fonts.windowTitle.size = 18;
Application.Theme.Fonts.windowTitle.bold = true;

Object: 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.

String: The name of the theme.

Object: 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.

Object: 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.

// create a custom css rules in the theme.
Application.Theme.Stylesheet.rules = new []{

  "body: { background-color: red };",
  ".myClass: { background-color: red };"
};

Methods

Returns the resolved color defined in the theme for the specified appearance, property or style name and optionally the state.

Returns: Color. A Color representing the color in the theme.

Returns the resolved theme color from the color list.

Returns: Color. A Color 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: Font. A Font representing the queried font or null if not found.

Returns the resolved font defined from the font list.

Returns: Font. A Font 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: Image. A Image 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: Image. A Image 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: Padding. Dimension of the border and optionally the padding as a Padding value

Returns the property value for the specified name and state within the specified appearance key.

Returns: T. 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: T. The typed value of the requested style, or default(T) if not found.

Returns true if the color is a theme color.

Returns: Boolean. True if color is a theme color.

Since the theme may also define SystemColors, using IsThemeColor 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: Boolean. True if font is a theme font.

Theme fonts (font's with the OriginalFontName 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 OriginalFontName 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 Color 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: Color. A Color instance with the resolved RGB values.

Returns the resolved Font from the theme font. If the font is a theme font, the value is resolved from current theme.

Returns: Font. A Font instance that can be used directly.

Implements