> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/ui-building-blocks/design-system/colors.md).

# Colors

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

## Colors

The **Colors** section allows you to create, customize, and manage the color tokens used across your application.

### Custom Colors

You can add your own **Custom Colors** by clicking the **Add New** button. These colors can be used anywhere in your app, alongside the default palette.

### Light & Dark Theme Palettes

Your app comes with a predefined **Light Theme** and **Dark Theme** color palette.\
Each theme includes colors for:

* **Brand** (Primary & Secondary)
* **Content** (Primary, Secondary, Tertiary)
* **Background** (Primary, Secondary, Tertiary)
* **Status** (Success, Error, Warning, Info)
* **Accents**

You can switch between light and dark themes in your app, and customize both to fit your brand.

### Editing Colors

To modify a color:

1. Click on the color box.
2. Select a new color using the color picker, or enter a hex code.

### More Options

Clicking the **three dots** menu next to a color provides options to:

* **Copy Color Token** – Use this token name in expressions and styling references.
* **Copy Hex Code** – Quickly copy the color’s hex value.

These tools help ensure design consistency and make it easier to apply colors programmatically.

### Using Colors in Components

<figure><img src="/files/0YlbZuYorNohOJf9yRHg" alt="" width="375"><figcaption></figcaption></figure>

When configuring components (e.g., button text, background), you can:

* Choose from the **predefined color tokens** in the library.
* Set a **custom inline color** directly for that specific element.

### Light/Dark Mode Toggle

At the top of the canvas, you can toggle between **Light** and **Dark** modes using the ��**/**☾ **icon** .

> **Note:** This toggle only affects components styled with **tokenized colors**. Inline colors are fixed and will not adapt when switching themes.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.digia.tech/ui-building-blocks/design-system/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.