Skip to main content

Theme Files

PPJ Web uses the Wisej.NET theme system. A theme is a JSON document defining named colors, images, fonts, and control appearances. Reusing named resources lets a single change update related controls consistently. Desktop .vssf skins are a different format.

Use the Theme Builder documentation for the complete schema and editing tools. The examples below are small complete JSON objects illustrating individual sections; merge them into a theme rather than treating each as a complete application theme.

Images​

An image can be a resource URL or embedded data. Named images can be reused across appearances. Prefer application-controlled HTTPS resources or embedded images so rendering does not depend on an unrelated remote host.

{
  "images": {
    "baseUrl": "https://example.com/theme-images/",
    "wallpaper": "wallpaper.svg"
  }
}

The URL above is a placeholder. Verify resource resolution from the deployed application, not only from the designer.

Colors​

The colors section defines names used by appearances. Color values can use formats supported by the theme system, such as hexadecimal or RGB notation.

{
  "colors": {
    "brand": "#EA580C",
    "surface": "#FFFFFF"
  }
}

System Colors​

Wisej.NET can resolve SystemColors through corresponding theme names, such as activeBorder. Check the theme's definitions when combining system colors with custom appearances.

Fonts​

The fonts section defines named font resources. Specify fallback families and verify the actual font loaded in the browser; a font installed on a developer machine may not exist on the user's device.

{
  "fonts": {
    "default": {
      "size": 13,
      "family": ["Arial", "sans-serif"]
    }
  }
}

Font definitions can also include weight, style, decoration, and sources supported by the installed Wisej.NET version. Recheck layout and text measurement when changing fonts.

Appearances​

An appearance identifies the styles and properties used by a widget. An appearance can inherit another one, allowing a variation to override only the required settings.

States​

States describe conditions such as focused, hovered, pressed, or disabled. Supported names depend on the widget. A widget can have several states at once; inspect the effective appearance when rules overlap. Do not style only the default state.

Styles​

Styles describe visual decoration, such as backgrounds and borders. Use the styles supported by the theme schema; their names and values are not an unrestricted copy of CSS.

Properties​

Properties configure the widget itself and therefore depend on the control. A property can affect layout or behavior as well as appearance. Check the control's theme contract before applying a setting globally.

Components​

Components are appearances for internal child widgets, not child controls in the application's form hierarchy. A split button, for example, has separate button and arrow components. A component can be addressed through an appearance path such as splitbutton/arrow.

Theme Builder​

Use Theme Builder to inspect and preview the theme. Test the result in a running PPJ Web application because application properties, custom controls, and browser layout can affect the final result.

Mixins​

A .mixin.theme file adds or overrides part of a theme. This is useful for application-specific styling without copying and maintaining a complete base theme.

{
  "name": "MyMixin",
  "appearances": {
    "button": {
      "inherit": "button",
      "states": {
        "default": {
          "styles": {
            "backgroundColor": "red"
          }
        }
      }
    }
  }
}

This illustrates an override, not a complete accessible color scheme. Review contrast and other states. Package mixins according to the installed Wisej.NET resource conventions and check their application order when multiple mixins override the same appearance.