Skip to content
DSH Themes

Switch language

Open navigation
Back to Learn
09Workbench9 min readIntermediate

GUIDE 09 · WORKBENCH

Create your palette in Token Lab

You do not have to design a palette from scratch. Token Lab lets you adjust an existing Theme one color at a time and see it applied to a conversation preview.

Last verified
Sep 6, 2026
Guide source baseline
0.1.3-alpha.1
Installation status
Check the selected item’s record
Verified scope
  • Complete light and dark editing
  • Text contrast checks
  • CSS, JSON, and Agent prompt exports
On this page
  1. From a base Theme to your own palette
  2. Example: a calmer reading workspace

From a base Theme to your own palette

  1. 01

    Choose a base Theme

    Choose a compatible Theme with complete color data. The page shows the compatible count separately from the total number of published Themes.

  2. 02

    Choose a role and edit it

    Select a background, text, accent, or status color and change its hex value. Edit light and dark separately and inspect the neighboring conversation preview, including text, code, and controls.

  3. 03

    Compare and check

    Compare with the original Theme and check the lowest text contrast across the preview backgrounds. Normal text needs at least 4.5:1. After editing, also inspect focus and keyboard behavior in the real interface.

  4. 04

    Export and create a Theme

    Download CSS or JSON containing both modes. JSON can be imported again. Copy the Agent prompt to have an Agent build, install, and test a separate Theme from this palette.

Example: a calmer reading workspace

Start with a Theme you like, warm the reading background slightly, and check that secondary text remains legible. Choose an accent that makes primary buttons and selected states easy to identify. Adjust dark mode independently instead of simply inverting the light values, which can make warnings or code hard to read.

text
Create a separate DSH Theme from my exported Token Lab JSON, targeting 0.1.3-alpha.1 at source commit d347e703908d0406b7a7ef80e3a0e594d86b2215. Preserve all 13 semantic tokens in light and dark. Check text contrast, build it, and test the real Harness sidebar, messages, code, menus, and input. Provide installation, restart, switching, and rollback steps. Do not claim verification before testing.
Continue with Theme creation

Continue

Open Token LabStart editing your palette.Create a Full SkinAdd a complete visual design beyond the palette.

Common questions

Before you make a change

Answers about formats, compatibility, evidence, and rollback.

What does this guide verify?

This guide covers: Complete light and dark editing; Text contrast checks; CSS, JSON, and Agent prompt exports

What should I do first?

You do not have to design a palette from scratch. Token Lab lets you adjust an existing Theme one color at a time and see it applied to a conversation preview.

Which boundary matters most?

Token Lab edits a draft; it does not immediately change an installed Theme. The new palette must be built for 0.1.3-alpha.1 and checked in the real sidebar, messages, code, menus, input, switching, and rollback flows. Browser-tab storage is a convenience; export JSON to keep a durable copy.

Does exporting CSS install the Theme?

No. CSS and JSON are palette files. Use the Agent prompt to build a separate package, install it, and test it before the installed interface changes.

Can I publish as soon as contrast passes?

Contrast is a color check. You still need to verify the real interface, keyboard focus, different screen sizes, and runtime behavior.

Continue learning

Previous guideCompare Light and Dark ModesNext guideCreate a Full Skin Draft

Continue from the verified evidence

Compare published artifacts or return to the installation documentation.

ExploreDocs