Click or drag to resize
Theme Builder

Wisej Theme Builder allows you to edit or create themes and theme mixins for your Wisej applications.

The Wisej theme system is quite sophisticated and goes beyond simple CSS or SASS. Themes in Wisej are single JSON files that define colors, images, fonts, and appearances that control all visual aspects of Wisej controls.

Getting Started
Main Theme Builder Window
preview-1
Elements in the main Theme Builder Window

Element

Description

create New Theme.Image

Creates a new theme.

Read more.

load Theme.Image

Loads an existing theme.

Read more

save Theme.Image

Saves the theme being edited.

save Theme As.Image

Saves the theme being edited to a different file.

preloaded-selector

Dropdown list with the preloaded themes. You can switch the theme being edited using this list.

reload.Image

Reloads the current theme. It may be useful if the preview window gets messed up after a while.

live-update

Enables or disables the live-update mode. When live update is ON, the preview window shows any change to the theme immediately. Turn it OFF to apply several changes in a sequence and save the time it takes to refresh the preview.

add.Image

Adds a new element or a new value to the theme.

A new element can be a Color, an Image, a Font, an Appearance, a State or a Component.

A new value can be a Style or a Property. The type of element or value that is added depends on the selected node in the components.

Colors

Images

Fonts

Appearances

Components

States

Styles

Properties

delete.Image

Deletes the selected element.

rename.Image

Renames the selected element.

move Left.Image

Demotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component.

move Right.Image

Promotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component.

move Down.Image

Moves the selected element down. This button is enabled only when the selected element is a state a component or an appearance.

Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.

The Default state is always the first state in the list.

move Up.Image

Moves the selected element up. This button is enabled only when the selected element is a state a component or an appearance.

Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.

The Default state is always the first state in the list.

clicked Appearance.Image Last Clicked

Shows the full appearance path of the last clicked widget in the preview window. The appearance key may not be present in the theme definition tree for several reasons: a) it could be a custom key defined in your application or an extension; b) it's child component that is not themed (doesn't need to be); c) it's a new widget that wasn't themed.

The Last Clicked information allows you to add the specific appearance key when needed.

Appearances

Theme Builder and Graphic Designers

The Wisej Theme Builder application is a single executable without any dependencies from other Wisej assemblies, and it doesn't require any installation.

You can provide the Wisej.ThemeBuilder.exe to other developers or graphic designers to let them work on themes without using Visual Studio or any other Wisej assembly.

See Also