# Console color palette

Source: https://docs.settlemint.com/docs/operators/platform-setup/console-color-palette
How administrators edit the light and dark color tokens for the Console, with inline validation that blocks invalid values before they are saved.



The Console theme editor lets an administrator set the light and dark color tokens that brand the application. Each token accepts a standard CSS color or a rem unit, and the editor validates every entry inline so a malformed value never reaches a save.

Branding changes affect the application experience only. They do not change token permissions, asset roles, or any on-chain state.

## Before you start [#before-you-start]

* You need an organisation **Admin** role. Theme changes are part of Organisation settings, not asset operations.
* Open **Console > Organisation settings > Organisation**, then the theme editor.

## Edit a color token [#edit-a-color-token]

The **Light palette** and **Dark palette** sections list the color tokens for each mode. Every row has a token name, a value field, a preview swatch, and a **Revert** action.

To change a color:

1. Type a CSS color into the token's **Value** field, or click the preview swatch to pick a color with the OKLCH, HSL, or hex editor.
2. Watch the live preview update as you edit.
3. Repeat for any other tokens you want to change, in either the light or dark palette.
4. Click **Save**.

Use **Revert** on any row to restore that token to its default value.

## Accepted formats [#accepted-formats]

A token value must be a valid CSS color or a rem unit. The editor accepts:

| Format       | Example              | Notes                                      |
| ------------ | -------------------- | ------------------------------------------ |
| Hex          | `#ff0000`, `#f00`    |                                            |
| OKLCH        | `oklch(0.5 0.2 180)` |                                            |
| HSL          | `hsl(180, 50%, 50%)` |                                            |
| RGB / RGBA   | `rgb(255, 0, 0)`     |                                            |
| CSS variable | `var(--primary)`     | Reference another token for shared colors. |
| Rem unit     | `0.625rem`           | Used for the `radius` token only.          |

A `var(...)` reference token points one token at another, so shared colors stay consistent across the palette. Default themes use these references, and they save without change. The `radius` token sets the corner radius for UI elements and uses a rem unit instead of a color.

## Inline validation and the Save gate [#inline-validation-and-the-save-gate]

When a token's value is not valid, or the field is empty, the row shows an inline message:

> Enter a valid color (hex, oklch, hsl, rgb, or var).

While any token in the light or dark palette is invalid, **Save** stays disabled. The client-side check uses the same CSS-color and rem-unit rules the server enforces, so a value that passes inline validation will also pass server validation. This catches the bad value before any server round-trip, so you fix it in the field instead of reading a generic rejection after submitting. It also covers a draft restored from a previous editing session, so a saved-but-invalid draft cannot slip through on reload.

Correct or clear the flagged tokens and the message disappears. Once every palette value is valid and you have unsaved changes, **Save** re-enables.

| What you see                                      | What to check                                                                                                          |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Inline "Enter a valid color" under a token        | The value is not a recognised CSS color or rem unit, or the field is empty. Enter a valid format from the table above. |
| Save stays disabled after editing colors          | At least one light or dark token is still invalid. Find the row with the inline message and fix it.                    |
| A reopened editor flags a token you did not touch | A restored draft holds an invalid value. Correct or revert that token, then save.                                      |

## Read next [#read-next]

* [Platform setup overview](/docs/operators/platform-setup/platform-overview) - Where theme settings sit within Organisation settings.