# 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](http://www.w3schools.com/colors/colors_names.asp). 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 | <p>In addition to the Web Colors and HTML Colors, Wisej.NET themes define their own named colors. It's basically a color-indirection table.</p><p>Once you declare a color in the <strong>colors</strong> 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 <strong>buttonFace</strong> color to change the color of all the components that use <strong>buttonFace</strong>.</p> |

Example of named colors:

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

{% hint style="warning" %}
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.
{% endhint %}

{% hint style="danger" %}
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.
{% endhint %}

&#x20;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",
          }
        }
      }
    },
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/theme-builder/theme-elements/colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.