# Theme Color

Displays the Theme Studio Color control.

{% tabs %}
{% tab title="Control Example" %}

```json
{
  "title": "Button Color",
  "id": "buttonColor",
  "format": "bg-{{value}}",
  "themeColor": {
    "default": {
      "name": "brand",
      "brightness": 500
    }
  }
}
```

{% endtab %}

{% tab title="Group Example" %}

```json
{
  "groups": [{
    "title": "Button",
    "properties": [{
      "title": "Button Color",
      "id": "buttonColor",
      "format": "bg-{{value}}",
      "themeColor": {
        "default": {
          "name": "brand",
          "brightness": 500
        }
      }
    }]
  }]
}
```

{% endtab %}
{% endtabs %}

For consistency and integration with the Theme Studio in RapidWeaver Elements, use the `themeColor` attribute to specify all color options for your elements. This ensures that the color settings are centrally managed and adaptable to theme changes.

**Usage of `themeColor`:**

* **default**: Sets the initial or fallback color and brightness. In this case, the default color is brand with a brightness value of 500.

**Output Example:** [The `format` key](/elements-docs/elements-language/component/properties-json/general-structure/format.md) controls the output format of the `buttonColor` property. In your template files, referencing `{{buttonColor}}` with the example configuration above would output: `bg-brand-500`.

### Setting Light and Dark mode colours

```json
"themeColor": {
  "default": {
    "name": "surface",
    "brightness": 800,
    "darkName": "surface",
    "darkBrightness": 50
  }
}
```


---

# 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.realmacsoftware.com/elements-docs/elements-language/component/properties-json/ui-controls/theme-color.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.