# Appearances The **appearances** section in the theme file is where all the styles and properties that apply to the widgets are defined. Each widget has an appearance name (corresponds to the AppearanceKey property exposed by the server-side control) that selects which section of the theme applies to the widget. The appearances are organizes in a hierarchical structure: ```javascript "apparances": { [appearance key]: { "inherit": "", "text": "", "states": { [state name]: { "styles": { ... }, "properties": { ... } }, "components": { [child key]: { "inherit": "", "text": "", "states": { [state name]: { "styles": { ... }, "properties": { ... } }, "components": { ... } } } } } } ``` See [Elements ](https://docs.wisej.com/theme-builder/theme-elements/elements)section[ ](https://docs.wisej.com/theme-builder/theme-elements/elements)for a detailed explanation of the theme structure. | Element | Description | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | \[appearance key] | Top level appearance key. Widgets that want to use the styles and properties defined under this key must match the key. i.e., wisej.web.Button uses the "button" appearance, but it could use "button-ok" or "button-cancel" to retrieve different styles and properties. | | "inherit" | Inherits all the states, styles and properties from another key. i.e., "button-ok" inherits from "button" and overrides the face color. | | "text" | The text property is used only by the Theme Builder. It simply changes the text of the appearance in the tree view. i.e. "listview" can be displayed as "ListView". The Theme Builder already converts all appearance keys from first lower to first upper, and converts dashed to spaces. Use the "text" property only when you want to change the text displayed by the Theme Builder. | | "states" |

The states section contains the list of the states that the appearance should style. See States.

The first state must be default. The theme engine in Wisej applies the styles and properties of all the states that match the widget states in the order they are declared in the theme.

| | \[state name] |

The state name depends on the widget using the appearance. Some state are used by most widgets and are suggested by the Theme Builder. However, many widgets use states that depend on the implementation of the widget itself, and can add new states in later releases.

For example, the disabled state is available for most widgets, while the checked, or pressed state is not.

| | "styles" | Styles used to create the CSS class used by the widget with the matching appearance. See [Styles](https://wisej.com/docs/2.1/html/Theme-Styles.htm). | | "properties" | Property values to assign to the corresponding properties of the widget using the appearance. See [Properties](https://wisej.com/docs/2.1/html/Theme-Properties.htm). | | "components" | The **components** collection defines child appearances that use the same recursive structure as the main **appearance**. See [Components](#components). | | \[child key] | Child keys are appearance keys inside another appearance key. They apply their styles and properties to inner widgets. i.e. the **icon** widget inside a wisej.web.Button uses the styles and properties defined in **button/icon**. | {% hint style="info" %} * Child appearances are reachable using the forward slash. To inherit from the "title" child appearance defined inside "window", use **"window/title"**. * Appearance keys are case sensitive. * Child widgets are **not** child controls. You cannot refer to child widgets from the server: the Wisej.Web.Button control can only refer to the wisej.web.Button JavaScript widget but cannot reference the internal composition of the widget. {% endhint %} ## Components Components refer to child widgets that compose a larger widget. The name of the component is the name used by the parent widget to refer to the child. The component entry in the Theme is identical to the Appearance entry. A component can include other components in a recursive structure. ![Icon Component in a Button Appearance](https://4196911125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyrHxzbanglDTTaYfB34Z%2Fuploads%2Fgit-blob-e41e03eb3dcda1cf980a0af394fa8db9299b3901%2Fimage%20\(68\).png?alt=media) In the image above, you can see that the *Button* appearance contains a component named *Icon.* Each component has a set of states and for each state it has styles and properties. {% hint style="info" %} Some states are inherited: when the widget adds or removes a state to a widget it will also add it and remove it to child widgets. {% endhint %} --- # 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/appearances.md?ask= ``` 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.