Colors

Wisej.NET themes can use Web Colors, HTML Colors, and Named Colors. The table below describes each color type.

Color Type	Description
Web Colors	These are all the standard Web Colors. Any color property or style in the theme can use the color name.
HTML Colors	Any color property or style in the theme can use any valid #RGB, #RRGGBB, rbg(r, g, b) or rgba(r, g, b, a) notation.
Named Colors	In addition to the Web Colors and HTML Colors, Wisej.NET themes define their own named colors. It's basically a color-indirection table. Once you declare a color in the colors section, the theme can use that color by name. This feature gives you the enormous benefit of being able to change the color definition without having to change the color all over the theme i.e., change the buttonFace color to change the color of all the components that use buttonFace.

Example of named colors:

"colors": {
    "activeBorder": "#3096D0",
    "activeCaption": "#3096D0",
    "activeCaptionText": "#FFFFFF",
    "appWorkspace": "black",
    "buttonFace": "#337AB7",
    "buttonText": "white",
    "buttonHighlight": "#28608F",
    "buttonShadow": "#7A7A7A",
    "buttonPressed": "#204C73",
    "control": "#CDCDCD",
...

Notice that many color names defined in the themes that we provide with Wisej.NET match the colors in System.Drawing.SystemColors. In fact you can use System.Drawing.SystemColors in your Wisej.NET applications, the system will use the colors with the matching name defined in the current theme.

Setting the color in code always overrides the theme. Defining a color in the default state is the same as setting it in code. This applies to BackgroundColor, ForeColor and Font.

If you want to change the color based on the theme state you will need to create a custom control that overrides the color property. For example, here's a custom panel that overrides BackColor and ForeColor:

public class PanelWithoutBackColor : Panel
{
	public override Color BackColor
	{
		get => _backColor; 
		set => _backColor = value;
	}
	private Color _backColor;

	public override Color ForeColor
	{
		get => _foreColor;
		set => _foreColor = value;
	}
	private Color _foreColor;

}

You can then change the background color based on the theme state like so:

"my-custom-panel": {
      "states": {
        "default": {
          "styles": {
            "backgroundColor": "yellow",
          },
        },
        "error": {
          "styles": {
            "backgroundColor": "red",
          }
        },
        "warning": {
          "styles": {
            "backgroundColor": "orange",
          }
        }
      }
    },