Add theme-configurable HTML export colors (from PR #387)

- Add optional 'export' section to theme JSON with pageBg, cardBg, infoBg
- If not specified, colors are auto-derived from userMessageBg
- Add export colors to dark.json and light.json
- Update theme-schema.json and TypeBox schema
- Add documentation to docs/theme.md
- Add margin-top back to tool-output for spacing between header and content
This commit is contained in:
Mario Zechner 2026-01-01 22:21:40 +01:00
parent d612bc45f5
commit 6267720660
7 changed files with 104 additions and 6 deletions

View file

@ -2,7 +2,7 @@ import type { AgentState } from "@mariozechner/pi-agent-core";
import { existsSync, readFileSync, writeFileSync } from "fs";
import { basename, join } from "path";
import { APP_NAME, getExportTemplateDir } from "../../config.js";
import { getResolvedThemeColors } from "../../modes/interactive/theme/theme.js";
import { getResolvedThemeColors, getThemeExportColors } from "../../modes/interactive/theme/theme.js";
import { SessionManager } from "../session-manager.js";
export interface ExportOptions {
@ -86,12 +86,14 @@ function generateThemeVars(themeName?: string): string {
lines.push(`--${key}: ${value};`);
}
// Add derived export colors
// Use explicit theme export colors if available, otherwise derive from userMessageBg
const themeExport = getThemeExportColors(themeName);
const userMessageBg = colors.userMessageBg || "#343541";
const exportColors = deriveExportColors(userMessageBg);
lines.push(`--exportPageBg: ${exportColors.pageBg};`);
lines.push(`--exportCardBg: ${exportColors.cardBg};`);
lines.push(`--exportInfoBg: ${exportColors.infoBg};`);
const derivedColors = deriveExportColors(userMessageBg);
lines.push(`--exportPageBg: ${themeExport.pageBg ?? derivedColors.pageBg};`);
lines.push(`--exportCardBg: ${themeExport.cardBg ?? derivedColors.cardBg};`);
lines.push(`--exportInfoBg: ${themeExport.infoBg ?? derivedColors.infoBg};`);
return lines.join("\n ");
}

View file

@ -363,6 +363,7 @@
}
.tool-output {
margin-top: var(--line-height);
color: var(--toolOutput);
word-wrap: break-word;
overflow-wrap: break-word;