How do I create a theme extension?
A theme extension defines the color palette and optional font stack for the Daemion app. Enable it and the interface switches to those colors immediately — no restart required.
What is a theme extension?
A theme is an extension with type: "theme" whose definition contains a colors object (ten required color tokens) and an optional fonts object (display, body, and mono font families). The app reads the active theme at runtime and applies it as CSS custom properties across every surface.
Only one theme can be active at a time. Enabling a new theme automatically disables the previous one.
When would I use a theme extension?
Use a theme when you want the Daemion interface to reflect a specific aesthetic — a dark high-contrast palette for late-night work, your brand colors for a client demo, or a warm sepia tone for focused writing sessions. Themes are purely visual; they have no effect on agent behavior or extension logic.
How do I create a theme through chat?
Open the Daemion app, start a new thread, and describe the look you want:
Create a cyberpunk theme with neon green accents and a dark background.
Daemion will pick appropriate hex values and create the extension:
User: Create a cyberpunk theme with neon green accents and a dark background.
Daemion: I’ll create a cyberpunk theme for you.
[Creating extension…]
Done. The “cyberpunk” theme is registered and enabled. The interface has switched to dark backgrounds with neon green accents. Tell me if you want to adjust any of the colors.
The resulting extension record:
{ “id”: “ext_02jkl345”, “type”: “theme”, “name”: “cyberpunk”, “description”: “Dark backgrounds with neon green accents.”, “definition”: { “colors”: { “bgPrimary”: “#0a0a0f”, “bgSecondary”: “#111118”, “textPrimary”: “#e2e8f0”, “textSecondary”: “#94a3b8”, “accent”: “#39ff14”, “accentSoft”: “#1a3d10”, “border”: “#1e2030”, “assistantBg”: “#111118”, “userBg”: “#0f2d0a”, “userText”: “#e2e8f0” }, “fonts”: { “display”: “‘Share Tech Mono’, monospace”, “body”: “‘IBM Plex Sans’, sans-serif”, “mono”: “‘JetBrains Mono’, monospace” } }, “source”: “agent”, “enabled”: true, “created_at”: “2026-03-31T09:00:00Z”, “updated_at”: “2026-03-31T09:00:00Z” }
How do I create a theme via the API?
curl -X POST http://localhost:3001/extensions
-H “Authorization: Bearer $DAEMION_TOKEN”
-H “Content-Type: application/json”
-d ’{
“type”: “theme”,
“name”: “cyberpunk”,
“description”: “Dark backgrounds with neon green accents.”,
“definition”: {
“colors”: {
“bgPrimary”: “#0a0a0f”,
“bgSecondary”: “#111118”,
“textPrimary”: “#e2e8f0”,
“textSecondary”: “#94a3b8”,
“accent”: “#39ff14”,
“accentSoft”: “#1a3d10”,
“border”: “#1e2030”,
“assistantBg”: “#111118”,
“userBg”: “#0f2d0a”,
“userText”: “#e2e8f0”
}
},
“source”: “user”,
“enabled”: true
}’
All ten colors fields are required. The fonts object is optional — if omitted, the app falls back to its default font stack.
What does the full schema look like?
Defined in src/schema/extension.ts:30-50:
interface ThemeDefinition { colors: { bgPrimary: string; // main background (chat area, sidebar) bgSecondary: string; // secondary background (cards, drawers) textPrimary: string; // primary text color textSecondary: string; // muted text, timestamps, labels accent: string; // interactive elements, links, active states accentSoft: string; // hover backgrounds, subtle highlights border: string; // dividers, card outlines, input borders assistantBg: string; // background of assistant chat turns userBg: string; // background of user chat turns userText: string; // text color inside user chat turns }; fonts?: { display?: string; // headings and large text (CSS font-family value) body?: string; // body copy and UI labels mono?: string; // code blocks and monospace output }; }
All color values are CSS strings — hex, rgb(), hsl(), or any valid CSS color. Font values are CSS font-family strings.
Frequently asked questions
enabled: true at a time. Enabling a theme via toggle automatically disables the currently active one.POST /extensions/:id/toggle). The app reverts to its built-in default palette. You can also enable any other registered theme to switch directly.'Share Tech Mono', monospace, that font must be available in the user's browser or OS. When chatting, ask Daemion to use a Google Fonts URL if you want web-loaded fonts.definition object wholesale — you must send all ten colors fields every time. The easiest workflow is to ask Daemion in chat: "Make the accent color a brighter green." The agent fetches the current definition and patches it for you.GET /extensions/:id returns the full record. Strip id, created_at, and updated_at, then POST to the other gateway. The color values are plain strings so there is no platform-specific encoding to worry about.What can go wrong
400 {"error": "Invalid theme definition: ..."} — One or more of the ten colors fields is missing. The schema requires all ten; there are no defaults. The error message lists the missing fields by name.
403 {"error": "cannot disable essential extensions"} — Essential built-in themes cannot be disabled.
Theme enabled but interface does not change — Check that the app is connected to the gateway (look for the green dot in the sidebar). Theme changes are pushed via WebSocket as an extension-changed event. If the connection dropped, refresh the app to reload the active theme.
Fonts not rendering — The fonts field accepts raw CSS font-family strings but does not inject @font-face rules or fetch remote fonts. If a custom font isn’t showing, it isn’t available in the browser. Use system fonts or include a <link> to a font CDN in your app’s shell.
What’s next?
- Extension overview — all 12 types and the universal schema
- Extensions API — full CRUD reference