Use this when the user wants to change the SLICC UI appearance — switch
preset themes, create custom themes, adjust colors, toggle the animated
background, or export/import theme files. Covers the theme shell command,
full token reference, and the JSON format for programmatic theming.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Use this when the user wants to change the SLICC UI appearance — switch
preset themes, create custom themes, adjust colors, toggle the animated
background, or export/import theme files. Covers the theme shell command,
full token reference, and the JSON format for programmatic theming.
allowed-tools
bash, read_file, write_file, edit_file
Theme Personalization
SLICC supports full UI theming via the theme shell command and the Theme settings dialog (avatar menu → "Theme settings…").
Shell Command (preferred for agent use)
theme list # List all preset themes
theme apply <id> # Apply a preset by id
theme apply <path> # Apply a .slicc-theme.json file from the VFS
theme reset # Reset to default theme
theme export <id> <path> # Export a preset to a VFS path
The tokens map can override ANY CSS custom property — not just colors. Typography, spacing, radii, shadows, transitions, layout dimensions are all fair game. The css field allows arbitrary CSS rules for anything tokens can't reach (element selectors, pseudo-elements, animations, media queries).
Full Token Reference
The UI has two token systems. Both must be set for complete coverage:
WC Shell Tokens (visible UI — chat, nav, panels)
Token
Purpose
Example (dark)
--canvas
Page/main background
#161618
--bg
Sunken/recessed background
#0e0e10
--ghost
Hover/subtle background
#1f1f22
--desk
Secondary panel bg
#1f1f22
--ink
Primary text
#f5f5f2
--deep
Emphatic/bold text
#f5f5f2
--txt-2
Secondary text
#9b9ba1
--txt-3
Muted/tertiary text
#6c6c72
--line
Borders, dividers
#2a2a2e
--ctx
Accent (buttons, links, highlights)
#f59e0b
--waffle
Nav bar tint (overrides nav --ctx)
#f59e0b
--shaderbg
WebGL shader base color
#171410
S2 Design Tokens (Spectrum 2 layer)
Token
Purpose
--s2-gray-25 to -1000
Gray scale (25=darkest bg in dark mode, 1000=lightest)
--s2-bg-base
:root background
--s2-bg-layer-1
First elevated layer
--s2-bg-layer-2
Second elevated layer
--s2-bg-elevated
Cards, modals
--s2-bg-sunken
Recessed areas
--s2-content-default
Primary text
--s2-content-secondary
Secondary text
--s2-content-tertiary
Muted text
--s2-content-disabled
Disabled text
--s2-accent
Primary accent
--s2-accent-hover
Accent hover state
--s2-accent-down
Accent pressed state
--s2-border-default
Default borders
--s2-border-subtle
Subtle borders
--s2-border-focus
Focus ring color
--s2-positive
Success/green
--s2-negative
Error/red
--s2-informative
Info/blue
--s2-notice
Warning/orange
Component-Level Styling
The components field gives semantic control over individual UI parts. Each component accepts:
{"components":{"userBubble":{"background":"#2563eb","text":"#ffffff","radius":"20px 20px 4px 20px"},"nav":{"background":"rgba(0,0,0,0.8)","blur":"24px","height":"52px"},"codeBlock":{"background":"#0d1117","text":"#c9d1d9","radius":"8px","border":"#30363d"},"composer":{"background":"#1c1c1e","border":"#3a3a3c","radius":"20px"}}}
Arbitrary CSS
The css field injects raw CSS after everything else — use it for things components/tokens can't reach:
Accent is a highlight, not a flood. The accent color appears on links, buttons, focus rings, and the nav tint — NOT on user bubbles, backgrounds, or large surfaces. Overusing accent makes the UI aggressive.
User bubbles should be neutral. Use a slightly lighter/darker shade of the background — never the accent. Bubble text should be high-contrast against the bubble bg.
Assistant messages should be transparent. Always set "assistantMessage": { "background": "transparent" } — sliccy's responses should flow naturally on the page without a visible card background.
Backgrounds should be true neutrals. Use pure grays (equal RGB) or very slightly tinted grays. Avoid colored backgrounds unless intentional.
The nav bar should be subtle. It uses color-mix(--ctx 12%, --canvas 68%) with blur — a strong accent already tints it. Don't set a loud nav background.
Gray scale should be evenly spaced. Dark themes: start ~8-12% lightness, step up 3-4%. Light themes: start 98-100%, step down 2-3%.
Code/output blocks should be recessed. Slightly darker (dark) or lighter (light) than background.
Note: accent red is ONLY in --ctx/--waffle/--s2-accent. Bubble is neutral gray, assistant messages have no background card (transparent — blends with the page), code blocks are recessed.
Setting bubble background to the accent color (makes every message scream)
Using warm/colored grays for backgrounds (looks muddy)
Making the nav bar a solid opaque color (kills the frosted glass effect)
Not enough contrast between text and background (aim for 7:1 minimum)
Setting --deep to something different from --ink (causes bubble text issues)
Forgetting "disableShader": true (the shader fights custom backgrounds)
Not setting components.userBubble (defaults to --deep which is the ink color — wrong for themed looks)
ONLY change colors. Never override font sizes, font families, spacing, padding, radii, or layout unless the user explicitly asks. A theme is a color palette — not a redesign.
Never use the css field to inject font-size, padding, margin, width, height, or layout rules
The css field is ONLY for subtle color-related decorations (border colors, outlines, gradients on specific elements)
Storage
Active theme ID: localStorage['slicc-active-theme']
