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

Elements in the main Theme Builder Window

Element	Description
	Creates a new theme.	Read more.
	Loads an existing theme.	Read more
	Saves the theme being edited.
	Saves the theme being edited to a different file.
	Dropdown list with the preloaded themes. You can switch the theme being edited using this list.
	Reloads the current theme. It may be useful if the preview window gets messed up after a while.
	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.
	Enables or disables right-to-left alignment and layout. When Right To Left is ON, the preview scripts create the widgets setting the rtl and rtlLayout property to true, which adds the "RightToLeft" state to the widgets that support RTL mode.
	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
	Deletes the selected element.
	Renames the selected element.
	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.
	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.
	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.
	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.
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.

Other Resources