feat(coding-agent): add automatic theme mode (#5874)

packages/coding-agent/src/modes/interactive/theme/theme-controller.ts

@@ -0,0 +1,135 @@
+import type { TUI } from "@earendil-works/pi-tui";
+import type { SettingsManager } from "../../../core/settings-manager.ts";
+import {
+	detectTerminalBackgroundFromEnv,
+	detectTerminalBackgroundTheme,
+	initTheme,
+	parseAutoThemeSetting,
+	resolveThemeSetting,
+	setTheme,
+	setThemeInstance,
+	type TerminalTheme,
+	type Theme,
+} from "./theme.ts";
+
+type ThemeResult = { success: boolean; error?: string };
+
+export class InteractiveThemeController {
+	private readonly ui: TUI;
+	private readonly settingsManager: SettingsManager;
+	private readonly showError: (message: string) => void;
+	private readonly onChanged: () => void;
+	private terminalTheme: TerminalTheme = detectTerminalBackgroundFromEnv().theme;
+	private activeThemeName: string | undefined;
+	private autoSyncEnabled = false;
+
+	constructor(ui: TUI, settingsManager: SettingsManager, showError: (message: string) => void, onChanged: () => void) {
+		this.ui = ui;
+		this.settingsManager = settingsManager;
+		this.showError = showError;
+		this.onChanged = onChanged;
+		this.activeThemeName = resolveThemeSetting(this.settingsManager.getThemeSetting(), this.terminalTheme);
+		initTheme(this.activeThemeName, true);
+		this.ui.onTerminalColorSchemeChange((terminalTheme) => this.applyTerminalTheme(terminalTheme));
+	}
+
+	async applyFromSettings(): Promise<void> {
+		const themeSetting = this.settingsManager.getThemeSetting();
+		const autoTheme = parseAutoThemeSetting(themeSetting);
+		if (autoTheme) {
+			this.terminalTheme = await this.detectTerminalThemeForAuto();
+			this.setAutoSync(true);
+			this.applyThemeName(this.terminalTheme === "light" ? autoTheme.lightTheme : autoTheme.darkTheme, true);
+			return;
+		}
+
+		this.setAutoSync(false);
+		if (themeSetting !== undefined) {
+			this.applyThemeName(themeSetting, true);
+			return;
+		}
+
+		const detection = await detectTerminalBackgroundTheme({ ui: this.ui, timeoutMs: 100 });
+		this.terminalTheme = detection.theme;
+		if (!this.applyThemeName(detection.theme).success) return;
+		if (detection.confidence === "high") {
+			this.settingsManager.setTheme(detection.theme);
+			await this.settingsManager.flush();
+		}
+	}
+
+	setThemeName(themeName: string, showError = false): ThemeResult {
+		this.setAutoSync(false);
+		return this.applyThemeName(themeName, showError);
+	}
+
+	setThemeInstance(themeInstance: Theme): ThemeResult {
+		this.setAutoSync(false);
+		setThemeInstance(themeInstance);
+		this.activeThemeName = "<in-memory>";
+		this.notifyChanged();
+		return { success: true };
+	}
+
+	preview(themeSettingOrName: string): void {
+		const themeName = resolveThemeSetting(themeSettingOrName, this.terminalTheme) ?? this.activeThemeName;
+		if (!themeName) return;
+		if (setTheme(themeName, true).success) {
+			this.ui.invalidate();
+			this.ui.requestRender();
+		}
+	}
+
+	disableAutoSync(): void {
+		this.setAutoSync(false);
+	}
+
+	getTerminalTheme(): TerminalTheme {
+		return this.terminalTheme;
+	}
+
+	private applyThemeName(themeName: string, showError = false): ThemeResult {
+		const result = setTheme(themeName, true);
+		this.activeThemeName = result.success ? themeName : "dark";
+		this.notifyChanged();
+		if (!result.success && showError) {
+			this.showError(`Failed to load theme "${themeName}": ${result.error}\nFell back to dark theme.`);
+		}
+		return result;
+	}
+
+	private notifyChanged(): void {
+		this.ui.invalidate();
+		this.onChanged();
+	}
+
+	private setAutoSync(enabled: boolean): void {
+		if (this.autoSyncEnabled === enabled) return;
+		this.autoSyncEnabled = enabled;
+		this.ui.setTerminalColorSchemeNotifications(enabled);
+	}
+
+	private async detectTerminalThemeForAuto(): Promise<TerminalTheme> {
+		try {
+			const colorScheme = await this.ui.queryTerminalColorScheme({ timeoutMs: 100 });
+			if (colorScheme) return colorScheme;
+		} catch {
+			// Fall back to OSC 11 / COLORFGBG detection when color-scheme DSR is unsupported.
+		}
+		return (await detectTerminalBackgroundTheme({ ui: this.ui, timeoutMs: 100 })).theme;
+	}
+
+	private applyTerminalTheme(terminalTheme: TerminalTheme): void {
+		if (!this.autoSyncEnabled) return;
+		this.terminalTheme = terminalTheme;
+		const autoTheme = parseAutoThemeSetting(this.settingsManager.getThemeSetting());
+		if (!autoTheme) {
+			this.setAutoSync(false);
+			return;
+		}
+		const themeName = terminalTheme === "light" ? autoTheme.lightTheme : autoTheme.darkTheme;
+		if (themeName !== this.activeThemeName) {
+			this.applyThemeName(themeName);
+		}
+	}
+}

packages/coding-agent/src/modes/interactive/theme/theme-schema.json

@@ -11,7 +11,8 @@
 		},
 		"name": {
 			"type": "string",
-			"description": "Theme name"
+			"pattern": "^[^/]+$",
+			"description": "Theme name. Must not contain '/' because it is reserved for automatic light/dark theme settings."
 		},
 		"vars": {
 			"type": "object",

packages/coding-agent/src/modes/interactive/theme/theme.ts

@@ -503,6 +503,14 @@ function getCustomThemeInfos(): ThemeInfo[] {
 	return result;
 }
 
+function assertThemeNameIsValid(name: string): void {
+	if (name.includes("/")) {
+		throw new Error(
+			`Invalid theme name "${name}": theme names cannot contain "/" because it is reserved for automatic light/dark theme settings.`,
+		);
+	}
+}
+
 function parseThemeJson(label: string, json: unknown): ThemeJson {
 	if (!validateThemeJson.Check(json)) {
 		const errors = Array.from(validateThemeJson.Errors(json));
@@ -539,7 +547,9 @@ function parseThemeJson(label: string, json: unknown): ThemeJson {
 		throw new Error(errorMessage);
 	}
 
-	return json as ThemeJson;
+	const themeJson = json as ThemeJson;
+	assertThemeNameIsValid(themeJson.name);
+	return themeJson;
 }
 
 function parseThemeJsonContent(label: string, content: string): ThemeJson {
@@ -625,6 +635,36 @@ export function getThemeByName(name: string): Theme | undefined {
 
 export type TerminalTheme = "dark" | "light";
 
+export function parseAutoThemeSetting(
+	themeSetting: string | undefined,
+): { lightTheme: string; darkTheme: string } | undefined {
+	if (!themeSetting) return undefined;
+	const slashIndex = themeSetting.indexOf("/");
+	if (slashIndex === -1 || themeSetting.indexOf("/", slashIndex + 1) !== -1) {
+		return undefined;
+	}
+
+	const lightTheme = themeSetting.slice(0, slashIndex).trim();
+	const darkTheme = themeSetting.slice(slashIndex + 1).trim();
+	if (!lightTheme || !darkTheme) {
+		return undefined;
+	}
+	return { lightTheme, darkTheme };
+}
+
+export function resolveThemeSetting(
+	themeSetting: string | undefined,
+	terminalTheme: TerminalTheme,
+): string | undefined {
+	const autoTheme = parseAutoThemeSetting(themeSetting);
+	if (autoTheme) {
+		return terminalTheme === "light" ? autoTheme.lightTheme : autoTheme.darkTheme;
+	}
+	if (themeSetting?.includes("/")) return undefined;
+	if (typeof themeSetting === "string") return themeSetting;
+	return undefined;
+}
+
 export interface TerminalThemeDetection {
 	theme: TerminalTheme;
 	source: "terminal background" | "COLORFGBG" | "fallback";
@@ -752,6 +792,7 @@ export function setRegisteredThemes(themes: Theme[]): void {
 	registeredThemes.clear();
 	for (const theme of themes) {
 		if (theme.name) {
+			assertThemeNameIsValid(theme.name);
 			registeredThemes.set(theme.name, theme);
 		}
 	}