SettleMint
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

  • 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

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

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

FormatExampleNotes
Hex#ff0000, #f00
OKLCHoklch(0.5 0.2 180)
HSLhsl(180, 50%, 50%)
RGB / RGBArgb(255, 0, 0)
CSS variablevar(--primary)Reference another token for shared colors.
Rem unit0.625remUsed 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

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 seeWhat to check
Inline "Enter a valid color" under a tokenThe 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 colorsAt 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 touchA restored draft holds an invalid value. Correct or revert that token, then save.

On this page