# Colours

CivicTheme allows you to change the colour of all elements from the configuration page without additional development.

To enable this functionality, check "Use Colour Selector". If not selected, the default CSS will be used.

<figure><img src="/files/p0bbp6n417sA7fmjQ026" alt=""><figcaption></figcaption></figure>

There are 2 visual themes available: `Light` and `Dark`. These are the visual themes consisting of Palette Colours that every component can be shown as.

Palette Colours are named after the purpose of the colour: `Heading` defines the colour of all headings, while `Background` defines the background colour.

Some colours are represented in different variants: `Border light`, `Border`, `Border dark`. This is to allow more visual variety on component colours.

Every component has a mapping to a set of designated colours based on the element the component uses.

#### **Brand colours**

The Brand colours use predefined formulas that automatically update the Palette colours. In other words, if you change the brand colours then the corresponding dependents will automatically update.

This is used as a short-hand to set 14 Palette colours using only 3 Brand colours. It also allows us to quickly produce Palette colours if only Brand colours are provided.

Brand colours is only a "helper" tool. Every Palette colour value produced from the Brand colour can be overridden.

To see which Brand colours drive which Palette colour, check the "Show dependents" checkbox under the Brand colour.

<figure><img src="/files/GQSlbSJzIB6chqgPNN1u" alt=""><figcaption></figcaption></figure>


---

# 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.civictheme.io/content-authoring/site-wide-configuration/colours.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.