Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →vellum-ai/vellum-workspace-theme
Customize the app's visual theme — author design-token overrides (accent, background, surfaces, text, message-bubble colors) in the workspace ui/theme.json, validated by the assistant runtime and applied live to connected clients. Covers the token slots, the all-or-none override groups, the contrast floor, and reading back validation issues.
Passed 6 of 12 test cases with the skill, and 4 of 12 without it.
and 2 more in the full report
5 fixed7 passed either way10 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
What terminal command should I run to inspect the current workspace theme configuration without throwing errors if the file is missing?
| Checked | Without skill | With skill |
|---|---|---|
| Executes cat on $VELLUM_WORKSPACE_DIR/ui/theme.json with fallback output when the file is absent. | Missed | Passed |
The instructions your model reads when the skill loads.
You are customizing the visual theme of the app you and your user share. The theme lives in one file — $VELLUM_WORKSPACE_DIR/ui/theme.json — which the assistant runtime validates and serves to every connected client. Valid changes apply live, layered on top of the built-in light/dark/velvet base theme: open windows re-color within a few seconds of the file being saved. No restart, no build step.
All commands in this skill use the bash tool. $VELLUM_WORKSPACE_DIR is available in the sandbox environment.
Always check what's there before changing it:
cat "$VELLUM_WORKSPACE_DIR/ui/theme.json" 2>/dev/null || echo "No theme yet — clients render the built-in theme"
A complete example (all eleven token slots — you rarely need all of them):
{
"version": 1,
"tokens": {
"accent": "#e8a04c",
"background": "#1c1512",
"surface": "#2b2018",
"surfaceRaised": "#332619",
"border": "#43301f",
"text": "#f2e4d4",
"textMuted": "#a68d75",
"userBubbleBackground": "#26201a",
"userBubbleText": "#efe3d2",
"assistantBubbleBackground": "#33202a",
"assistantBubbleText": "#ffd7e4"
}
}
| Token | What it controls |
|---|---|
accent | Primary buttons, highlights, active states. The button-label color is derived automatically so it stays readable on any accent. |
background | The page background and base surfaces. |
surface | Panels, popovers, and overlays. |
test cases passed, vs 4 / 12 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.