Themes

Every Wisej.NET application is styled by a theme: a single JSON file (.theme) that defines the fonts, colors, icons and the appearance of every control and every state (hovered, pressed, disabled, focused…). The themes listed on this page are built into Wisej.NET: they're embedded in the framework assembly, so they need no package and no deployment.

This page is the catalog. How to switch themes, set the default and change them at run time is covered in Theming in the user guide. Creating and editing themes is covered in the Theme Builder manual.

Naming convention

A theme name has two parts: the color scheme before the dash and a number after it. For most themes, the number tells you which family of SVG icons the theme uses:

Suffix	Icon set	Themes
-1	Font Awesome	Blue-1, Clear-1
-2	Icons8 (licensed by Ice Tea Group)	Blue-2, Clear-2, Classic-2, Vista-2
-3	Google Material	Blue-3, Clear-3, Graphite-3, Material-3
-4	Bootstrap Icons	Bootstrap-4, BootstrapDark-4
-5	Fluent UI	FluentLight-5, FluentDark-5

note

Material-4 and MaterialDark-4 are the exception: the 4 marks a new generation of the Material theme, and both use the same Google Material icons as the -3 themes.

Every theme icon has a name such as icon-print or icon-search. You can use these names in any ImageSource property, and the icon changes with the theme. See Theme Images. For more icons than the theme provides, add an icon pack. Several packs match a theme's icon family: FontAwesome for the -1 themes and BootstrapIcons for the -4 themes.

Built-in themes

Wisej.NET 4.1 includes these 16 themes. New projects start with Bootstrap-4.

Theme	Description	Preview
Bootstrap-4	Based on Bootstrap, with its distinctive colors, focus shadow and Bootstrap icons. The default theme of new projects.
BootstrapDark-4	The dark variant of Bootstrap-4: dark background and light text.
FluentLight-5	Based on the Microsoft Fluent Design System, with Fluent UI icons. New in 4.1.	—
FluentDark-5	The dark variant of FluentLight-5. New in 4.1.	—
Material-4	A modern theme inspired by Google Material Design, with Material icons. New in 4.1.	—
MaterialDark-4	The dark variant of Material-4. New in 4.1.	—
Material-3	The earlier Material Design theme, with sleek animations, a large window caption and a minimalist layout.
Blue-1	Blue base color and thick window borders, with Font Awesome icons.
Blue-2	Blue base color, a thick window caption and no side window borders, with Icons8 icons.
Blue-3	Blue base color and thick window borders, with Google Material icons.
Clear-1	Light base color, a thick window caption and no side window borders, with Font Awesome icons.
Clear-2	Light base color, a thick window caption and no side window borders, with Icons8 icons.
Clear-3	Light base color, a thick window caption and no side window borders, with Google Material icons.
Classic-2	A classic desktop look with a light window caption, with Icons8 icons.
Vista-2	Based on the Windows Vista metrics, fonts and design.
Graphite-3	Dark graphite captions and overlapped scrollbars that appear only while scrolling, similar to Windows UWP apps.

The four themes added in 4.1 are shown in Fluent Themes and Icons, in the What's new in 4.1 section.

Loading a theme

Set the default theme in Default.json, or switch at run time with Application.LoadTheme():

Default.json

{
  "theme": "FluentLight-5"
}

C#

// Switch the whole application to the dark Fluent theme.
Application.LoadTheme("FluentDark-5");

VB.NET

' Switch the whole application to the dark Fluent theme.
Application.LoadTheme("FluentDark-5")

warning

Changing the theme in the Visual Studio designer only changes the design-time preview. Set it in Default.json or in code to change what users see. See Changing Themes.

Customizing a theme

There are two ways to change a built-in theme. Prefer the first:

• A theme mixin (.mixin.theme) is a partial theme that Wisej.NET applies on top of whichever theme is loaded. It contains only what you change (a color, a font, one appearance), so it keeps working when you switch themes or upgrade Wisej.NET. Many extensions style themselves with a mixin in the same way. See Edit a Mixin.
• A custom theme is a full copy of a theme under a new name. Start from one of the built-in themes in the Theme Builder (Create a New Theme) and save it into your project's Themes folder.

Overriding a built-in theme

A theme file deployed in the Themes folder takes precedence over an embedded theme with the same name. See Themes Folder. Even so, a mixin or a theme with a new name is easier to maintain than a patched copy of a built-in theme, which you'd have to merge again with each Wisej.NET release.

Theme source on GitHub

The JSON definitions of the themes are published in the wisej-themes repository, so you can study how an appearance is built or compare a theme between releases. The newest branch is 4.0. It has the twelve themes that predate 4.1, but not the four themes added in 4.1.