@@ -24,6 +24,7 @@ import { EmbeddedSlider } from "./EmbeddedSlider.js";
 import { JOScript } from "./EmbeddedStarter.js";
 import { WriteQueryManager } from "./WriteQueryManager.js";
 import { ThemeManager } from "../main/gui/ThemeManager.js";
+import { followPageTheme, PageTheme, pageTheme } from "./PageTheme.js";
 
 import gridUrl from '/include/graphics/grid.svg';
 
@@ -39,14 +40,19 @@ type JavaOnlineConfig = {
     enableFileAccess?: boolean,
 
     /**
-     * "dark" (the default) or "light" - the same two themes the full IDE offers
-     * under Einstellungen. Anything else falls back to "dark".
+     * "dark" or "light" - the same two themes the full IDE offers under
+     * Einstellungen.
+     *
+     * Left out, the IDE takes the theme from the page: a hyperbook has a
+     * `<dark-mode-toggle>` its reader can flip, and the IDE follows it, live
+     * (see PageTheme.ts). A page without such a toggle says nothing about its
+     * colours, and the IDE stays dark, as embedded IDEs have always been.
      *
      * The theme's colours are custom properties on the document root, so they
      * are the page's rather than one IDE's: where a page holds several embedded
      * IDEs they all end up in the theme of the one that was initialised last.
      */
-    theme?: "dark" | "light",
+    theme?: PageTheme,
 }
 
 export class MainEmbedded implements MainBase {
@@ -160,6 +166,8 @@ export class MainEmbedded implements MainBase {
 
     /** Owns this IDE's colours; see the `theme` config option. */
     themeManager: ThemeManager;
+    /** True while no theme was configured, so the page's toggle decides. */
+    private themeFollowsPage: boolean = false;
 
     constructor($div: JQuery<HTMLElement>, private scriptList: JOScript[]) {
 
@@ -170,6 +178,7 @@ export class MainEmbedded implements MainBase {
         // wrong colours first
         this.themeManager = new ThemeManager();
         this.themeManager.switchTheme(this.config.theme!);
+        if (this.themeFollowsPage) followPageTheme(theme => this.applyTheme(theme));
 
         this.writeQueryManager = new WriteQueryManager(this, (this.config.databaseURL == null ? "Empty database" : this.config.databaseURL) + this.config.id);
 
@@ -243,6 +252,13 @@ export class MainEmbedded implements MainBase {
     }
 
 
+    /** Re-theme on the fly when the reader flips the page's dark-mode toggle. */
+    private applyTheme(theme: PageTheme) {
+        if (theme == this.config.theme) return;
+        this.config.theme = theme;
+        this.themeManager.switchTheme(theme);
+    }
+
     readConfig($div: JQuery<HTMLElement>) {
         let configJson: string | object = $div.data("sql-online");
         if (configJson != null && typeof configJson == "string") {
@@ -256,8 +272,11 @@ export class MainEmbedded implements MainBase {
         if (this.config.withErrorList == null) this.config.withErrorList = true;
         if (this.config.withBottomPanel == null) this.config.withBottomPanel = true;
 
-        // a misspelt theme should leave the IDE readable rather than half-styled
-        if (this.config.theme != "light") this.config.theme = "dark";
+        // A theme named in the config wins; otherwise the page says which one it
+        // is in and the IDE follows. A misspelt name counts as "not named" - that
+        // leaves the IDE readable rather than half-styled.
+        this.themeFollowsPage = this.config.theme != "light" && this.config.theme != "dark";
+        if (this.themeFollowsPage) this.config.theme = pageTheme() ?? "dark";
 
         if (!(this.config.withOutput || this.config.withFileList || this.config.withErrorList)) {
             this.config.withBottomPanel = false;
 
@@ -0,0 +1,63 @@
+/**
+ * Which theme the page around an embedded IDE is in.
+ *
+ * Hyperbook — and anything else built on GoogleChromeLabs' `<dark-mode-toggle>`
+ * — puts a toggle on the page and lets the reader choose. An IDE embedded in
+ * such a page should be in the same colours as the text around it rather than a
+ * dark rectangle in the middle of a light page, so where the page says which it
+ * is, the IDE follows.
+ *
+ * The element carries the reader's choice in its `mode` property ("dark" or
+ * "light") and announces changes with a `colorschemechange` event, which is all
+ * this module reads. Nothing here falls back to prefers-color-scheme: the
+ * toggle has already resolved that for the page it sits on, and a page without
+ * a toggle has said nothing about its colours at all.
+ */
+
+const TOGGLE = "dark-mode-toggle";
+
+export type PageTheme = "dark" | "light";
+
+type ToggleElement = Element & { mode?: string };
+
+function toggleElement(): ToggleElement | null {
+    return document.querySelector<ToggleElement>(TOGGLE);
+}
+
+/**
+ * The page's theme, or undefined where the page does not say.
+ *
+ * The property is read before the attribute because that is where the element
+ * keeps the reader's choice; the attribute covers the moment before the custom
+ * element has been upgraded, when the markup is on the page but its script has
+ * not run yet.
+ */
+export function pageTheme(): PageTheme | undefined {
+    const toggle = toggleElement();
+    if (!toggle) return undefined;
+    const mode = toggle.mode ?? toggle.getAttribute("mode");
+    return mode == "dark" || mode == "light" ? mode : undefined;
+}
+
+/**
+ * Report the page's theme whenever the reader changes it — and once as soon as
+ * the toggle has been upgraded, because a toggle whose script loads after ours
+ * has no `mode` to read at the time the IDE starts up.
+ *
+ * There is nothing to unsubscribe from: an embedded IDE lives as long as the
+ * page it is written into.
+ */
+export function followPageTheme(onChange: (theme: PageTheme) => void): void {
+    const toggle = toggleElement();
+    if (!toggle) return;
+
+    const report = () => {
+        const theme = pageTheme();
+        if (theme) onChange(theme);
+    };
+
+    toggle.addEventListener("colorschemechange", report);
+    // stays pending forever on a page that never defines the element, which is
+    // the same as never reporting - and the listener above never fires either
+    customElements?.whenDefined(TOGGLE).then(report).catch(() => { });
+}