feat(console): follow active Acode theme

src/lib/console.js

@@ -18,7 +18,13 @@ import ConsoleExecutor, {
 	let isExecuting = false;
 	let viewportFrame = null;
 	let viewportObserver = null;
+	let themeSyncTimer = null;
+	let themeSyncPending = false;
+	let themeSignature = null;
 	const isStandaloneConsole = sessionStorage.getItem("__mode") === "console";
+	const themeEndpoint = document.querySelector(
+		'meta[name="acode-console-theme-endpoint"]',
+	)?.content;
 	const originalConsole = console;
 	const $input = tag("textarea", {
 		id: "__c-input",
@@ -149,6 +155,10 @@ import ConsoleExecutor, {
 	if (isStandaloneConsole) {
 		$console.setAttribute("standalone", "");
 		document.documentElement.setAttribute("console-only", "");
+		startThemeSync();
+		window.addEventListener("pagehide", stopThemeSync, {
+			once: true,
+		});
 	}
 	const counter = {};
 	const timers = {};
@@ -183,6 +193,49 @@ import ConsoleExecutor, {
 		document.addEventListener("hideconsole", hideConsole);
 	}
 
+	function startThemeSync() {
+		if (!themeEndpoint || themeSyncTimer !== null) return;
+		void syncTheme();
+		themeSyncTimer = setInterval(syncTheme, 1000);
+	}
+
+	function stopThemeSync() {
+		if (themeSyncTimer === null) return;
+		clearInterval(themeSyncTimer);
+		themeSyncTimer = null;
+	}
+
+	async function syncTheme() {
+		if (themeSyncPending) return;
+		themeSyncPending = true;
+
+		try {
+			const response = await fetch(themeEndpoint, { cache: "no-store" });
+			if (!response.ok) return;
+			const snapshot = await response.json();
+			if (typeof snapshot.css !== "string") return;
+
+			const signature = JSON.stringify([snapshot.type, snapshot.css]);
+			if (signature === themeSignature) return;
+
+			let $theme = document.getElementById("console-live-theme");
+			if (!$theme) {
+				$theme = tag("style", { id: "console-live-theme" });
+				document.head.append($theme);
+			}
+			$theme.textContent = snapshot.css;
+			document.documentElement.setAttribute(
+				"theme-type",
+				snapshot.type === "light" ? "light" : "dark",
+			);
+			themeSignature = signature;
+		} catch {
+			// Keep the last valid theme if the local endpoint is briefly unavailable.
+		} finally {
+			themeSyncPending = false;
+		}
+	}
+
 	function touchmove(e) {
 		e.preventDefault();
 		$toggler.style.transform = "translate("

src/lib/run.js

@@ -22,6 +22,9 @@ import appSettings from "./settings";
 /**@type {Server} */
 let webServer;
 
+// An open console may outlive the server instance that created it.
+const CONSOLE_THEME_STATE = "__acode_console_theme.json";
+
 /**
  * Starts the server and run the active file in browser
  * @param {Boolean} isConsole
@@ -73,6 +76,7 @@ async function run(
 	const MIMETYPE_HTML = mimeType.lookup("html");
 	const CONSOLE_SCRIPT = uuid + "_console.js";
 	const CONSOLE_WORKER_SCRIPT = uuid + "_console_worker.js";
+	const CONSOLE_THEME_STYLE = uuid + "_console_theme.css";
 	const MARKDOWN_STYLE = uuid + "_md.css";
 	const queue = [];
 
@@ -211,6 +215,18 @@ async function run(
 				sendFileContent(url, reqId, "application/javascript");
 				break;
 
+			case CONSOLE_THEME_STYLE:
+				sendText(getConsoleThemeSnapshot().css, reqId, "text/css");
+				break;
+
+			case CONSOLE_THEME_STATE:
+				sendText(
+					JSON.stringify(getConsoleThemeSnapshot()),
+					reqId,
+					"application/json",
+				);
+				break;
+
 			case EXECUTING_SCRIPT: {
 				const text = getDocText(activeFile?.session?.doc);
 				sendText(text, reqId, "application/javascript");
@@ -235,7 +251,10 @@ async function run(
 						mustache.render($_console, {
 							CONSOLE_SCRIPT,
 							CONSOLE_WORKER_SCRIPT,
+							CONSOLE_THEME_STYLE,
+							CONSOLE_THEME_STATE,
 							EXECUTING_SCRIPT,
+							APP_THEME_TYPE: getConsoleThemeSnapshot().type,
 						}),
 						reqId,
 						MIMETYPE_HTML,
@@ -364,6 +383,13 @@ async function run(
 		}
 	}
 
+	function getConsoleThemeSnapshot() {
+		return {
+			css: document.head.querySelector("style#app-theme")?.textContent || "",
+			type: document.body.getAttribute("theme-type") || "dark",
+		};
+	}
+
 	/**
 	 * Sends 404 error
 	 * @param {string} id