Skip to content
DSH Themes

Switch language

Open navigation

YOUR PALETTE, LIVE

13 × 2

Build a palette you want to work in

Start from 6 Themes. Edit 13 colors in light and dark, preview the result, check contrast, and export CSS, JSON, or an Agent prompt.

Make the theme your own

This live preview uses your colors. The installed theme changes after you build and install it.

Choose your starting point

Pick a base Theme, switch the preview mode, then choose a color role to edit.

Verified theme

Deep OceanGraphite RelayPaper ConsoleSolar TraceJade CircuitHigh Signal

Preview mode

LightDark
From a first color to a finished palette

6

Token-compatible verified Themes

21

Published Themes in the directory

From a first color to a finished palette

  1. 01

    Choose a base

    Start with a compatible Theme that already includes all the color roles.

  2. 02

    Edit and preview

    Adjust light and dark colors and see them applied to the conversation preview.

  3. 03

    Check and export

    Check text contrast, then save CSS or JSON, or send the palette to your Agent to create a Theme.

Make the theme your own

Pick a role, edit either mode, and see the result beside it.

Preview your palette

ConversationSecondary textSend

Choose where to start

Edit the reading backgroundChoose an accent colorAdjust status colors

Interactive 13-token map

01020304050607080910111213

Token 09 / 13

Secondary text

Supporting copy, metadata, and lower-priority interface labels.

--dsw-alias-label-secondary

0 edited colors

Take your palette into DSH

Copy the Agent prompt to turn this palette into a theme. CSS and JSON contain both modes; JSON can be imported here again.

Imported colors replace both modes of Graphite Relay. The base theme stays selected; the file does not switch themes.

JSON · 13 × 2
{
  "format": "dsh-token-lab",
  "version": 1,
  "baseTheme": "graphite-relay",
  "tokens": {
    "--dsw-alias-bg-base": {
      "light": "#F5F5F4",
      "dark": "#111315"
    },
    "--dsw-alias-bg-layer-1": {
      "light": "#FFFFFF",
      "dark": "#191C1F"
    },
    "--dsw-alias-bg-layer-2": {
      "light": "#ECECEA",
      "dark": "#22262A"
    },
    "--dsw-alias-bg-overlay": {
      "light": "#FFFFFF",
      "dark": "#282D32"
    },
    "--dsw-alias-border-l1": {
      "light": "#DADAD6",
      "dark": "#343A40"
    },
    "--dsw-alias-border-l2": {
      "light": "#BEBFBA",
      "dark": "#4B535B"
    },
    "--dsw-alias-brand-primary": {
      "light": "#315EAE",
      "dark": "#79A7F2"
    },
    "--dsw-alias-label-primary": {
      "light": "#242729",
      "dark": "#F3F4F5"
    },
    "--dsw-alias-label-secondary": {
      "light": "#60666B",
      "dark": "#B7BDC3"
    },
    "--dsw-alias-state-error-primary": {
      "light": "#B33A45",
      "dark": "#F47B84"
    },
    "--dsw-alias-state-success-primary": {
      "light": "#347258",
      "dark": "#6AC59A"
    },
    "--dsw-alias-state-warn-primary": {
      "light": "#91620E",
      "dark": "#E9BC61"
    },
    "--dsw-specific-sidebar-fill": {
      "light": "#E8E8E5",
      "dark": "#15181A"
    }
  }
}