@botiverse/porthole 0.1.0 → 0.1.2

package/src/shell/plan.ts

@@ -25,6 +25,8 @@ export interface ShellPlan {
   readonly themeVariables: readonly string[];
   /** The window event fired after a theme change. */
   readonly themeEvent: string;
+  /** Whether a whole document takes the person's scheme: when it declares it, or always. */
+  readonly themeDocuments: "declared" | "always";
   /** `memory`: an opaque origin has no storage, so a map stands in for the frame's life. */
   readonly storage: "memory" | "native";
   readonly maxErrorReports: number;
@@ -58,6 +60,7 @@ export function shellPlan(config: PortholeConfig): ShellPlan | null {
     globals,
     themeVariables: Object.keys(config.theme.variables),
     themeEvent: config.theme.event,
+    themeDocuments: config.theme.documents ?? "declared",
     storage: config.isolation === "opaque" ? "memory" : "native",
     maxErrorReports: config.limits.maxErrorReports,
     maxPromptChars: config.limits.maxPromptChars,

package/src/shell/runtime.ts

@@ -487,6 +487,21 @@ export const SHELL_RUNTIME = String.raw`(() => {
     window.dispatchEvent(new Event("load"));
   };
 
+  // A fragment takes the person's scheme; a whole document only if it declares that it supports
+  // both (or the config says always), else it shows as its author styled it (P039).
+  let lastContext = null;
+  let themed = plan.content !== "document";
+  const schemeFollows = () => {
+    const root = document.documentElement;
+    const theme = lastContext && lastContext.theme;
+    if (themed && (theme === "light" || theme === "dark")) {
+      root.style.colorScheme = theme;
+      root.setAttribute("data-theme", theme);
+    } else {
+      root.style.removeProperty("color-scheme");
+      root.removeAttribute("data-theme");
+    }
+  };
   // A whole document, parsed inert (no scripts run, no declarative shadow roots built), guarded,
   // imported in place of the shell's, then its scripts run in order. The theme on the root stays.
   const renderDocument = async (html) => {
@@ -502,6 +517,9 @@ export const SHELL_RUNTIME = String.raw`(() => {
     document.head.replaceChildren(...Array.from(parsed.head.childNodes, (node) => document.importNode(node, true)));
     document.body.replaceWith(document.importNode(parsed.body, true));
     root = null;
+    const declaredScheme = parsed.querySelector('meta[name="color-scheme" i]');
+    themed = plan.themeDocuments === "always" || (declaredScheme !== null && /\bdark\b/i.test(declaredScheme.getAttribute("content") || ""));
+    schemeFollows();
     await runScripts(scripts);
     announceLoaded();
   };
@@ -554,10 +572,8 @@ export const SHELL_RUNTIME = String.raw`(() => {
         }
       }
     }
-    if (context.theme === "light" || context.theme === "dark") {
-      document.documentElement.style.colorScheme = context.theme;
-      document.documentElement.setAttribute("data-theme", context.theme);
-    }
+    lastContext = context;
+    schemeFollows();
     window.dispatchEvent(new CustomEvent(plan.themeEvent, { detail: { theme: context.theme } }));
   };