diff --git a/DistFiles/localization/en/BloomLowPriority.xlf b/DistFiles/localization/en/BloomLowPriority.xlf
index ea32e7a4e41e..b09b7d476b53 100644
--- a/DistFiles/localization/en/BloomLowPriority.xlf
+++ b/DistFiles/localization/en/BloomLowPriority.xlf
@@ -353,6 +353,21 @@
         <note>ID: CollectionTab.BookMenu.MoveToCurrentCollection</note>
         <note>{0} will be replaced with the name of the collection that the user currently has open for editing.</note>
       </trans-unit>
+      <trans-unit id="EditTab.Toolbox.Games.NewTheme" translate="no">
+        <source xml:lang="en">New…</source>
+        <note>ID: EditTab.Toolbox.Games.NewTheme</note>
+        <note>An item in the game "Theme" dropdown in the Games tool of the Edit tab's toolbox. Choosing it starts a brand-new game theme in the theme editor. The trailing ellipsis (…) signals that an editor will open.</note>
+      </trans-unit>
+      <trans-unit id="EditTab.Toolbox.Games.CustomizeTheme" translate="no">
+        <source xml:lang="en">Customize…</source>
+        <note>ID: EditTab.Toolbox.Games.CustomizeTheme</note>
+        <note>An item in the game "Theme" dropdown in the Games tool of the Edit tab's toolbox. Choosing it creates a new game theme that starts as a copy of the theme currently applied, then opens it in the theme editor. The trailing ellipsis (…) signals that an editor will open.</note>
+      </trans-unit>
+      <trans-unit id="EditTab.Toolbox.Games.EditThemeColors" translate="no">
+        <source xml:lang="en">Edit theme colors</source>
+        <note>ID: EditTab.Toolbox.Games.EditThemeColors</note>
+        <note>Tooltip (hover text) on the pencil/edit button next to the game "Theme" dropdown in the Games tool of the Edit tab's toolbox. Clicking the button opens the game theme editor to change the current theme's colors.</note>
+      </trans-unit>
       <trans-unit id="EditTab.CopyTextFailed" translate="no" sil:dynamic="true">
         <source xml:lang="en">Bloom was not able to copy that.</source>
         <note>ID: EditTab.CopyTextFailed</note>
diff --git a/PAPERCUTS.md b/PAPERCUTS.md
index 4bd3f3489843..b3c072fbe907 100644
--- a/PAPERCUTS.md
+++ b/PAPERCUTS.md
@@ -84,9 +84,21 @@ House rules:
   complete runs, re-triaged from scratch a third time in one day. Developer chose "log it as a
   papercut so the wrapper gets fixed", so this is now waiting on a fix rather than another
   re-triage.
+- seen again: 2026-07-27, preflight of game-theme-editor (PR #8086) — **the count is no longer 9,
+  it is 19**, so "the known 9" is now a misleading baseline that costs time rather than saving it.
+  The extra 10 are the same class of problem (the private output tree lacks files the fixtures
+  expect): 8 × `CompressBookForDevice_*` and 2 × `AddAudioOverlay_NoSubElementPlaybackModes_*`,
+  failing with `DirectoryNotFoundException`, `ArgumentException: The value cannot be an empty
+  string (Parameter 'path')`, `ArgumentException: Drive name must be a root directory`, and one
+  stylesheet-hash mismatch. Enumerating them needed `--logger "trx;LogFileName=cs.trx"` and
+  parsing `src/BloomTests/TestResults/cs.trx`, because the console summary only prints the count
+  and piping the run through `tail` discards the per-test lines. **Tip for the next agent:** use
+  the trx logger from the start, and treat the expected-failure set as "PdfMaker + XMatter +
+  BloomPub/publish path fixtures", not a fixed number.
 - **Idea:** Make the wrapper copy/link `BloomPdfMaker.exe` into its private output tree and fix
-  the xmatter file-locator path (or document the 9 known failures in AGENTS.md as expected under
-  the wrapper).
+  the xmatter file-locator path (or document the known failures in AGENTS.md as expected under
+  the wrapper). Whatever the fix, record the expected set *by test-class pattern* rather than by
+  count, since the count grows as master adds tests in the same areas.
 - **Context:** BloomDesktop, found during `/preflight` of PR #8067 (speedUpCSharpTests).
 
 
@@ -102,6 +114,18 @@ House rules:
 - **Idea:** Regenerate/commit the lockfile once with the pinned pnpm so committed state
   matches `packageManager` output, or document the exact pnpm invocation the team uses so
   installs are format-stable. Until then, hash bumps need a manual lock edit.
+- **Correction + much cheaper workaround (2026-07-27, preflight of PR #8086):** the committed
+  style is not an "older pnpm serialization" — it is simply **prettier's** output. `pnpm-lock.yaml`
+  is not in `.prettierignore`, so prettier owns the file, and running
+  `node_modules/.bin/prettier --write pnpm-lock.yaml` right after any `pnpm install` restores the
+  committed style exactly (verified: `--check` then passes, and the diff drops from ~30,400 lines
+  to only the lines the install actually changed). So there is **no need to hand-patch hash
+  occurrences** — install normally, then run prettier on the lock. This branch had arrived with an
+  un-prettified lock, which is what made its diff 30,400 lines; one prettier run reduced it to 58.
+- **Better idea, given the above:** add `pnpm-lock.yaml` to the pre-commit prettier/lint-staged
+  step so the reformat can never be forgotten, or add it to `.prettierignore` and accept pnpm's
+  own style. Either removes the drift permanently; the current state (prettier owns it, pnpm
+  rewrites it, nothing enforces re-running prettier) is the worst of both.
 - **Context:** BL image-chooser integration PR (BloomDesktop #8059); local pnpm 11.5.2.
 
 ## 2026-07-11 — Can't screenshot Bloom's WinForms modal dialogs via CDP
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/games/ThemeChooser.tsx b/src/BloomBrowserUI/bookEdit/toolbox/games/ThemeChooser.tsx
index 9529b1e3bd29..523858e7306f 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/games/ThemeChooser.tsx
+++ b/src/BloomBrowserUI/bookEdit/toolbox/games/ThemeChooser.tsx
@@ -8,9 +8,28 @@ import {
     toolboxMenuPopupTheme,
 } from "../../../bloomMaterialUITheme";
 import MenuItem from "@mui/material/MenuItem";
+import Divider from "@mui/material/Divider";
 import { Div } from "../../../react_components/l10nComponents";
+import { useL10n } from "../../../react_components/l10nHooks";
 import { InfoIconUrl } from "../../../react_components/icons/InfoIconUrl";
 import BloomSelect from "../../../react_components/bloomSelect";
+import EditIcon from "@mui/icons-material/Edit";
+import IconButton from "@mui/material/IconButton";
+import { getAsync } from "../../../utils/bloomApi";
+import { useMountEffect } from "../../../utils/useMountEffect";
+import {
+    showGameThemeEditor,
+    showNewGameThemeEditor,
+    showCustomizeGameThemeEditor,
+    isGameThemeEditorOpen,
+    subscribeGameThemeEditorOpen,
+    isFactoryThemeSlug,
+    resolveThemeHeaderColors,
+} from "./gameThemeEditorHost";
+
+// Sentinel values for the "New…" and "Customize…" items in the theme dropdown (not real themes).
+const kNewThemeValue = "__new_game_theme__";
+const kCustomizeThemeValue = "__customize_game_theme__";
 
 const getPage = () => {
     const pageBody = ToolBox.getPage();
@@ -44,8 +63,122 @@ export const ThemeChooser: React.FunctionComponent<{
     // gameThemePrefix, or "default" if there is none (but migration code and this tool makes sure
     // that game pages always do).
     const [currentTheme, setCurrentTheme] = useState("");
+    // While the floating theme editor is open it owns theme changes, so we disable the
+    // dropdown to avoid switching themes out from under it. The editor can be closed from
+    // its own controls, so we track its open state via the host's subscription.
+    const [editorOpen, setEditorOpen] = useState(isGameThemeEditorOpen());
+    // Bumped when the editor closes, so we re-scan the available themes: a save may have added
+    // or renamed one (a rename removes the old name's rule from the page).
+    const [themesRefreshKey, setThemesRefreshKey] = useState(0);
+    useMountEffect(() => {
+        setEditorOpen(isGameThemeEditorOpen());
+        return subscribeGameThemeEditorOpen(() => {
+            const open = isGameThemeEditorOpen();
+            setEditorOpen(open);
+            if (!open) setThemesRefreshKey((k) => k + 1);
+        });
+    });
+    // Whether Bloom is running from source (developers can edit factory themes). Non-developers
+    // don't get the edit button on factory themes, since they can't change them.
+    const [isDeveloper, setIsDeveloper] = useState(false);
+    useMountEffect(() => {
+        getAsync("gameThemeEditor/canSaveToFactorySource").then((result) => {
+            setIsDeveloper(!!(result && (result as { data?: boolean }).data));
+        });
+    });
+    // Tooltip for the edit (pencil) button that opens the game theme editor.
+    const editThemeColorsTitle = useL10n(
+        "Edit theme colors",
+        "EditTab.Toolbox.Games.EditThemeColors",
+    );
+    const currentThemeIsFactory = React.useMemo(
+        () => isFactoryThemeSlug(currentTheme),
+        // Re-evaluate when the page changes too, since the available stylesheets can change.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [currentTheme, props.pageGeneration],
+    );
+    // Each dropdown item previews its theme by using that theme's header colors (the menu
+    // items only render while the dropdown is open, so this styling shows only then).
+    const headerColors = React.useMemo(() => {
+        const map: Record<string, { bg: string; color: string }> = {};
+        for (const theme of themes)
+            map[theme] = resolveThemeHeaderColors(theme);
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [themes, props.pageGeneration]);
+    // Which themes are factory (built-in) vs custom. We only run the localization system on
+    // factory names; custom theme names are user-defined and not in our localization system, so
+    // looking them up just clutters the screen with "untranslated" warnings.
+    const themeIsFactory = React.useMemo(() => {
+        const map: Record<string, boolean> = {};
+        for (const theme of themes) map[theme] = isFactoryThemeSlug(theme);
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [themes, props.pageGeneration]);
+    // The dropdown lists factory themes first, then a divider and "New…", then the user's
+    // custom themes. Partition the (already sorted) themes accordingly.
+    const factoryThemes = React.useMemo(
+        () => themes.filter((theme) => themeIsFactory[theme]),
+        [themes, themeIsFactory],
+    );
+    const customThemes = React.useMemo(
+        () => themes.filter((theme) => !themeIsFactory[theme]),
+        [themes, themeIsFactory],
+    );
+    // Render one theme as a dropdown item, previewing it with its own header colors.
+    const renderThemeItem = (theme: string) => (
+        <MenuItem
+            value={theme}
+            key={theme}
+            disabled={false}
+            // Inline style so the theme's header colors win over MUI's hover/selected background.
+            style={{
+                backgroundColor: headerColors[theme]?.bg || undefined,
+                color: headerColors[theme]?.color || undefined,
+            }}
+        >
+            {themeIsFactory[theme] ? (
+                <Div
+                    l10nKey={`EditTab.Toolbox.Games.Themes.${theme}`}
+                    // Suppress the "untranslated" warning: dev-added source
+                    // themes won't have localization entries either.
+                    temporarilyDisableI18nWarning={true}
+                >
+                    {isMissingTheme(theme)
+                        ? `(Missing) ${getThemeLabel(theme)}`
+                        : getThemeLabel(theme)}
+                </Div>
+            ) : (
+                // Custom theme: render the name as-is; never run localization.
+                <span>
+                    {isMissingTheme(theme)
+                        ? `(Missing) ${getThemeLabel(theme)}`
+                        : getThemeLabel(theme)}
+                </span>
+            )}
+        </MenuItem>
+    );
+    // A fresh, unused "Untitled Theme N" name for a brand-new or customized theme.
+    const nextUntitledName = () => {
+        let n = 1;
+        while (themes.includes(`untitled-theme-${n}`)) n++;
+        return `Untitled Theme ${n}`;
+    };
+    // "New…": a brand-new theme based on the default factory theme (Blue On White).
+    const handleNewTheme = () => showNewGameThemeEditor(nextUntitledName());
+    // "Customize…": a new theme that starts as a copy of the theme currently applied.
+    const handleCustomizeTheme = () =>
+        showCustomizeGameThemeEditor(nextUntitledName());
     const handleChooseTheme = (event) => {
         const newTheme = event.target.value;
+        if (newTheme === kNewThemeValue) {
+            handleNewTheme();
+            return;
+        }
+        if (newTheme === kCustomizeThemeValue) {
+            handleCustomizeTheme();
+            return;
+        }
         if (newTheme === currentTheme) {
             return;
         }
@@ -143,8 +276,11 @@ export const ThemeChooser: React.FunctionComponent<{
         );
 
         // We don't need to run again if currentTheme changes, since it can only change to something
-        // that's already in the list (except just possibly when pageGeneration changes).
-    }, [props.pageGeneration]);
+        // that's already in the list (except just possibly when pageGeneration changes). We also
+        // re-run when the editor closes (themesRefreshKey), since a save/rename may have changed
+        // the set of themes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.pageGeneration, themesRefreshKey]);
     return (
         <ThemeProvider theme={toolboxMenuPopupTheme}>
             <div
@@ -193,39 +329,91 @@ export const ThemeChooser: React.FunctionComponent<{
                     }}
                 />
             </div>
-            <BloomSelect
-                variant="standard"
-                value={currentTheme}
-                onChange={(event) => {
-                    handleChooseTheme(event);
-                }}
-                inputProps={{
-                    name: "style",
-                    id: "game-theme-dropdown",
-                }}
+            <div
                 css={css`
-                    svg.MuiSvgIcon-root {
-                        color: white !important;
-                    }
-                    ul {
-                        background-color: ${kOptionPanelBackgroundColor} !important;
-                    }
-                    fieldset {
-                        border-color: rgba(255, 255, 255, 0.5) !important;
-                    }
+                    display: flex;
+                    align-items: center;
                 `}
-                size="small"
             >
-                {themes.map((theme) => (
-                    <MenuItem value={theme} key={theme} disabled={false}>
-                        <Div l10nKey={`EditTab.Toolbox.Games.Themes.${theme}`}>
-                            {isMissingTheme(theme)
-                                ? `(Missing) ${getThemeLabel(theme)}`
-                                : getThemeLabel(theme)}
+                <BloomSelect
+                    variant="standard"
+                    value={currentTheme}
+                    disabled={editorOpen}
+                    onChange={(event) => {
+                        handleChooseTheme(event);
+                    }}
+                    inputProps={{
+                        name: "style",
+                        id: "game-theme-dropdown",
+                    }}
+                    css={css`
+                        flex: 1;
+                        // Allow the select to shrink below its content width so a long theme
+                        // name truncates (with an ellipsis) instead of pushing the edit button
+                        // out of the narrow toolbox.
+                        min-width: 0;
+                        .MuiSelect-select {
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                        // While the editor is open the dropdown is disabled (so themes can't be
+                        // switched out from under it), but MUI's default disabled styling greys the
+                        // text to near-invisible on the dark toolbox. Keep it readable.
+                        .MuiSelect-select.Mui-disabled {
+                            color: white !important;
+                            -webkit-text-fill-color: white !important;
+                        }
+                        svg.MuiSvgIcon-root {
+                            color: white !important;
+                        }
+                        ul {
+                            background-color: ${kOptionPanelBackgroundColor} !important;
+                        }
+                        fieldset {
+                            border-color: rgba(255, 255, 255, 0.5) !important;
+                        }
+                    `}
+                    size="small"
+                >
+                    {/* Factory themes first, then a divider, then "New…", then custom themes. */}
+                    {factoryThemes.map(renderThemeItem)}
+                    <Divider />
+                    {/* Not themes: "New…" starts from Blue On White; "Customize…" copies the
+                        current theme. Both open the editor on a new, unsaved theme. */}
+                    <MenuItem value={kNewThemeValue} key={kNewThemeValue}>
+                        <Div l10nKey="EditTab.Toolbox.Games.NewTheme">New…</Div>
+                    </MenuItem>
+                    <MenuItem
+                        value={kCustomizeThemeValue}
+                        key={kCustomizeThemeValue}
+                    >
+                        <Div l10nKey="EditTab.Toolbox.Games.CustomizeTheme">
+                            Customize…
                         </Div>
                     </MenuItem>
-                ))}
-            </BloomSelect>
+                    {customThemes.map(renderThemeItem)}
+                </BloomSelect>
+                {/* Non-developers can't change factory themes, so don't offer the edit button
+                    for them on a factory theme (they can still use "New…" to make a copy). */}
+                {(isDeveloper || !currentThemeIsFactory) && (
+                    <IconButton
+                        id="game-theme-edit-button"
+                        size="small"
+                        // Opens the floating game theme editor over the live page so it can recolor
+                        // the real game in real time. Mounted from here (toolbox) into the page document.
+                        onClick={() => showGameThemeEditor()}
+                        title={editThemeColorsTitle}
+                        css={css`
+                            color: white !important;
+                            margin-left: 4px;
+                            flex-shrink: 0;
+                        `}
+                    >
+                        <EditIcon fontSize="small" />
+                    </IconButton>
+                )}
+            </div>
         </ThemeProvider>
     );
 };
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/games/gameThemeEditorHost.ts b/src/BloomBrowserUI/bookEdit/toolbox/games/gameThemeEditorHost.ts
new file mode 100644
index 000000000000..1f88b66b2315
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/games/gameThemeEditorHost.ts
@@ -0,0 +1,512 @@
+// Bloom-side host for the self-contained game theme editor project (src/gameThemeEditor).
+//
+// This runs in the TOOLBOX iframe (which is served live by vite dev), and reaches the live
+// editable page cross-frame via ToolBox.getPage() — exactly the pattern ThemeChooser already
+// uses to apply theme classes. It mounts the editor panel into a bloom-ui container inside the
+// editable-page document so the panel floats over the real game and can recolor it in real time.
+//
+// We deliberately do NOT route through the page-frame bundle (editablePageBundle): on this
+// branch that bundle is not served by vite dev (see ViteReadMe.txt), so a page-frame export
+// would be stale/missing during development. Driving from the toolbox works in dev and prod.
+//
+// Coupling to the editor is one-directional: we import its mount/unmount + types + the variable
+// name list, and we hand it a concrete IGameThemeEditorHost. The editor imports nothing from Bloom.
+
+import { mount, unmount, themeVariableNames } from "gameThemeEditor";
+import type { IGameThemeEditorHost, Theme } from "gameThemeEditor";
+import { getAsync, postJsonAsync } from "../../../utils/bloomApi";
+import { ToolBox } from "../toolbox";
+
+const kGameThemePrefix = "game-theme-";
+const kEditorContainerClass = "bloom-ui-game-theme-editor";
+// Live-preview <style> element: marked bloom-ui so Bloom never saves it into the book.
+const kPreviewStyleId = "gameThemeEditorPreviewStyle";
+
+// The live .bloom-page element in the editable-page iframe (reached cross-frame from the toolbox).
+const getLivePage = (): HTMLElement | null => {
+    const pageBody = ToolBox.getPage();
+    return (
+        (pageBody?.getElementsByClassName("bloom-page")[0] as HTMLElement) ??
+        null
+    );
+};
+
+const getCurrentSlug = (page: HTMLElement): string => {
+    const missing = page.getAttribute("data-missing-game-theme");
+    if (missing) return missing;
+    const cls = Array.from(page.classList).find((c) =>
+        c.startsWith(kGameThemePrefix),
+    );
+    return cls ? cls.substring(kGameThemePrefix.length) : "";
+};
+
+/** Where a theme is defined. "none" means new/unsaved (only an injected <style>, or absent). */
+export type ThemeSource = "factory" | "collection" | "book" | "none";
+
+const classifyStylesheet = (
+    href: string | null,
+): "collection" | "book" | "factory" | "inline" => {
+    if (!href) return "inline"; // an injected <style> (transient)
+    if (href.includes("customCollectionStyles")) return "collection";
+    if (href.includes("customBookStyles")) return "book";
+    return "factory"; // a shipped file such as Games.css
+};
+
+/** Which stylesheets currently define a theme slug. */
+export interface ThemeLocations {
+    inCollection: boolean;
+    inBook: boolean;
+    inFactory: boolean;
+}
+
+/** Find which stylesheet kinds (collection/book/factory) currently define a theme slug. */
+export const getThemeLocationsForSlug = (slug: string): ThemeLocations => {
+    const result: ThemeLocations = {
+        inCollection: false,
+        inBook: false,
+        inFactory: false,
+    };
+    const page = getLivePage();
+    if (!page || !slug) return result;
+    const re = new RegExp(`\\.${kGameThemePrefix}${slug}(?![\\w-])`);
+    for (const sheet of Array.from(page.ownerDocument.styleSheets)) {
+        let rules: CSSRuleList;
+        try {
+            rules = sheet.cssRules;
+        } catch {
+            continue; // cross-origin; skip
+        }
+        let definesSlug = false;
+        for (const rule of Array.from(rules)) {
+            // Duck-type instead of `instanceof CSSStyleRule`: these rules belong to the page
+            // document's realm, so instanceof against this (toolbox) realm's CSSStyleRule fails.
+            const selector = (rule as CSSStyleRule).selectorText;
+            if (selector && re.test(selector)) {
+                definesSlug = true;
+                break;
+            }
+        }
+        if (!definesSlug) continue;
+        const where = classifyStylesheet(sheet.href);
+        if (where === "collection") result.inCollection = true;
+        else if (where === "book") result.inBook = true;
+        else if (where === "factory") result.inFactory = true;
+    }
+    return result;
+};
+
+/**
+ * Classify where a theme slug is defined. A custom location (the user's book or collection)
+ * wins over the shipped factory stylesheet, since that's the copy the user controls. Collection
+ * wins over book if (unusually) both exist.
+ */
+export const getThemeSourceForSlug = (slug: string): ThemeSource => {
+    const loc = getThemeLocationsForSlug(slug);
+    if (loc.inCollection) return "collection";
+    if (loc.inBook) return "book";
+    if (loc.inFactory) return "factory";
+    return "none";
+};
+
+/**
+ * Whether a theme is a built-in/factory theme (defined only in a shipped stylesheet). Themes the
+ * user has saved to a book or collection are "custom" and may be renamed; factory themes may not.
+ */
+export const isFactoryThemeSlug = (slug: string): boolean =>
+    getThemeSourceForSlug(slug) === "factory";
+
+/**
+ * Remove a theme's rule from the live page (used after a rename so the old name disappears
+ * without a reload): drop our injected <style> for it and delete any matching rules from the
+ * loaded stylesheets. The authoritative copy on disk is updated separately by the API.
+ */
+const removeLiveThemeRule = (
+    page: HTMLElement,
+    slug: string,
+    where?: "collection" | "book",
+) => {
+    const doc = page.ownerDocument;
+    // Only drop our injected <style> when removing everywhere (a rename or a full delete);
+    // a targeted delete leaves it so any copy in the other location keeps rendering.
+    if (!where) doc.getElementById(`gameThemeEditorSaved-${slug}`)?.remove();
+    const re = new RegExp(`\\.${kGameThemePrefix}${slug}(?![\\w-])`);
+    for (const sheet of Array.from(doc.styleSheets)) {
+        if (where && classifyStylesheet(sheet.href) !== where) continue;
+        let rules: CSSRuleList;
+        try {
+            rules = sheet.cssRules;
+        } catch {
+            continue;
+        }
+        for (let i = rules.length - 1; i >= 0; i--) {
+            const selector = (rules[i] as CSSStyleRule).selectorText;
+            if (selector && re.test(selector)) {
+                try {
+                    sheet.deleteRule(i);
+                } catch {
+                    // some stylesheets disallow deletion; ignore
+                }
+            }
+        }
+    }
+};
+
+// The theme to fall back to when the current theme is deleted entirely. blue-on-white is a
+// built-in factory theme that always exists. It's also the base for a brand-"New" theme.
+const kDefaultThemeSlug = "blue-on-white";
+
+// When the editor is opened on a NEW theme, we switch the live page to the base theme so the
+// editor reads its colors and previews it. This remembers the theme that was showing so we can
+// restore it if the user cancels; a successful save clears it (the saved theme is applied instead).
+let themeToRestoreOnClose: string | null = null;
+
+const switchPageToTheme = (page: HTMLElement, slug: string) => {
+    for (const c of Array.from(page.classList))
+        if (c.startsWith(kGameThemePrefix)) page.classList.remove(c);
+    page.removeAttribute("data-missing-game-theme");
+    page.classList.add(`${kGameThemePrefix}${slug}`);
+};
+
+// After deleting a theme from one location, if it no longer exists anywhere, clean up any
+// leftover live rule and move the page to the default theme so it isn't left referencing nothing.
+const afterDelete = (page: HTMLElement, slug: string) => {
+    const loc = getThemeLocationsForSlug(slug);
+    if (!loc.inCollection && !loc.inBook && !loc.inFactory) {
+        removeLiveThemeRule(page, slug);
+        switchPageToTheme(page, kDefaultThemeSlug);
+    }
+};
+
+/**
+ * Resolve a theme's header colors (background + text) so the chooser can preview each theme.
+ * We measure them off a throwaway .bloom-page element carrying the theme's class, letting the
+ * browser's real cascade derive the values exactly as it would on a real page.
+ */
+export const resolveThemeHeaderColors = (
+    slug: string,
+): { bg: string; color: string } => {
+    const page = getLivePage();
+    if (!page || !slug) return { bg: "", color: "" };
+    const doc = page.ownerDocument;
+    const probe = doc.createElement("div");
+    probe.className = `bloom-ui bloom-page ${kGameThemePrefix}${slug}`;
+    probe.style.cssText =
+        "position:absolute;left:-9999px;top:-9999px;width:0;height:0;visibility:hidden;";
+    doc.body.appendChild(probe);
+    const cs = doc.defaultView!.getComputedStyle(probe);
+    const colors = {
+        bg: cs.getPropertyValue("--game-header-bg-color").trim(),
+        color: cs.getPropertyValue("--game-header-color").trim(),
+    };
+    probe.remove();
+    return colors;
+};
+
+// Rebuild the live-preview style element from the current override map. We use !important on the
+// custom properties so the preview wins over the theme rule regardless of selector specificity or
+// stylesheet order, and keep it in a bloom-ui element so it is never persisted into the saved page.
+const previewOverrides: Record<string, string> = {};
+const applyPreview = (page: HTMLElement) => {
+    const doc = page.ownerDocument;
+    let style = doc.getElementById(kPreviewStyleId) as HTMLStyleElement | null;
+    if (!style) {
+        style = doc.createElement("style");
+        style.id = kPreviewStyleId;
+        style.className = "bloom-ui";
+        doc.head.appendChild(style);
+    }
+    const decls = Object.entries(previewOverrides)
+        .map(([name, value]) => `  ${name}: ${value} !important;`)
+        .join("\n");
+    style.textContent = `.bloom-page {\n${decls}\n}`;
+};
+
+// Forget all pending preview overrides. Done separately from removing the <style> so we can
+// always clear the map even if the page is gone, preventing stale overrides leaking into a
+// later session/page.
+const clearPreviewOverrides = () => {
+    for (const key of Object.keys(previewOverrides))
+        delete previewOverrides[key];
+};
+
+const clearPreview = (page: HTMLElement) => {
+    clearPreviewOverrides();
+    const style = page.ownerDocument.getElementById(kPreviewStyleId);
+    if (style) style.remove();
+};
+
+const generateRuleCss = (theme: Theme): string => {
+    const lines = [`.bloom-page.game-theme-${theme.slug} {`];
+    Object.keys(theme.variables)
+        .sort()
+        .forEach((name) => lines.push(`  ${name}: ${theme.variables[name]};`));
+    lines.push("}");
+    return lines.join("\n");
+};
+
+// Inject the saved theme's real rule as a bloom-ui <style> so the game-theme-<slug> class
+// resolves immediately (and the theme is discoverable by ThemeChooser) without a reload; the
+// authoritative copy is on disk. Then switch the page to that theme class and drop the preview.
+const applySavedTheme = (page: HTMLElement, theme: Theme) => {
+    const doc = page.ownerDocument;
+    const id = `gameThemeEditorSaved-${theme.slug}`;
+    let style = doc.getElementById(id) as HTMLStyleElement | null;
+    if (!style) {
+        style = doc.createElement("style");
+        style.id = id;
+        style.className = "bloom-ui";
+        doc.head.appendChild(style);
+    }
+    style.textContent = generateRuleCss(theme);
+
+    for (const c of Array.from(page.classList))
+        if (c.startsWith(kGameThemePrefix)) page.classList.remove(c);
+    page.removeAttribute("data-missing-game-theme");
+    page.classList.add(`${kGameThemePrefix}${theme.slug}`);
+
+    clearPreview(page);
+    // The new theme is now applied, so there's nothing to restore on close.
+    themeToRestoreOnClose = null;
+};
+
+// opts.newName is set when the editor was opened via "New": the editor seeds its colors from
+// the current theme but presents this name, treats the theme as custom (renamable), and saves
+// under a new slug without deleting the original.
+const makeHost = (
+    page: HTMLElement,
+    opts?: { newName?: string },
+): IGameThemeEditorHost => ({
+    getCurrentThemeName: () => getCurrentSlug(page),
+
+    getNewThemeName: () => opts?.newName ?? null,
+
+    isFactoryTheme: () =>
+        opts?.newName ? false : isFactoryThemeSlug(getCurrentSlug(page)),
+
+    getThemeSource: () =>
+        opts?.newName ? "none" : getThemeSourceForSlug(getCurrentSlug(page)),
+
+    getThemeLocations: () =>
+        opts?.newName
+            ? { inCollection: false, inBook: false }
+            : (() => {
+                  const l = getThemeLocationsForSlug(getCurrentSlug(page));
+                  return { inCollection: l.inCollection, inBook: l.inBook };
+              })(),
+
+    readAppliedVariables: () => {
+        const computed = page.ownerDocument.defaultView!.getComputedStyle(page);
+        const result: Record<string, string> = {};
+        for (const name of themeVariableNames)
+            result[name] = computed.getPropertyValue(name).trim();
+        return result;
+    },
+
+    getThemeDefinition: (slug: string) => {
+        const result: Record<string, string> = {};
+        if (!slug) return result;
+        const needle = `${kGameThemePrefix}${slug}`;
+        // Scan the PAGE document's stylesheets (where gamesThemes.css and customCollectionStyles.css
+        // are loaded), not the toolbox's.
+        for (const sheet of Array.from(page.ownerDocument.styleSheets)) {
+            let rules: CSSRuleList;
+            try {
+                rules = sheet.cssRules;
+            } catch {
+                continue; // cross-origin stylesheet; skip
+            }
+            for (const rule of Array.from(rules)) {
+                // Duck-type rather than `instanceof CSSStyleRule`: rules come from the page
+                // document's realm, where instanceof against this realm's class fails.
+                const styleRule = rule as CSSStyleRule;
+                if (!styleRule.selectorText || !styleRule.style) continue;
+                // Match the theme's own class but not a longer name that merely starts with it.
+                const re = new RegExp(`\\.${needle}(?![\\w-])`);
+                if (!re.test(styleRule.selectorText)) continue;
+                for (let i = 0; i < styleRule.style.length; i++) {
+                    const prop = styleRule.style[i];
+                    if (prop.startsWith("--game"))
+                        result[prop] = styleRule.style
+                            .getPropertyValue(prop)
+                            .trim();
+                }
+            }
+        }
+        return result;
+    },
+
+    setLiveVariable: (name: string, value: string | undefined) => {
+        if (value === undefined) delete previewOverrides[name];
+        else previewOverrides[name] = value;
+        applyPreview(page);
+    },
+
+    clearLiveOverrides: () => clearPreview(page),
+
+    saveToBook: async (theme: Theme, renameFrom?: string) => {
+        await postJsonAsync("gameThemeEditor/saveToBook", {
+            ...theme,
+            renameFrom,
+        });
+        applySavedTheme(page, theme);
+        if (renameFrom && renameFrom !== theme.slug)
+            removeLiveThemeRule(page, renameFrom);
+    },
+
+    saveToCollection: async (theme: Theme, renameFrom?: string) => {
+        await postJsonAsync("gameThemeEditor/saveToCollection", {
+            ...theme,
+            renameFrom,
+        });
+        applySavedTheme(page, theme);
+        if (renameFrom && renameFrom !== theme.slug)
+            removeLiveThemeRule(page, renameFrom);
+    },
+
+    saveToFactorySource: async (theme: Theme, renameFrom?: string) => {
+        await postJsonAsync("gameThemeEditor/saveToFactorySource", {
+            ...theme,
+            renameFrom,
+        });
+        applySavedTheme(page, theme);
+        if (renameFrom && renameFrom !== theme.slug)
+            removeLiveThemeRule(page, renameFrom);
+    },
+
+    themeExists: (slug: string) => {
+        const l = getThemeLocationsForSlug(slug);
+        return l.inCollection || l.inBook || l.inFactory;
+    },
+
+    deleteFromCollection: async (slug: string) => {
+        await postJsonAsync("gameThemeEditor/deleteFromCollection", { slug });
+        removeLiveThemeRule(page, slug, "collection");
+        afterDelete(page, slug);
+    },
+
+    deleteFromBook: async (slug: string) => {
+        await postJsonAsync("gameThemeEditor/deleteFromBook", { slug });
+        removeLiveThemeRule(page, slug, "book");
+        afterDelete(page, slug);
+    },
+
+    canSaveToFactorySource: async () => {
+        const result = await getAsync("gameThemeEditor/canSaveToFactorySource");
+        return !!(result && (result as { data?: boolean }).data);
+    },
+
+    close: () => hideGameThemeEditor(),
+});
+
+// Whether the floating editor is currently open, with a tiny subscription so the toolbox
+// (ThemeChooser) can disable the theme dropdown while the editor owns theme changes.
+let gameThemeEditorOpen = false;
+const openListeners = new Set<() => void>();
+const notifyOpenChange = () => openListeners.forEach((l) => l());
+
+/** Whether the floating game theme editor is currently open. */
+export const isGameThemeEditorOpen = (): boolean => gameThemeEditorOpen;
+
+/** Subscribe to open/close changes; returns an unsubscribe function. */
+export const subscribeGameThemeEditorOpen = (
+    listener: () => void,
+): (() => void) => {
+    openListeners.add(listener);
+    return () => {
+        openListeners.delete(listener);
+    };
+};
+
+// The document the floating panel mounts into. We use the TOP-LEVEL workspace document
+// (not the small #page iframe) so the panel can be dragged/resized across the whole Bloom
+// window and is never clipped by the page iframe. The live recoloring still targets the page
+// document via the host closure, independent of where the panel is shown. All Bloom frames are
+// same-origin, so window.top.document is reachable.
+const getPanelDocument = (): Document => {
+    try {
+        if (window.top && window.top.document) return window.top.document;
+    } catch {
+        // cross-origin (not expected in Bloom) — fall back below
+    }
+    return document;
+};
+
+// Open the editor over the live page; opts.newName starts it as a copy ("New") of the current
+// theme under that name. Shared by the normal and "New" entry points below.
+const openEditor = (opts?: { newName?: string; baseSlug?: string }): void => {
+    const page = getLivePage();
+    if (!page) return;
+    // For a NEW theme based on a specific theme, switch the live page to that base theme so the
+    // editor reads its colors and previews it. Remember the theme that was showing so we can put
+    // it back if the user cancels (a successful save applies the new theme instead).
+    if (
+        opts?.newName &&
+        opts.baseSlug &&
+        opts.baseSlug !== getCurrentSlug(page)
+    ) {
+        themeToRestoreOnClose = getCurrentSlug(page);
+        switchPageToTheme(page, opts.baseSlug);
+    }
+    const doc = getPanelDocument();
+    let container = doc.getElementsByClassName(
+        kEditorContainerClass,
+    )[0] as HTMLElement;
+    if (!container) {
+        container = doc.createElement("div");
+        // bloom-ui => never saved into the book; second class lets us find/remove it.
+        container.classList.add("bloom-ui", kEditorContainerClass);
+        // A full-viewport overlay so the floating panel (react-rnd) can be dragged/resized across
+        // the window and never lost off-screen. pointer-events none lets clicks outside the panel
+        // fall through to the page; the panel itself re-enables pointer-events.
+        container.style.cssText =
+            "position:fixed;inset:0;z-index:6000;pointer-events:none;";
+        doc.body.appendChild(container);
+    }
+    mount(container, makeHost(page, opts));
+    gameThemeEditorOpen = true;
+    notifyOpenChange();
+};
+
+/** Open the editor to edit the theme currently applied to the page. Called from the Games toolbox. */
+export const showGameThemeEditor = (): void => openEditor();
+
+/**
+ * Open the editor on a brand-new theme, pre-named (e.g. "Untitled Theme 3"), based on the
+ * default factory theme (Blue On White) rather than whatever theme is currently applied.
+ */
+export const showNewGameThemeEditor = (newName: string): void =>
+    openEditor({ newName, baseSlug: kDefaultThemeSlug });
+
+/**
+ * Open the editor on a new theme that starts as a copy of the theme currently applied to the
+ * page (so the user can customize an existing theme under a new name).
+ */
+export const showCustomizeGameThemeEditor = (newName: string): void => {
+    const page = getLivePage();
+    openEditor({
+        newName,
+        baseSlug: page ? getCurrentSlug(page) : kDefaultThemeSlug,
+    });
+};
+
+/** Close the editor, removing its container and reverting any unsaved live overrides. */
+export const hideGameThemeEditor = (): void => {
+    const page = getLivePage();
+    if (page) {
+        clearPreview(page);
+        // If we switched to a base theme for a "New"/"Customize" theme and the user didn't save,
+        // put the originally-showing theme back.
+        if (themeToRestoreOnClose)
+            switchPageToTheme(page, themeToRestoreOnClose);
+    } else clearPreviewOverrides(); // page gone: at least forget overrides so they can't leak
+    themeToRestoreOnClose = null;
+    const container = getPanelDocument().getElementsByClassName(
+        kEditorContainerClass,
+    )[0] as HTMLElement;
+    if (container) {
+        unmount(container);
+        container.remove();
+    }
+    gameThemeEditorOpen = false;
+    notifyOpenChange();
+};
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/readers/libSynphony/jquery.text-markup.ts b/src/BloomBrowserUI/bookEdit/toolbox/readers/libSynphony/jquery.text-markup.ts
index 5e0f70ad89b9..a52e4fe0adff 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/readers/libSynphony/jquery.text-markup.ts
+++ b/src/BloomBrowserUI/bookEdit/toolbox/readers/libSynphony/jquery.text-markup.ts
@@ -394,17 +394,12 @@ import { ReaderToolsModel } from "../readerToolsModel";
                     );
                     // CKeditor copies the highlight style as a barebones inline style containing
                     // only the background-color property.
-                    return (
-                        !!style &&
-                        /^background-color: [^;]*;$/.test(style)
-                    );
+                    return !!style && /^background-color: [^;]*;$/.test(style);
                 })
                 .contents()
                 .unwrap();
             // remove spans belonging to CKEditor that are hidden.
-            $(this)
-                .find("span[id^=cke_][style*='display: none;']")
-                .remove();
+            $(this).find("span[id^=cke_][style*='display: none;']").remove();
         });
     };
 
diff --git a/src/BloomBrowserUI/package.json b/src/BloomBrowserUI/package.json
index e3c42ca1ddc1..d7f8cf7275ce 100644
--- a/src/BloomBrowserUI/package.json
+++ b/src/BloomBrowserUI/package.json
@@ -125,6 +125,7 @@
         "@dnd-kit/core": "6.1.0",
         "@dnd-kit/sortable": "8.0.0",
         "@dnd-kit/utilities": "3.2.2",
+        "@emotion/cache": "11.10.5",
         "@emotion/core": "11.0.0",
         "@emotion/react": "11.14.0",
         "@emotion/styled": "11.14.1",
@@ -177,6 +178,7 @@
         "react-is": "18.3.1",
         "react-lazyload": "3.2.0",
         "react-movable": "3.3.1",
+        "react-rnd": "10.4.13",
         "react-select": "5.7.0",
         "react-slick": "0.31.0",
         "react-table": "6.11.5",
diff --git a/src/BloomBrowserUI/pnpm-lock.yaml b/src/BloomBrowserUI/pnpm-lock.yaml
index 0bf97a44022c..d6001a0b09d1 100644
--- a/src/BloomBrowserUI/pnpm-lock.yaml
+++ b/src/BloomBrowserUI/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
             "@dnd-kit/utilities":
                 specifier: 3.2.2
                 version: 3.2.2(react@18.3.1)
+            "@emotion/cache":
+                specifier: 11.10.5
+                version: 11.10.5
             "@emotion/core":
                 specifier: 11.0.0
                 version: 11.0.0
@@ -180,6 +183,9 @@ importers:
             react-movable:
                 specifier: 3.3.1
                 version: 3.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+            react-rnd:
+                specifier: 10.4.13
+                version: 10.4.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
             react-select:
                 specifier: 5.7.0
                 version: 5.7.0(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1508,6 +1514,12 @@ packages:
                 integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==,
             }
 
+    "@emotion/cache@11.10.5":
+        resolution:
+            {
+                integrity: sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==,
+            }
+
     "@emotion/cache@11.14.0":
         resolution:
             {
@@ -1532,6 +1544,12 @@ packages:
                 integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==,
             }
 
+    "@emotion/memoize@0.8.1":
+        resolution:
+            {
+                integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==,
+            }
+
     "@emotion/memoize@0.9.0":
         resolution:
             {
@@ -1607,6 +1625,12 @@ packages:
                 integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==,
             }
 
+    "@emotion/weak-memoize@0.3.1":
+        resolution:
+            {
+                integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==,
+            }
+
     "@emotion/weak-memoize@0.4.0":
         resolution:
             {
@@ -8819,6 +8843,15 @@ packages:
             react: ">=16.9.0"
             react-dom: ">=16.9.0"
 
+    re-resizable@6.10.0:
+        resolution:
+            {
+                integrity: sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==,
+            }
+        peerDependencies:
+            react: ^16.13.1 || ^17.0.0 || ^18.0.0
+            react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
+
     react-avatar@3.10.0:
         resolution:
             {
@@ -8895,6 +8928,15 @@ packages:
             react: ">= 16.3.0"
             react-dom: ">= 16.3.0"
 
+    react-draggable@4.4.6:
+        resolution:
+            {
+                integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==,
+            }
+        peerDependencies:
+            react: ">= 16.3.0"
+            react-dom: ">= 16.3.0"
+
     react-dropdown-tree-select@2.8.0:
         resolution:
             {
@@ -9000,6 +9042,15 @@ packages:
             react: 0.14.x || 15.x || 16.x || 17.x
             react-dom: 0.14.x || 15.x || 16.x || 17.x
 
+    react-rnd@10.4.13:
+        resolution:
+            {
+                integrity: sha512-Vgbf0iihspcQ6nkaFhpOGWfmnuVbhkhoB0hBbYl8aRDA4horsQHESc4E1z7O/P27kFFjK2aqM0u5CGzfr9gEZA==,
+            }
+        peerDependencies:
+            react: ">=16.3.0"
+            react-dom: ">=16.3.0"
+
     react-select@5.7.0:
         resolution:
             {
@@ -10013,6 +10064,12 @@ packages:
             react-dom: ">= 16.8.0"
             react-is: ">= 16.8.0"
 
+    stylis@4.1.3:
+        resolution:
+            {
+                integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==,
+            }
+
     stylis@4.2.0:
         resolution:
             {
@@ -10307,6 +10364,12 @@ packages:
                 integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==,
             }
 
+    tslib@2.6.2:
+        resolution:
+            {
+                integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==,
+            }
+
     tslib@2.8.1:
         resolution:
             {
@@ -11894,6 +11957,14 @@ snapshots:
         transitivePeerDependencies:
             - supports-color
 
+    "@emotion/cache@11.10.5":
+        dependencies:
+            "@emotion/memoize": 0.8.1
+            "@emotion/sheet": 1.4.0
+            "@emotion/utils": 1.4.2
+            "@emotion/weak-memoize": 0.3.1
+            stylis: 4.1.3
+
     "@emotion/cache@11.14.0":
         dependencies:
             "@emotion/memoize": 0.9.0
@@ -11910,6 +11981,8 @@ snapshots:
         dependencies:
             "@emotion/memoize": 0.9.0
 
+    "@emotion/memoize@0.8.1": {}
+
     "@emotion/memoize@0.9.0": {}
 
     "@emotion/react@11.14.0(@types/react@18.3.31)(react@18.3.1)":
@@ -11965,6 +12038,8 @@ snapshots:
 
     "@emotion/utils@1.4.2": {}
 
+    "@emotion/weak-memoize@0.3.1": {}
+
     "@emotion/weak-memoize@0.4.0": {}
 
     "@esbuild/aix-ppc64@0.25.12":
@@ -16578,6 +16653,11 @@ snapshots:
             react-dom: 18.3.1(react@18.3.1)
             react-is: 18.3.1
 
+    re-resizable@6.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+        dependencies:
+            react: 18.3.1
+            react-dom: 18.3.1(react@18.3.1)
+
     react-avatar@3.10.0(prop-types@15.7.2)(react@18.3.1):
         dependencies:
             core-js: 3.49.0
@@ -16643,6 +16723,13 @@ snapshots:
             react: 18.3.1
             react-dom: 18.3.1(react@18.3.1)
 
+    react-draggable@4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+        dependencies:
+            clsx: 1.2.1
+            prop-types: 15.8.1
+            react: 18.3.1
+            react-dom: 18.3.1(react@18.3.1)
+
     react-dropdown-tree-select@2.8.0(prop-types@15.7.2)(react@18.3.1):
         dependencies:
             array.partial: 1.0.5
@@ -16703,6 +16790,14 @@ snapshots:
             react-dom: 18.3.1(react@18.3.1)
             react-draggable: 4.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
+    react-rnd@10.4.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+        dependencies:
+            re-resizable: 6.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+            react: 18.3.1
+            react-dom: 18.3.1(react@18.3.1)
+            react-draggable: 4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+            tslib: 2.6.2
+
     react-select@5.7.0(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
         dependencies:
             "@babel/runtime": 7.29.7
@@ -17466,6 +17561,8 @@ snapshots:
         transitivePeerDependencies:
             - "@babel/core"
 
+    stylis@4.1.3: {}
+
     stylis@4.2.0: {}
 
     subarg@1.0.0:
@@ -17601,6 +17698,8 @@ snapshots:
 
     tslib@1.14.1: {}
 
+    tslib@2.6.2: {}
+
     tslib@2.8.1: {}
 
     tunnel-agent@0.6.0:
diff --git a/src/BloomBrowserUI/tsconfig.json b/src/BloomBrowserUI/tsconfig.json
index 1e11ff53b4e9..55238641825c 100644
--- a/src/BloomBrowserUI/tsconfig.json
+++ b/src/BloomBrowserUI/tsconfig.json
@@ -40,7 +40,31 @@
         // this solved the 'foo' cannot be used as a JSX component. Its instance type 'foo' is not a valid JSX element,
         // which came in when we were at react 17 but some things are going towards 18
         "paths": {
-            "react": ["./node_modules/@types/react"]
+            "react": ["./node_modules/@types/react"],
+            // The self-contained game theme editor project (see vite.config.mts resolve.alias).
+            "gameThemeEditor": ["../gameThemeEditor/src/index.tsx"],
+            // The game theme editor's source lives in a sibling directory
+            // (../gameThemeEditor/src), so the type checker can't resolve its bare
+            // dependency imports by walking up into BloomBrowserUI/node_modules. Map
+            // them explicitly here, just as we do for "react" above. (The Vite build
+            // solves the same problem separately via optimizeDeps.include; see
+            // vite.config.mts.)
+            "react-dom": ["./node_modules/@types/react-dom"],
+            "react-dom/client": ["./node_modules/@types/react-dom/client"],
+            "@emotion/react": ["./node_modules/@emotion/react"],
+            // The editor's tsconfig sets jsxImportSource to @emotion/react, so every
+            // .tsx file there resolves its JSX factory through @emotion/react/jsx-runtime.
+            // Without these two entries that lookup fails from the sibling directory and
+            // every editor component reports TS2875 -- which the typecheck gate does not
+            // fail on, so the editor's JSX would silently go unchecked.
+            "@emotion/react/jsx-runtime": [
+                "./node_modules/@emotion/react/jsx-runtime"
+            ],
+            "@emotion/react/jsx-dev-runtime": [
+                "./node_modules/@emotion/react/jsx-dev-runtime"
+            ],
+            "@emotion/cache": ["./node_modules/@emotion/cache"],
+            "react-rnd": ["./node_modules/react-rnd"]
         }
     },
     "exclude": [
diff --git a/src/BloomBrowserUI/vite.config.mts b/src/BloomBrowserUI/vite.config.mts
index ee6d6b84b24c..594c1811bc24 100644
--- a/src/BloomBrowserUI/vite.config.mts
+++ b/src/BloomBrowserUI/vite.config.mts
@@ -600,6 +600,48 @@ export default defineConfig(async ({ command }) => {
     return {
         // PLUGINS: Extend Vite's functionality (runs during build and/or dev)
         plugins: [
+            // Resolve the game theme editor's bare dependency imports
+            // (@emotion/react, @emotion/cache, react, react-dom, react-rnd) from
+            // BloomBrowserUI's node_modules. The editor is a self-contained project
+            // whose source lives in a sibling directory (../gameThemeEditor/src; see
+            // its README.md), so Rollup/Vite can't find those deps by walking up out
+            // of that folder. Scoped to importers inside the editor directory, so
+            // resolution for the rest of the app is completely unchanged. Re-resolving
+            // through this.resolve (rather than aliasing to a path) keeps a single,
+            // deduped copy of react et al. and honors each package's exports map.
+            //
+            // Runs in every mode — production build, Vitest, AND the dev server —
+            // because the sibling-resolution problem is the same in all three (the dev
+            // server can't walk up out of ../gameThemeEditor to find react/react-dom/
+            // @emotion/react either). Applying it uniformly is the single mechanism for
+            // the editor's dep resolution; the optimizeDeps.include entries below are
+            // now belt-and-suspenders for dev pre-bundling.
+            {
+                name: "resolve-game-theme-editor-deps",
+                enforce: "pre",
+                async resolveId(source, importer) {
+                    if (
+                        !importer ||
+                        source.startsWith(".") ||
+                        path.isAbsolute(source)
+                    ) {
+                        return null;
+                    }
+                    const editorDir = path.resolve(
+                        __dirname,
+                        "../gameThemeEditor",
+                    );
+                    if (!path.resolve(importer).startsWith(editorDir)) {
+                        return null;
+                    }
+                    // Resolve as if imported from BloomBrowserUI's own root.
+                    return this.resolve(
+                        source,
+                        path.resolve(__dirname, "vite.config.mts"),
+                        { skipSelf: true },
+                    );
+                },
+            } as Plugin,
             // React plugin: Enables JSX, Fast Refresh, and React-specific optimizations
             react({
                 reactRefreshHost: `http://localhost:${devServerPort}`,
@@ -804,6 +846,12 @@ export default defineConfig(async ({ command }) => {
             // This matches our webpack configuration
             alias: {
                 "@": path.resolve(__dirname, "."), // @ = project root
+                // The self-contained game theme editor project (sibling of BloomBrowserUI).
+                // Bloom consumes its TypeScript source directly; see src/gameThemeEditor/README.md.
+                gameThemeEditor: path.resolve(
+                    __dirname,
+                    "../gameThemeEditor/src",
+                ),
                 // Browser shims for Node built-ins used by some dependencies
                 os: path.resolve(__dirname, "shims/os.ts"),
                 // Module resolution paths to match webpack configuration
@@ -893,6 +941,12 @@ export default defineConfig(async ({ command }) => {
             include: [
                 "jquery", // Always pre-bundle jQuery
                 "comicaljs", // Pre-bundle comicaljs (webpack UMD bundle needs processing)
+                // The game theme editor project lives outside BloomBrowserUI (../gameThemeEditor),
+                // so Vite can't auto-resolve its bare deps from BloomBrowserUI/node_modules by
+                // walking up from those files. Pre-bundling react-rnd here makes the bare id
+                // resolvable from the editor's source regardless of its location.
+                "react-rnd",
+                "@emotion/cache",
             ],
             exclude: [
                 "lib/localizationManager/localizationManager", // Don't pre-bundle this
diff --git a/src/BloomExe/ProjectContext.cs b/src/BloomExe/ProjectContext.cs
index aeaf9eaf5ef7..4b9537585a8e 100644
--- a/src/BloomExe/ProjectContext.cs
+++ b/src/BloomExe/ProjectContext.cs
@@ -201,6 +201,7 @@ IContainer parentContainer
                                 typeof(WorkspaceTabSelection),
                                 typeof(CopyrightAndLicenseApi),
                                 typeof(ExternalApi),
+                                typeof(GameThemeEditorApi),
                                 typeof(PublishView),
                             }.Contains(t)
                         );
@@ -459,6 +460,7 @@ IContainer parentContainer
             _scope.Resolve<AudioSegmentationApi>().RegisterWithApiHandler(server.ApiHandler);
             _scope.Resolve<ProblemReportApi>().RegisterWithApiHandler(server.ApiHandler);
             _scope.Resolve<CopyrightAndLicenseApi>().RegisterWithApiHandler(server.ApiHandler);
+            _scope.Resolve<GameThemeEditorApi>().RegisterWithApiHandler(server.ApiHandler);
             _scope.Resolve<FileIOApi>().RegisterWithApiHandler(server.ApiHandler);
             _scope.Resolve<ProgressDialogApi>().RegisterWithApiHandler(server.ApiHandler);
             _scope.Resolve<EditingViewApi>().RegisterWithApiHandler(server.ApiHandler);
diff --git a/src/BloomExe/WindowsMonitorScaling.cs b/src/BloomExe/WindowsMonitorScaling.cs
index 5e8b4edd42a3..9ba9a57707f2 100644
--- a/src/BloomExe/WindowsMonitorScaling.cs
+++ b/src/BloomExe/WindowsMonitorScaling.cs
@@ -77,7 +77,10 @@ internal static int GetScalingFactorForPrimaryMonitor()
                 if (hmonitor == IntPtr.Zero)
                     return 100;
                 // GetScaleFactorForMonitor returns S_OK (0) on success; otherwise percentScaleFactor is unreliable.
-                if (GetScaleFactorForMonitor(hmonitor, out int percentScaleFactor) != 0 || percentScaleFactor <= 0)
+                if (
+                    GetScaleFactorForMonitor(hmonitor, out int percentScaleFactor) != 0
+                    || percentScaleFactor <= 0
+                )
                     return 100;
                 return percentScaleFactor;
             }
diff --git a/src/BloomExe/web/controllers/GameThemeEditorApi.cs b/src/BloomExe/web/controllers/GameThemeEditorApi.cs
new file mode 100644
index 000000000000..65d46ef91b09
--- /dev/null
+++ b/src/BloomExe/web/controllers/GameThemeEditorApi.cs
@@ -0,0 +1,281 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Net;
+using System.Text;
+using System.Text.RegularExpressions;
+using Bloom.Api;
+using Bloom.Book;
+using Bloom.Collection;
+using Newtonsoft.Json;
+using SIL.IO;
+
+namespace Bloom.web.controllers
+{
+    /// <summary>
+    /// Endpoints for the game theme editor (the self-contained editor in src/gameThemeEditor,
+    /// embedded by Bloom). It can save a theme to the current book (customBookStyles2.css),
+    /// collection-wide (customCollectionStyles.css), and—when Bloom is running from source—into
+    /// the factory theme source (gamesThemes.less).
+    /// </summary>
+    public class GameThemeEditorApi
+    {
+        private readonly CollectionSettings _collectionSettings;
+        private readonly BookSelection _bookSelection;
+
+        /// <summary>A theme as sent from the editor: a slug, a display name, and the CSS custom
+        /// properties it sets explicitly.</summary>
+        private class ThemeDto
+        {
+            public string slug;
+            public string displayName;
+            public Dictionary<string, string> variables;
+
+            /// <summary>When the user renamed a custom theme, the slug it had before, so we can
+            /// remove the old rule (a rename, not a duplicate). Empty/null when creating.</summary>
+            public string renameFrom;
+        }
+
+        // Called by Autofac, which creates the one instance and registers it with the server.
+        public GameThemeEditorApi(
+            CollectionSettings collectionSettings,
+            BookSelection bookSelection
+        )
+        {
+            _collectionSettings = collectionSettings;
+            _bookSelection = bookSelection;
+        }
+
+        public void RegisterWithApiHandler(BloomApiHandler apiHandler)
+        {
+            apiHandler.RegisterEndpointHandler(
+                "gameThemeEditor/saveToBook",
+                HandleSaveToBook,
+                true
+            );
+            apiHandler.RegisterEndpointHandler(
+                "gameThemeEditor/saveToCollection",
+                HandleSaveToCollection,
+                true
+            );
+            apiHandler.RegisterEndpointHandler(
+                "gameThemeEditor/saveToFactorySource",
+                HandleSaveToFactorySource,
+                true
+            );
+            apiHandler.RegisterEndpointHandler(
+                "gameThemeEditor/canSaveToFactorySource",
+                HandleCanSaveToFactorySource,
+                false
+            );
+            apiHandler.RegisterEndpointHandler(
+                "gameThemeEditor/deleteFromCollection",
+                HandleDeleteFromCollection,
+                true
+            );
+            apiHandler.RegisterEndpointHandler(
+                "gameThemeEditor/deleteFromBook",
+                HandleDeleteFromBook,
+                true
+            );
+        }
+
+        /// <summary>The current book's own custom stylesheet. customBookStyles2.css is the
+        /// appearance-system custom CSS file; when present in the book folder it is linked
+        /// automatically on load (for non-legacy themes, which game books use).</summary>
+        private string CustomBookStylesPath =>
+            Path.Combine(_bookSelection.CurrentSelection.FolderPath, "customBookStyles2.css");
+
+        /// <summary>The collection-wide custom stylesheet, which lives in the collection folder
+        /// and is loaded by every book in the collection.</summary>
+        private string CustomCollectionStylesPath =>
+            Path.Combine(_collectionSettings.FolderPath, "customCollectionStyles.css");
+
+        /// <summary>The factory theme source file in the developer's source tree, or null when not
+        /// running from source (in which case the file does not exist beside the running app).</summary>
+        private static string FactoryThemesSourcePathOrNull()
+        {
+            var path = Path.Combine(
+                FileLocationUtilities.DirectoryOfApplicationOrSolution,
+                "src",
+                "content",
+                "templates",
+                "template books",
+                "Games",
+                "gamesThemes.less"
+            );
+            return RobustFile.Exists(path) ? path : null;
+        }
+
+        private void HandleSaveToBook(ApiRequest request)
+        {
+            var theme = request.RequiredPostObject<ThemeDto>();
+            try
+            {
+                WriteThemeToFile(CustomBookStylesPath, theme);
+            }
+            catch (Exception e)
+            {
+                request.Failed(HttpStatusCode.InternalServerError, e.Message);
+                return;
+            }
+            request.PostSucceeded();
+        }
+
+        private void HandleSaveToCollection(ApiRequest request)
+        {
+            var theme = request.RequiredPostObject<ThemeDto>();
+            try
+            {
+                WriteThemeToFile(CustomCollectionStylesPath, theme);
+            }
+            catch (Exception e)
+            {
+                request.Failed(HttpStatusCode.InternalServerError, e.Message);
+                return;
+            }
+            request.PostSucceeded();
+        }
+
+        private void HandleSaveToFactorySource(ApiRequest request)
+        {
+            var theme = request.RequiredPostObject<ThemeDto>();
+            var path = FactoryThemesSourcePathOrNull();
+            if (path == null)
+            {
+                request.Failed(
+                    HttpStatusCode.BadRequest,
+                    "The factory theme source is only available when running Bloom from source."
+                );
+                return;
+            }
+            try
+            {
+                WriteThemeToFile(path, theme);
+                // The .less source is what we just edited, but the live page does not load it: it
+                // loads the book folder's own copy of the compiled Games.css (placed there by
+                // BookStorage.UpdateSupportFiles when the book was opened). The LESS watcher will
+                // recompile output/.../Games.css, but that copy is only pulled into the book folder
+                // on the next book load, so without this the change vanishes the moment we navigate
+                // to another page. Upsert the same rule directly into the book's served copy so the
+                // change survives navigation. The next book load overwrites this with an identical
+                // recompiled-from-source version, so the two stay consistent.
+                var bookGamesCss = Path.Combine(
+                    _bookSelection.CurrentSelection.FolderPath,
+                    "Games.css"
+                );
+                if (RobustFile.Exists(bookGamesCss))
+                    WriteThemeToFile(bookGamesCss, theme);
+            }
+            catch (Exception e)
+            {
+                request.Failed(HttpStatusCode.InternalServerError, e.Message);
+                return;
+            }
+            request.PostSucceeded();
+        }
+
+        /// <summary>Upsert the theme's rule into the file at <paramref name="path"/>, and—when the
+        /// theme was renamed—remove the rule for its previous slug so a rename does not leave a
+        /// duplicate behind.</summary>
+        private static void WriteThemeToFile(string path, ThemeDto theme)
+        {
+            var existing = RobustFile.Exists(path) ? RobustFile.ReadAllText(path) : "";
+            var updated = UpsertThemeRule(existing, theme);
+            if (!string.IsNullOrEmpty(theme.renameFrom) && theme.renameFrom != theme.slug)
+                updated = RemoveThemeRule(updated, theme.renameFrom);
+            RobustFile.WriteAllText(path, updated);
+        }
+
+        private void HandleCanSaveToFactorySource(ApiRequest request)
+        {
+            request.ReplyWithJson(FactoryThemesSourcePathOrNull() != null);
+        }
+
+        private void HandleDeleteFromCollection(ApiRequest request)
+        {
+            DeleteThemeFromFile(request, CustomCollectionStylesPath);
+        }
+
+        private void HandleDeleteFromBook(ApiRequest request)
+        {
+            DeleteThemeFromFile(request, CustomBookStylesPath);
+        }
+
+        /// <summary>Remove the posted theme's rule from the file at <paramref name="path"/>, if present.</summary>
+        private void DeleteThemeFromFile(ApiRequest request, string path)
+        {
+            var theme = request.RequiredPostObject<ThemeDto>();
+            try
+            {
+                if (RobustFile.Exists(path))
+                {
+                    var updated = RemoveThemeRule(RobustFile.ReadAllText(path), theme.slug);
+                    RobustFile.WriteAllText(path, updated);
+                }
+            }
+            catch (Exception e)
+            {
+                request.Failed(HttpStatusCode.InternalServerError, e.Message);
+                return;
+            }
+            request.PostSucceeded();
+        }
+
+        /// <summary>
+        /// Replace the existing rule block for this theme's slug, or append a new one if absent.
+        /// The selector is the same one Bloom's theme system uses (.bloom-page.game-theme-&lt;slug&gt;),
+        /// which both customCollectionStyles.css and gamesThemes.less use, so this works for both.
+        /// INVARIANT: a game-theme rule block contains only flat declarations (no nested braces).
+        /// The "[^}]*" matcher relies on this; both editor-generated rules and the factory themes
+        /// honor it. A hand-edited rule containing "{"/"}" would not match correctly.
+        /// </summary>
+        private static string UpsertThemeRule(string css, ThemeDto theme)
+        {
+            var rule = GenerateThemeRule(theme);
+            // Match ".bloom-page.game-theme-<slug> { ... }" with a slug boundary so e.g. "blue" does
+            // not match "blue-on-white". Theme blocks contain only declarations (no nested braces).
+            var pattern =
+                @"\.bloom-page\.game-theme-" + Regex.Escape(theme.slug) + @"(?![\w-])\s*\{[^}]*\}";
+            var regex = new Regex(pattern);
+            // Substitute via a MatchEvaluator rather than passing `rule` as a replacement string:
+            // Regex.Replace treats "$" in a replacement as a substitution token ($1, $&, ...), so a
+            // variable value containing "$" would be silently mangled. The evaluator inserts the
+            // rule verbatim.
+            if (regex.IsMatch(css))
+                return regex.Replace(css, _ => rule, 1);
+
+            var trimmed = css.TrimEnd();
+            return trimmed.Length == 0 ? rule + "\n" : trimmed + "\n\n" + rule + "\n";
+        }
+
+        /// <summary>Remove the rule block for the given theme slug (used when a theme is renamed).</summary>
+        private static string RemoveThemeRule(string css, string slug)
+        {
+            var pattern =
+                @"\.bloom-page\.game-theme-" + Regex.Escape(slug) + @"(?![\w-])\s*\{[^}]*\}";
+            var withoutRule = Regex.Replace(css, pattern, "");
+            // Collapse the blank gap the removal may leave behind.
+            var tidied = Regex.Replace(withoutRule, @"\n{3,}", "\n\n").TrimEnd();
+            return tidied.Length == 0 ? "" : tidied + "\n";
+        }
+
+        private static string GenerateThemeRule(ThemeDto theme)
+        {
+            var sb = new StringBuilder();
+            sb.Append(".bloom-page.game-theme-").Append(theme.slug).Append(" {\n");
+            if (theme.variables != null)
+            {
+                foreach (var name in theme.variables.Keys.OrderBy(k => k, StringComparer.Ordinal))
+                    sb.Append("    ")
+                        .Append(name)
+                        .Append(": ")
+                        .Append(theme.variables[name])
+                        .Append(";\n");
+            }
+            sb.Append("}");
+            return sb.ToString();
+        }
+    }
+}
diff --git a/src/gameThemeEditor/README.md b/src/gameThemeEditor/README.md
new file mode 100644
index 000000000000..59712c388e64
--- /dev/null
+++ b/src/gameThemeEditor/README.md
@@ -0,0 +1,47 @@
+# bloom-game-theme-editor
+
+A **self-contained** editor for Bloom *game themes* — named sets of CSS custom
+properties (`--game-primary-color`, `--game-button-bg-color`, …) that style
+drag-activity game pages.
+
+This is its own project directory on purpose. It depends on **nothing** in
+`BloomBrowserUI`; the only coupling to a host application is the small contract in
+[`src/host/IGameThemeEditorHost.ts`](src/host/IGameThemeEditorHost.ts) plus the
+`mount()` / `unmount()` functions exported from [`src/index.tsx`](src/index.tsx).
+
+## How it is consumed
+
+A host (in Bloom: the editable-page iframe — see
+`BloomBrowserUI/bookEdit/toolbox/games/gameThemeEditorHost.ts`) does:
+
+```ts
+import { mount, unmount } from "gameThemeEditor"; // vite alias → this project's src
+mount(containerDiv, host /* : IGameThemeEditorHost */);
+```
+
+The host object owns everything application-specific:
+
+- **Live preview** — `setLiveVariable(name, value)` sets the CSS custom property on the
+  live page. The browser's native cascade (see `gamesThemes.less`'s `.apply-game-theme()`)
+  derives every dependent variable, so the real game recolors instantly. There is
+  deliberately **no preview component** in this project.
+- **Persistence** — `saveToCollection` / `saveToFactorySource` (developer-only) /
+  `canSaveToFactorySource`.
+- **Seeding** — `readAppliedVariables` (computed colors) and `getThemeDefinition`
+  (which variables a theme sets explicitly).
+
+## What this project intentionally does NOT contain
+
+Compared to the original standalone SPA it was ported from, the following were dropped
+because the host's browser does the work natively or they are not wanted:
+
+- the JS cascade-resolution engine (`resolveVariableValue`, derivation maps),
+- the CSS view and copy/paste-CSS parser,
+- the mock preview component, `html2canvas`, Tailwind, and the shadcn UI library.
+
+## Build
+
+For now the project has no independent build step in Bloom; the BloomBrowserUI Vite build
+consumes its TypeScript source directly via a `resolve.alias` (`gameThemeEditor`). Its
+`package.json` records its identity and dependencies so it can later be promoted to a real
+workspace if install-level isolation is wanted.
diff --git a/src/gameThemeEditor/package.json b/src/gameThemeEditor/package.json
new file mode 100644
index 000000000000..d7e129943926
--- /dev/null
+++ b/src/gameThemeEditor/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "bloom-game-theme-editor",
+    "version": "0.1.0",
+    "private": true,
+    "description": "Self-contained editor for Bloom game themes (sets of CSS custom properties). Embedded by Bloom via mount()/IGameThemeEditorHost; depends on nothing in BloomBrowserUI.",
+    "type": "module",
+    "main": "src/index.tsx",
+    "scripts": {
+        "lint": "eslint src --ext .ts,.tsx"
+    },
+    "dependencies": {
+        "@emotion/cache": "^11.11.0",
+        "@emotion/react": "^11.11.4",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-rnd": "^10.4.13"
+    },
+    "devDependencies": {
+        "typescript": "^5.7.3"
+    }
+}
diff --git a/src/gameThemeEditor/src/ColorPicker.tsx b/src/gameThemeEditor/src/ColorPicker.tsx
new file mode 100644
index 000000000000..35328036a66d
--- /dev/null
+++ b/src/gameThemeEditor/src/ColorPicker.tsx
@@ -0,0 +1,410 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+    checkerboardBackground,
+    colorToHsva,
+    hsvToHex,
+    hsvaToColor,
+    toCanonicalColor,
+    type Hsva,
+} from "./colorUtils";
+
+// A self-contained color picker popover modeled on Bloom's: a saturation/value square, a hue
+// slider, a transparency (alpha) slider, a row with an eyedropper + hex field + current-color
+// preview, and the theme's swatches below. Clicking a swatch yields that exact color (unlike the
+// screen-sampling eyedropper). Translucent colors are shown over a checkerboard.
+//
+// Rendered in a portal on the editor's document body and positioned (fixed) near the anchor so
+// the Colors outline's scroll area can't clip it. No external dependencies.
+
+const POP_WIDTH = 232;
+const SQUARE_HEIGHT = 150;
+
+type EyeDropperResult = { sRGBHex: string };
+type EyeDropperCtor = { new (): { open: () => Promise<EyeDropperResult> } };
+
+// Normalized [0,1] position of a pointer within an element, clamped to its bounds.
+const fractionWithin = (
+    el: HTMLElement,
+    clientX: number,
+    clientY: number,
+): { fx: number; fy: number } => {
+    const r = el.getBoundingClientRect();
+    const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+    return {
+        fx: clamp01((clientX - r.left) / r.width),
+        fy: clamp01((clientY - r.top) / r.height),
+    };
+};
+
+export const ColorPicker: React.FunctionComponent<{
+    /** the current effective color (any CSS color string). */
+    value: string;
+    /** palette to show, as canonical "#rrggbb"/"#rrggbbaa" strings (see buildThemeSwatches). */
+    swatches: string[];
+    /** the swatch button we open near, in viewport coordinates. */
+    anchorRect: DOMRect;
+    /** the document to portal into (the one the editor is mounted in). */
+    ownerDocument: Document;
+    onChange: (color: string) => void;
+    onClose: () => void;
+}> = (props) => {
+    const valueColor = toCanonicalColor(props.value);
+    const [hsva, setHsva] = useState<Hsva>(() => colorToHsva(valueColor));
+    const [hexText, setHexText] = useState(valueColor);
+    const popRef = useRef<HTMLDivElement>(null);
+    const squareRef = useRef<HTMLDivElement>(null);
+    const hueRef = useRef<HTMLDivElement>(null);
+    const alphaRef = useRef<HTMLDivElement>(null);
+
+    // Resync the controls when the color changes from OUTSIDE the picker (e.g. a swatch click or
+    // a reset). Our own edits emit the same color we'd compute here, so they don't resync (which
+    // would lose hue when dragging to/through a gray, or alpha when value/saturation is extreme).
+    useEffect(() => {
+        setHexText(valueColor);
+        setHsva((prev) =>
+            hsvaToColor(prev).toLowerCase() === valueColor.toLowerCase()
+                ? prev
+                : colorToHsva(valueColor),
+        );
+    }, [valueColor]);
+
+    // Dismiss on an outside click or Escape (capture phase, so we see the click first).
+    useEffect(() => {
+        const doc = props.ownerDocument;
+        const onDown = (e: MouseEvent) => {
+            if (popRef.current && !popRef.current.contains(e.target as Node))
+                props.onClose();
+        };
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") props.onClose();
+        };
+        doc.addEventListener("mousedown", onDown, true);
+        doc.addEventListener("keydown", onKey, true);
+        return () => {
+            doc.removeEventListener("mousedown", onDown, true);
+            doc.removeEventListener("keydown", onKey, true);
+        };
+    }, [props]);
+
+    // Set the color from a new HSVA (updates the controls and the live theme).
+    const applyHsva = (next: Hsva) => {
+        setHsva(next);
+        props.onChange(hsvaToColor(next));
+    };
+
+    const onSquarePointer = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!squareRef.current) return;
+        const { fx, fy } = fractionWithin(
+            squareRef.current,
+            e.clientX,
+            e.clientY,
+        );
+        applyHsva({ ...hsva, s: fx, v: 1 - fy });
+    };
+    const onHuePointer = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!hueRef.current) return;
+        const { fx } = fractionWithin(hueRef.current, e.clientX, e.clientY);
+        applyHsva({ ...hsva, h: fx * 360 });
+    };
+    const onAlphaPointer = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!alphaRef.current) return;
+        const { fx } = fractionWithin(alphaRef.current, e.clientX, e.clientY);
+        applyHsva({ ...hsva, a: fx });
+    };
+
+    const commitHex = (text: string) => props.onChange(toCanonicalColor(text));
+
+    const eyeDropperCtor = (
+        props.ownerDocument.defaultView as unknown as {
+            EyeDropper?: EyeDropperCtor;
+        }
+    )?.EyeDropper;
+    const useEyedropper = async () => {
+        if (!eyeDropperCtor) return;
+        try {
+            const result = await new eyeDropperCtor().open();
+            if (result?.sRGBHex) props.onChange(result.sRGBHex);
+        } catch {
+            // The user can cancel (Escape), which rejects the promise.
+        }
+    };
+
+    // Position near the anchor, nudged to stay within the viewport.
+    const win = props.ownerDocument.defaultView;
+    const vw = win?.innerWidth ?? 1024;
+    const vh = win?.innerHeight ?? 768;
+    const EST_HEIGHT = 360;
+    const left = Math.max(
+        8,
+        Math.min(props.anchorRect.left, vw - POP_WIDTH - 8),
+    );
+    const below = props.anchorRect.bottom + 6;
+    const top =
+        below + EST_HEIGHT > vh
+            ? Math.max(8, props.anchorRect.top - EST_HEIGHT - 6)
+            : below;
+
+    const pureHue = hsvToHex({ h: hsva.h, s: 1, v: 1 });
+    const opaqueCurrent = hsvToHex(hsva); // current color ignoring alpha, for the alpha gradient
+
+    const popover = (
+        <div
+            ref={popRef}
+            style={{ top, left, width: POP_WIDTH }}
+            css={css`
+                position: fixed;
+                z-index: 7000;
+                background: white;
+                border: 1px solid #b0b0b0;
+                border-radius: 6px;
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+                padding: 8px;
+                box-sizing: border-box;
+                user-select: none;
+            `}
+        >
+            {/* Saturation (x) / value (y) square over the current hue. */}
+            <div
+                ref={squareRef}
+                onPointerDown={(e) => {
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                    onSquarePointer(e);
+                }}
+                onPointerMove={(e) => {
+                    if (e.buttons === 1) onSquarePointer(e);
+                }}
+                css={css`
+                    position: relative;
+                    height: ${SQUARE_HEIGHT}px;
+                    border-radius: 3px;
+                    cursor: crosshair;
+                    background:
+                        linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
+                        linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
+                        ${pureHue};
+                `}
+            >
+                <span
+                    style={{
+                        left: `${hsva.s * 100}%`,
+                        top: `${(1 - hsva.v) * 100}%`,
+                    }}
+                    css={css`
+                        position: absolute;
+                        width: 12px;
+                        height: 12px;
+                        margin: -6px 0 0 -6px;
+                        border-radius: 50%;
+                        border: 2px solid white;
+                        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+                        pointer-events: none;
+                    `}
+                />
+            </div>
+            {/* Hue slider. */}
+            <div
+                ref={hueRef}
+                onPointerDown={(e) => {
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                    onHuePointer(e);
+                }}
+                onPointerMove={(e) => {
+                    if (e.buttons === 1) onHuePointer(e);
+                }}
+                css={css`
+                    position: relative;
+                    height: 14px;
+                    margin-top: 10px;
+                    border-radius: 7px;
+                    cursor: ew-resize;
+                    background: linear-gradient(
+                        to right,
+                        #f00 0%,
+                        #ff0 17%,
+                        #0f0 33%,
+                        #0ff 50%,
+                        #00f 67%,
+                        #f0f 83%,
+                        #f00 100%
+                    );
+                `}
+            >
+                <span
+                    style={{ left: `${(hsva.h / 360) * 100}%` }}
+                    css={sliderThumb}
+                />
+            </div>
+            {/* Transparency (alpha) slider: transparent -> opaque current color, over a checkerboard. */}
+            <div
+                ref={alphaRef}
+                onPointerDown={(e) => {
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                    onAlphaPointer(e);
+                }}
+                onPointerMove={(e) => {
+                    if (e.buttons === 1) onAlphaPointer(e);
+                }}
+                css={css`
+                    position: relative;
+                    height: 14px;
+                    margin-top: 10px;
+                    border-radius: 7px;
+                    cursor: ew-resize;
+                    ${checkerboardBackground}
+                `}
+            >
+                <span
+                    style={{
+                        backgroundImage: `linear-gradient(to right, rgba(0,0,0,0), ${opaqueCurrent})`,
+                    }}
+                    css={css`
+                        position: absolute;
+                        inset: 0;
+                        border-radius: 7px;
+                    `}
+                />
+                <span style={{ left: `${hsva.a * 100}%` }} css={sliderThumb} />
+            </div>
+            {/* Eyedropper + hex field + current-color preview. */}
+            <div
+                css={css`
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    margin-top: 12px;
+                `}
+            >
+                {eyeDropperCtor && (
+                    <button
+                        type="button"
+                        title="Sample a color from the screen"
+                        onClick={useEyedropper}
+                        css={css`
+                            flex-shrink: 0;
+                            display: inline-flex;
+                            border: none;
+                            background: transparent;
+                            cursor: pointer;
+                            padding: 2px;
+                            color: #000;
+                        `}
+                    >
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            aria-hidden="true"
+                        >
+                            <path d="M2 22l1-4 11-11 3 3L6 21l-4 1z" />
+                            <path d="M15 6l3-3a2.1 2.1 0 0 1 3 3l-3 3" />
+                        </svg>
+                    </button>
+                )}
+                <input
+                    type="text"
+                    value={hexText}
+                    spellCheck={false}
+                    onChange={(e) => setHexText(e.target.value)}
+                    onBlur={() => commitHex(hexText)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") commitHex(hexText);
+                    }}
+                    css={css`
+                        flex: 1;
+                        min-width: 0;
+                        font-size: 13px;
+                        font-family: monospace;
+                        text-align: center;
+                        padding: 5px 6px;
+                        border: 1px solid #c0c0c0;
+                        border-radius: 4px;
+                    `}
+                />
+                <span
+                    title={valueColor}
+                    css={css`
+                        position: relative;
+                        flex-shrink: 0;
+                        width: 44px;
+                        height: 26px;
+                        border-radius: 4px;
+                        border: 1px solid rgba(0, 0, 0, 0.35);
+                        overflow: hidden;
+                        ${checkerboardBackground}
+                    `}
+                >
+                    <span
+                        style={{ backgroundColor: valueColor }}
+                        css={css`
+                            position: absolute;
+                            inset: 0;
+                        `}
+                    />
+                </span>
+            </div>
+            {/* The theme's swatches (black, white, and the theme's colors). */}
+            <div
+                css={css`
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 5px;
+                    margin-top: 12px;
+                `}
+            >
+                {props.swatches.map((swatch) => (
+                    <button
+                        key={swatch}
+                        type="button"
+                        title={swatch}
+                        onClick={() => props.onChange(swatch)}
+                        css={css`
+                            position: relative;
+                            width: 22px;
+                            height: 22px;
+                            border-radius: 4px;
+                            border: 1px solid rgba(0, 0, 0, 0.35);
+                            cursor: pointer;
+                            padding: 0;
+                            overflow: hidden;
+                            ${checkerboardBackground}
+                            ${valueColor === swatch
+                                ? "outline: 2px solid #1d94a4; outline-offset: 1px;"
+                                : ""}
+                        `}
+                    >
+                        <span
+                            style={{ backgroundColor: swatch }}
+                            css={css`
+                                position: absolute;
+                                inset: 0;
+                            `}
+                        />
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+
+    return createPortal(popover, props.ownerDocument.body);
+};
+
+const sliderThumb = css`
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 18px;
+    margin: -9px 0 0 -3px;
+    border-radius: 3px;
+    background: white;
+    border: 1px solid #b0b0b0;
+    pointer-events: none;
+`;
diff --git a/src/gameThemeEditor/src/ColorSwatch.tsx b/src/gameThemeEditor/src/ColorSwatch.tsx
new file mode 100644
index 000000000000..c39394bd14da
--- /dev/null
+++ b/src/gameThemeEditor/src/ColorSwatch.tsx
@@ -0,0 +1,98 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import { useRef, useState } from "react";
+import { checkerboardBackground } from "./colorUtils";
+import { ColorPicker } from "./ColorPicker";
+
+// A friendly color well: a swatch showing the current color that opens our own ColorPicker
+// popover when clicked. A translucent color is shown over a checkerboard so its transparency is
+// visible. When the color is inherited (not explicitly set in the theme) we draw a faint
+// diagonal line across the swatch. No CSS variable names or raw CSS are shown.
+export const ColorSwatch: React.FunctionComponent<{
+    /** the current effective color (any CSS color string). */
+    value: string;
+    /** whether the value is inherited (derived) rather than explicitly set. */
+    isInherited: boolean;
+    /** palette offered by the picker (black, white, the theme's colors), as "#rrggbb". */
+    swatches: string[];
+    onChange: (hex: string) => void;
+    /** swatch edge length in px (default 24). */
+    size?: number;
+    title?: string;
+}> = (props) => {
+    const size = props.size ?? 24;
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
+
+    const openPicker = () => {
+        if (buttonRef.current)
+            setAnchorRect(buttonRef.current.getBoundingClientRect());
+    };
+
+    return (
+        <React.Fragment>
+            <button
+                ref={buttonRef}
+                type="button"
+                title={props.title}
+                onClick={openPicker}
+                css={css`
+                    position: relative;
+                    display: inline-block;
+                    width: ${size}px;
+                    height: ${size}px;
+                    padding: 0;
+                    border-radius: 4px;
+                    border: 1px solid rgba(0, 0, 0, 0.35);
+                    overflow: hidden;
+                    cursor: pointer;
+                    flex-shrink: 0;
+                    ${props.isInherited ? "opacity: 0.8;" : ""}
+                    ${checkerboardBackground}
+                `}
+            >
+                {/* The actual color over the checkerboard, so transparency shows through. */}
+                <span
+                    style={{ backgroundColor: props.value }}
+                    css={css`
+                        position: absolute;
+                        inset: 0;
+                    `}
+                />
+                {props.isInherited && (
+                    <span
+                        css={css`
+                            position: absolute;
+                            inset: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            pointer-events: none;
+                        `}
+                    >
+                        <span
+                            css={css`
+                                width: 100%;
+                                height: 1px;
+                                background: rgba(255, 255, 255, 0.85);
+                                transform: rotate(45deg);
+                                box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
+                            `}
+                        />
+                    </span>
+                )}
+            </button>
+            {anchorRect && buttonRef.current && (
+                <ColorPicker
+                    value={props.value}
+                    swatches={props.swatches}
+                    anchorRect={anchorRect}
+                    ownerDocument={buttonRef.current.ownerDocument}
+                    onChange={props.onChange}
+                    onClose={() => setAnchorRect(null)}
+                />
+            )}
+        </React.Fragment>
+    );
+};
diff --git a/src/gameThemeEditor/src/ColorsOutline.tsx b/src/gameThemeEditor/src/ColorsOutline.tsx
new file mode 100644
index 000000000000..566feec3dda3
--- /dev/null
+++ b/src/gameThemeEditor/src/ColorsOutline.tsx
@@ -0,0 +1,169 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { buildHierarchyTree } from "./themeModel";
+import type { HierarchyNode } from "./themeModel";
+import { VariableRow } from "./VariableRow";
+import { bloom } from "./bloomTheme";
+
+// The "Colors" outline: the variable hierarchy as an indented, expand/collapse tree.
+// Resolved colors come from the live page (passed in via resolvedValues); whether a
+// variable is explicitly part of the theme comes from isVariableOverridden.
+// A small circular-arrow "reset" glyph, inline so the editor stays dependency-free.
+const ResetIcon: React.FunctionComponent = () => (
+    <svg
+        width="13"
+        height="13"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+    >
+        <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+        <path d="M3 3v5h5" />
+    </svg>
+);
+
+export const ColorsOutline: React.FunctionComponent<{
+    resolvedValues: Record<string, string>;
+    isVariableOverridden: (name: string) => boolean;
+    onColorChange: (name: string, hex: string) => void;
+    onReset: (name: string) => void;
+    /** Reset every variable back to the theme as it was loaded (clears all overrides). */
+    onResetAll: () => void;
+    /** Variables used by the preview/contrast item the user clicked; highlighted and revealed. */
+    highlightedVars: string[];
+    /** Palette offered by each row's color picker (black, white, the theme's colors). */
+    swatches: string[];
+}> = (props) => {
+    const hierarchy = useMemo(() => buildHierarchyTree(), []);
+    const highlightSet = useMemo(
+        () => new Set(props.highlightedVars),
+        [props.highlightedVars],
+    );
+
+    // A node is "customized" if it or any descendant is explicitly overridden; we expand
+    // such branches by default so the user sees what differs from the defaults.
+    const isNodeCustomized = React.useCallback(
+        (node: HierarchyNode): boolean =>
+            props.isVariableOverridden(node.name) ||
+            node.children.some(isNodeCustomized),
+        [props],
+    );
+
+    const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+    useEffect(() => {
+        // True if any highlighted variable lies below this node (so it must be expanded to reveal).
+        const hasHighlightedDescendant = (node: HierarchyNode): boolean =>
+            node.children.some(
+                (c) => highlightSet.has(c.name) || hasHighlightedDescendant(c),
+            );
+        const next: Record<string, boolean> = {};
+        const walk = (nodes: HierarchyNode[]) => {
+            nodes.forEach((node) => {
+                if (node.children.length > 0) {
+                    // When an item is selected, expand exactly the branches that reveal its
+                    // variables and collapse the rest; otherwise fall back to the default.
+                    next[node.name] = highlightSet.size
+                        ? hasHighlightedDescendant(node)
+                        : node.children.some(isNodeCustomized);
+                    walk(node.children);
+                }
+            });
+        };
+        walk(hierarchy);
+        setExpanded(next);
+        // Recompute when the hierarchy or the highlighted set changes. Manual toggles in between
+        // persist (we don't depend on isNodeCustomized to avoid fighting the user's clicks).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hierarchy, props.highlightedVars]);
+
+    const toggle = (name: string) =>
+        setExpanded((prev) => ({ ...prev, [name]: !prev[name] }));
+
+    const renderNodes = (nodes: HierarchyNode[]): React.ReactNode =>
+        nodes.map((node) => (
+            <React.Fragment key={node.name}>
+                <VariableRow
+                    node={node}
+                    value={props.resolvedValues[node.name] || "#000000"}
+                    isOverridden={props.isVariableOverridden(node.name)}
+                    isExpanded={!!expanded[node.name]}
+                    hasChildren={node.children.length > 0}
+                    isHighlighted={highlightSet.has(node.name)}
+                    swatches={props.swatches}
+                    onToggleExpand={() => toggle(node.name)}
+                    onColorChange={(hex) => props.onColorChange(node.name, hex)}
+                    onReset={() => props.onReset(node.name)}
+                />
+                {node.children.length > 0 &&
+                    expanded[node.name] &&
+                    renderNodes(node.children)}
+            </React.Fragment>
+        ));
+
+    return (
+        <div
+            css={css`
+                border: 1px solid #e0e0e0;
+                border-radius: 6px;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                min-height: 0;
+            `}
+        >
+            <div
+                css={css`
+                    background: #f3f3f3;
+                    border-bottom: 1px solid #e0e0e0;
+                    padding: 4px 6px 4px 10px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                `}
+            >
+                <span>Colors</span>
+                <button
+                    type="button"
+                    onClick={props.onResetAll}
+                    title="Reset all colors to the theme as loaded"
+                    css={css`
+                        display: inline-flex;
+                        align-items: center;
+                        gap: 4px;
+                        border: none;
+                        background: transparent;
+                        color: ${bloom.blueText};
+                        cursor: pointer;
+                        font-size: 12px;
+                        font-weight: 500;
+                        padding: 3px 6px;
+                        border-radius: 4px;
+                        &:hover {
+                            background: rgba(29, 148, 164, 0.1);
+                        }
+                    `}
+                >
+                    <ResetIcon />
+                    Reset
+                </button>
+            </div>
+            <div
+                css={css`
+                    overflow-y: auto;
+                    padding: 8px 10px;
+                `}
+            >
+                {renderNodes(hierarchy)}
+            </div>
+        </div>
+    );
+};
diff --git a/src/gameThemeEditor/src/ContrastChecker.tsx b/src/gameThemeEditor/src/ContrastChecker.tsx
new file mode 100644
index 000000000000..740c0bd80cae
--- /dev/null
+++ b/src/gameThemeEditor/src/ContrastChecker.tsx
@@ -0,0 +1,449 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import { contrastRatio, compositeOver } from "./contrastUtils";
+
+// Each check compares a foreground color against the background it actually sits on.
+// "text-*" rows use WCAG text thresholds (large text gets the relaxed limits); "graphic"
+// rows use the non-text contrast threshold (WCAG 1.4.11, 3:1) for an element being
+// distinguishable from the page behind it.
+type CheckKind = "text-large" | "text-normal" | "graphic";
+
+// For "graphic" checks we draw a little sample resembling the actual object (the fg color)
+// sitting on its background (bg). A bar = the header band; a button = a button/draggable chip;
+// a box = a checkbox. Outlined shapes show only an outline (e.g. a button whose fill equals the
+// page, or an empty checkbox), which is what the user actually sees on the page.
+type SampleShape = "bar" | "button" | "box";
+
+interface Check {
+    label: string;
+    fg: string; // CSS variable name
+    bg: string; // CSS variable name
+    kind: CheckKind;
+    shape?: SampleShape; // graphic checks only
+    outlined?: boolean; // graphic checks only: draw an outline rather than a fill
+    dashed?: boolean; // graphic outlined checks: draw a dashed outline (e.g. the drop target)
+    // Text checks: the sample glyph drawn in the foreground color. Defaults to "Aa"; e.g. the
+    // selected checkbox shows its check mark instead.
+    sampleText?: string;
+    // Graphic button checks: the element's border color (a CSS variable name), drawn together
+    // with the fill (fg). When set, the object is "visible on the page" if EITHER the border or
+    // the fill has enough contrast with the page: a clear border separates the button from the
+    // page, and if the border is too faint the fill must do the separating instead. So we don't
+    // flag a borderless-but-boldly-filled button (or a faint-fill-but-clearly-outlined one).
+    border?: string;
+    // First check of a visual group: each group is drawn in its own rounded box (with a gap
+    // before it), so a group's related rows read as one block. The first check overall also
+    // begins a group without needing this flag.
+    startsGroup?: boolean;
+}
+
+const PAGE_BG = "--game-page-bg-color";
+
+// One flat list of checks, ordered so that rows about the same thing sit together: each
+// object's "visible on the page" check (its fill/border vs the page) is immediately followed
+// by the matching "is its text legible" check (its text vs its own background). The page-wide
+// text rows lead; the drop Target (which has no text) trails its draggable.
+const checks: Check[] = [
+    {
+        label: "Text on page",
+        fg: "--game-text-color",
+        bg: PAGE_BG,
+        kind: "text-large",
+    },
+    {
+        label: "Page number",
+        fg: "--game-page-number-color",
+        bg: PAGE_BG,
+        kind: "text-normal",
+    },
+
+    {
+        label: "Header band",
+        fg: "--game-header-bg-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "bar",
+        startsGroup: true,
+    },
+    {
+        label: "Header text",
+        fg: "--game-header-color",
+        bg: "--game-header-bg-color",
+        kind: "text-large",
+    },
+
+    {
+        // The three button states are the same on-page element: one shared border plus a fill
+        // that differs by state. Each is checked as border-plus-fill against the page (see Check.border).
+        label: "Normal button",
+        fg: "--game-button-bg-color",
+        border: "--game-button-outline-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "button",
+        startsGroup: true,
+    },
+    {
+        label: "Normal button text",
+        fg: "--game-button-text-color",
+        bg: "--game-button-bg-color",
+        kind: "text-large",
+    },
+
+    {
+        label: "'Correct' button",
+        fg: "--game-button-correct-bg-color",
+        border: "--game-button-outline-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "button",
+        startsGroup: true,
+    },
+    {
+        label: "'Correct' button text",
+        fg: "--game-button-correct-color",
+        bg: "--game-button-correct-bg-color",
+        kind: "text-large",
+    },
+
+    {
+        label: "'Incorrect' button",
+        fg: "--game-button-wrong-bg-color",
+        border: "--game-button-outline-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "button",
+        startsGroup: true,
+    },
+    {
+        label: "'Incorrect' button text",
+        fg: "--game-button-wrong-color",
+        bg: "--game-button-wrong-bg-color",
+        kind: "text-large",
+    },
+
+    {
+        label: "Draggable",
+        fg: "--game-draggable-bg-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "button",
+        startsGroup: true,
+    },
+    {
+        label: "Draggable text",
+        fg: "--game-draggable-color",
+        bg: "--game-draggable-bg-color",
+        kind: "text-large",
+    },
+    {
+        // The dashed "target" outline a draggable is dropped onto.
+        label: "Target",
+        fg: "--game-draggable-target-outline-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "button",
+        outlined: true,
+        dashed: true,
+    },
+
+    {
+        label: "Checkbox label",
+        fg: "--game-checkbox-text-color",
+        bg: PAGE_BG,
+        kind: "text-normal",
+        startsGroup: true,
+    },
+    {
+        label: "Checkbox outline",
+        fg: "--game-checkbox-outline-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "box",
+        outlined: true,
+    },
+
+    {
+        label: "Selected Checkbox fill",
+        fg: "--game-selected-checkbox-bg-color",
+        bg: PAGE_BG,
+        kind: "graphic",
+        shape: "box",
+    },
+    {
+        label: "Checkmark",
+        fg: "--game-selected-checkbox-color",
+        bg: "--game-selected-checkbox-bg-color",
+        kind: "text-large",
+        sampleText: "✓",
+    },
+];
+
+// AA pass limit by kind. Large text and graphics share the relaxed limit; normal
+// text needs the stricter one.
+const limits: Record<CheckKind, number> = {
+    "text-large": 3,
+    "text-normal": 4.5,
+    graphic: 3,
+};
+
+// Fixed width (px) of the contrast verdict column, so the verdict lines up across every
+// group box and the column header even though each group is its own table.
+const VERDICT_WIDTH = 110;
+
+// Split the flat check list into visual groups: a new group begins at each check flagged
+// startsGroup (and at the very first check). Each group is drawn in its own bordered box.
+const groups: Check[][] = [];
+for (const check of checks) {
+    if (check.startsGroup || groups.length === 0) groups.push([check]);
+    else groups[groups.length - 1].push(check);
+}
+
+// The contrast verdict for a row: a green check when it passes AA, or a bold red
+// "Low Contrast" callout when it doesn't.
+const Verdict: React.FunctionComponent<{ pass: boolean }> = (props) =>
+    props.pass ? (
+        <span
+            css={css`
+                color: #1a9f55;
+                font-weight: 700;
+            `}
+        >
+            ✓
+        </span>
+    ) : (
+        <span
+            css={css`
+                color: #cc2b2b;
+                font-weight: 700;
+                white-space: nowrap;
+            `}
+        >
+            Low Contrast
+        </span>
+    );
+
+// A small "stage" showing the comparison background (bg) with, on it, either sample text in the
+// foreground color (text checks) or a shape resembling the object (graphic checks). This makes
+// the comparison concrete: e.g. a button's fill, or a checkbox outline, against the page color.
+const Sample: React.FunctionComponent<{
+    check: Check;
+    fg: string;
+    bg: string;
+    // Resolved border color for button/box checks that carry a Check.border; drawn around the fill.
+    border?: string;
+}> = (props) => {
+    const stage = css`
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 76px;
+        height: 32px;
+        border-radius: 4px;
+        border: 1px solid #e0e0e0;
+        background-color: ${props.bg};
+        overflow: hidden;
+    `;
+    let inner: React.ReactNode;
+    if (props.check.kind !== "graphic") {
+        inner = (
+            <span
+                css={css`
+                    color: ${props.fg};
+                    font-weight: 600;
+                    font-size: 15px;
+                `}
+            >
+                {props.check.sampleText ?? "Aa"}
+            </span>
+        );
+    } else if (props.check.shape === "bar") {
+        inner = (
+            <span
+                css={css`
+                    width: 56px;
+                    height: 12px;
+                    border-radius: 2px;
+                    background-color: ${props.fg};
+                `}
+            />
+        );
+    } else if (props.check.shape === "box") {
+        inner = (
+            <span
+                css={css`
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 3px;
+                    ${props.check.outlined
+                        ? `border: 2px ${props.check.dashed ? "dashed" : "solid"} ${props.fg};`
+                        : `background-color: ${props.fg};`}
+                `}
+            />
+        );
+    } else if (props.border) {
+        // A real button: its fill plus its border, both as they sit on the page.
+        inner = (
+            <span
+                css={css`
+                    width: 50px;
+                    height: 20px;
+                    border-radius: 4px;
+                    background-color: ${props.fg};
+                    border: 2px solid ${props.border};
+                `}
+            />
+        );
+    } else {
+        // button / draggable chip / drop target
+        inner = (
+            <span
+                css={css`
+                    width: 50px;
+                    height: 20px;
+                    border-radius: 4px;
+                    ${props.check.outlined
+                        ? `border: 2px ${props.check.dashed ? "dashed" : "solid"} ${props.fg};`
+                        : `background-color: ${props.fg};`}
+                `}
+            />
+        );
+    }
+    return <span css={stage}>{inner}</span>;
+};
+
+const Row: React.FunctionComponent<{
+    check: Check;
+    resolvedValues: Record<string, string>;
+    onSelectVars: (vars: string[]) => void;
+}> = (props) => {
+    const fg = props.resolvedValues[props.check.fg] || "#000000";
+    const bg = props.resolvedValues[props.check.bg] || "#ffffff";
+    const aaLimit = limits[props.check.kind];
+    // Measure contrast against what the eye actually sees: flatten any transparency onto the
+    // background first, so a nearly-invisible (low-alpha) color resolves close to its background
+    // and fails — e.g. a faint drop-target outline no longer scores as good contrast.
+    const ratio = contrastRatio(compositeOver(fg, bg), bg);
+    // A button check carries a border color too: it's visible if EITHER the border or the fill
+    // separates it from the page, so we pass on the better of the two contrasts.
+    const borderColor = props.check.border
+        ? props.resolvedValues[props.check.border] || "#000000"
+        : undefined;
+    const borderRatio =
+        borderColor !== undefined
+            ? contrastRatio(compositeOver(borderColor, bg), bg)
+            : 0;
+    const pass =
+        borderColor !== undefined
+            ? ratio >= aaLimit || borderRatio >= aaLimit
+            : ratio >= aaLimit;
+    const title =
+        borderColor !== undefined
+            ? `Border contrast ${borderRatio.toFixed(2)}:1, fill contrast ${ratio.toFixed(2)}:1`
+            : `Contrast ${ratio.toFixed(2)}:1`;
+    // Clicking a row reveals, in the Colors outline, the colors it compares (fill, border, page).
+    const selectVars = props.check.border
+        ? [props.check.fg, props.check.border, props.check.bg]
+        : [props.check.fg, props.check.bg];
+    const cellCss = css`
+        padding: 5px 8px;
+        text-align: center;
+        width: ${VERDICT_WIDTH}px;
+    `;
+    return (
+        <tr
+            title={title}
+            onClick={() => props.onSelectVars(selectVars)}
+            css={css`
+                cursor: pointer;
+                &:hover {
+                    outline: 2px solid #f3aa18;
+                    outline-offset: -2px;
+                }
+            `}
+        >
+            <td
+                css={css`
+                    padding: 5px 8px;
+                    white-space: nowrap;
+                `}
+            >
+                <span
+                    css={css`
+                        display: inline-flex;
+                        align-items: center;
+                        gap: 8px;
+                    `}
+                >
+                    <Sample
+                        check={props.check}
+                        fg={fg}
+                        bg={bg}
+                        border={borderColor}
+                    />
+                    <span
+                        css={css`
+                            color: #333;
+                            font-weight: 500;
+                        `}
+                    >
+                        {props.check.label}
+                    </span>
+                </span>
+            </td>
+            <td css={cellCss}>
+                <Verdict pass={pass} />
+            </td>
+        </tr>
+    );
+};
+
+// The WCAG contrast table, driven by the live resolved colors. Clicking a row reveals the
+// two colors it compares in the Colors outline.
+export const ContrastChecker: React.FunctionComponent<{
+    resolvedValues: Record<string, string>;
+    onSelectVars: (vars: string[]) => void;
+}> = (props) => {
+    return (
+        // Each related group in its own rounded box, with a gap between groups.
+        <div
+            css={css`
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+            `}
+        >
+            {groups.map((group) => (
+                <div
+                    key={group[0].label}
+                    css={css`
+                        border: 1px solid #e0e0e0;
+                        border-radius: 6px;
+                        overflow: hidden;
+                    `}
+                >
+                    <table
+                        css={css`
+                            width: 100%;
+                            border-collapse: collapse;
+                            font-size: 13px;
+                        `}
+                    >
+                        <tbody>
+                            {group.map((c) => (
+                                <Row
+                                    key={c.label}
+                                    check={c}
+                                    resolvedValues={props.resolvedValues}
+                                    onSelectVars={props.onSelectVars}
+                                />
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            ))}
+        </div>
+    );
+};
diff --git a/src/gameThemeEditor/src/DraggableResizableFrame.tsx b/src/gameThemeEditor/src/DraggableResizableFrame.tsx
new file mode 100644
index 000000000000..82a064a9ffac
--- /dev/null
+++ b/src/gameThemeEditor/src/DraggableResizableFrame.tsx
@@ -0,0 +1,222 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Rnd } from "react-rnd";
+import { bloom } from "./bloomTheme";
+
+// A floating window with a drag handle title bar and resize handles, built on react-rnd.
+// The title bar (class "gte-drag-handle") is the only drag region so that controls inside
+// the body remain clickable.
+//
+// The panel is mounted into the editable-page document, whose viewport can be smaller than
+// our desired size. So before rendering the Rnd we measure that document's window and clamp
+// the initial size/position to fit; otherwise an oversized panel pins horizontal dragging
+// (the element is wider than the bounds) and pushes the resize handles off-screen. We bound
+// the panel to its parent (a full-viewport overlay supplied by the host) so it can be moved
+// on both axes and resized, and can never be dragged completely out of reach.
+type Box = { x: number; y: number; width: number; height: number };
+
+export const DraggableResizableFrame: React.FunctionComponent<{
+    title: string;
+    onClose: () => void;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
+    // When set, the frame's last size and position are remembered (in the page's localStorage)
+    // under this key and restored the next time a frame with the same key opens.
+    storageKey?: string;
+    children?: React.ReactNode;
+}> = (props) => {
+    const probeRef = useRef<HTMLDivElement>(null);
+    const rndRef = useRef<Rnd>(null);
+    const [box, setBox] = useState<Box | null>(null);
+
+    // Where we remember the size/position. Scoped to the storageKey the host passed.
+    const storageKey = props.storageKey
+        ? `gte-frame-geometry:${props.storageKey}`
+        : null;
+
+    // Read a previously saved box, ignoring anything corrupt or not in the expected shape.
+    const readSavedBox = (win: Window | null | undefined): Box | null => {
+        if (!storageKey || !win) return null;
+        try {
+            const raw = win.localStorage.getItem(storageKey);
+            if (!raw) return null;
+            const v = JSON.parse(raw);
+            if (
+                typeof v?.x === "number" &&
+                typeof v?.y === "number" &&
+                typeof v?.width === "number" &&
+                typeof v?.height === "number"
+            )
+                return v;
+        } catch {
+            // Corrupt or unreadable storage: fall back to the default geometry.
+        }
+        return null;
+    };
+
+    // Remember the current size/position so it can be restored next time.
+    const saveBox = (node: HTMLElement, x: number, y: number) => {
+        if (!storageKey) return;
+        const win = node.ownerDocument.defaultView;
+        if (!win) return;
+        const saved: Box = {
+            x,
+            y,
+            width: node.offsetWidth,
+            height: node.offsetHeight,
+        };
+        win.localStorage.setItem(storageKey, JSON.stringify(saved));
+    };
+
+    useLayoutEffect(() => {
+        // probeRef lives in the page document, so its window is the page iframe's window.
+        const win = probeRef.current?.ownerDocument?.defaultView;
+        const vw = win?.innerWidth ?? 800;
+        const vh = win?.innerHeight ?? 600;
+        // Prefer a remembered size/position, clamped to the current viewport; otherwise use the
+        // default size tucked into the top-left.
+        const saved = readSavedBox(win);
+        if (saved) {
+            const width = Math.min(saved.width, vw - 24);
+            const height = Math.min(saved.height, vh - 24);
+            const x = Math.min(Math.max(0, saved.x), Math.max(0, vw - width));
+            const y = Math.min(Math.max(0, saved.y), Math.max(0, vh - 40));
+            setBox({ x, y, width, height });
+            return;
+        }
+        const width = Math.min(props.defaultWidth ?? 700, vw - 24);
+        const height = Math.min(props.defaultHeight ?? 540, vh - 24);
+        const x = Math.max(8, Math.min(48, vw - width - 8));
+        const y = Math.max(8, Math.min(48, vh - height - 8));
+        setBox({ x, y, width, height });
+        // storageKey is derived from a prop and stable for the life of the frame.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.defaultWidth, props.defaultHeight]);
+
+    if (!box) {
+        // Transient: a zero-impact node we use only to find the page document/window.
+        return <div ref={probeRef} />;
+    }
+
+    // The host mounts us inside a full-window overlay that is pointer-events:none so the page
+    // stays clickable. But Bloom's edit surface is built from iframes, and the moment a drag
+    // crosses an iframe the top document stops receiving mouse events and react-rnd freezes.
+    // So while dragging/resizing we turn the overlay into a pointer-events shield (it sits above
+    // the iframes at the same z-index), then turn it back off when the gesture ends.
+    const setShield = (node: HTMLElement | null | undefined, on: boolean) => {
+        const overlay = node?.parentElement;
+        if (overlay) overlay.style.pointerEvents = on ? "auto" : "none";
+    };
+
+    // react-rnd's built-in `bounds` clamps incorrectly in this WebView2 + fractional-DPI
+    // environment (it pins the panel to an edge). So we don't use `bounds`; instead, after a
+    // drag we clamp the position ourselves so the whole panel stays horizontally on-screen and
+    // the title bar stays reachable vertically.
+    const clampIntoView = (node: HTMLElement, x: number, y: number) => {
+        const win = node.ownerDocument.defaultView;
+        if (!win) return;
+        const maxX = Math.max(0, win.innerWidth - node.offsetWidth);
+        const maxY = Math.max(0, win.innerHeight - 40); // keep the title bar reachable
+        const cx = Math.min(Math.max(0, x), maxX);
+        const cy = Math.min(Math.max(0, y), maxY);
+        if (cx !== x || cy !== y)
+            rndRef.current?.updatePosition({ x: cx, y: cy });
+    };
+
+    return (
+        <Rnd
+            ref={rndRef}
+            default={box}
+            minWidth={props.minWidth ?? 360}
+            minHeight={props.minHeight ?? 280}
+            dragHandleClassName="gte-drag-handle"
+            onDragStart={(_e, d) => setShield(d.node, true)}
+            onDragStop={(_e, d) => {
+                setShield(d.node, false);
+                clampIntoView(d.node, d.x, d.y);
+                saveBox(d.node, d.x, d.y);
+            }}
+            onResizeStart={(_e, _dir, ref) => setShield(ref, true)}
+            onResizeStop={(_e, _dir, ref, _delta, position) => {
+                setShield(ref, false);
+                saveBox(ref, position.x, position.y);
+            }}
+            // re-resizable sets the root's inline display, which would beat an emotion class.
+            // So the flex column that bounds the scrollable middle region must go in `style`,
+            // where it wins. Visual styling stays in css below.
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden",
+            }}
+            css={css`
+                z-index: 6000;
+                pointer-events: auto;
+                background: white;
+                border: 1px solid #b0b0b0;
+                border-radius: 6px;
+                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
+                overflow: hidden;
+                font-family: ${bloom.fontStack};
+                color: #202020;
+            `}
+        >
+            <div
+                className="gte-drag-handle"
+                css={css`
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 6px 10px;
+                    background: ${bloom.blue};
+                    color: white;
+                    cursor: move;
+                    user-select: none;
+                    flex-shrink: 0;
+                `}
+            >
+                <span
+                    css={css`
+                        font-size: 14px;
+                        font-weight: 600;
+                    `}
+                >
+                    {props.title}
+                </span>
+                <button
+                    type="button"
+                    onClick={props.onClose}
+                    title="Close"
+                    css={css`
+                        border: none;
+                        background: transparent;
+                        color: white;
+                        font-size: 16px;
+                        line-height: 1;
+                        cursor: pointer;
+                        padding: 2px 6px;
+                        &:hover {
+                            color: #ffd0d0;
+                        }
+                    `}
+                >
+                    ✕
+                </button>
+            </div>
+            <div
+                css={css`
+                    flex: 1;
+                    min-height: 0;
+                    display: flex;
+                    flex-direction: column;
+                `}
+            >
+                {props.children}
+            </div>
+        </Rnd>
+    );
+};
diff --git a/src/gameThemeEditor/src/GameThemeEditorPanel.tsx b/src/gameThemeEditor/src/GameThemeEditorPanel.tsx
new file mode 100644
index 000000000000..abaabbc4806a
--- /dev/null
+++ b/src/gameThemeEditor/src/GameThemeEditorPanel.tsx
@@ -0,0 +1,510 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { IGameThemeEditorHost, Theme } from "./host/IGameThemeEditorHost";
+import {
+    rootVariableNames,
+    slugify,
+    slugToDisplayName,
+    themeVariables,
+} from "./themeModel";
+import { DraggableResizableFrame } from "./DraggableResizableFrame";
+import { ColorsOutline } from "./ColorsOutline";
+import { ContrastChecker } from "./ContrastChecker";
+import { parseColorToRgba } from "./contrastUtils";
+import { buildThemeSwatches } from "./colorUtils";
+import { bloom } from "./bloomTheme";
+
+// True when two CSS color strings denote the same color, comparing by RGB so that "black",
+// "#000000", and "rgb(0,0,0)" all match. Used to spot a color that already equals what it
+// would derive to if we didn't specify it.
+const sameColor = (a: string, b: string): boolean => {
+    const [ar, ag, ab, aa] = parseColorToRgba(a);
+    const [br, bg, bb, ba] = parseColorToRgba(b);
+    return ar === br && ag === bg && ab === bb && aa === ba;
+};
+
+// Each variable's parent in the derivation hierarchy (the chain .apply-game-theme() defines,
+// e.g. --game-text-color derives from --game-primary-color). Built once from the static model.
+const parentByName: Record<string, string> = {};
+themeVariables.forEach((v) => {
+    if (v.parent) parentByName[v.name] = v.parent;
+});
+
+// A small trash-bin glyph for the Delete links, inline so the editor stays dependency-free.
+const TrashIcon: React.FunctionComponent = () => (
+    <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+    >
+        <path d="M3 6h18" />
+        <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
+        <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+        <path d="M10 11v6M14 11v6" />
+    </svg>
+);
+
+// The whole editor UI: a Colors outline plus an Elements (contrast) pane. It holds the working color values and which variables are "explicit" (part of
+// the theme), pushes every edit to the host for live recoloring, re-reads the resolved
+// values from the live page so derived colors update everywhere, and builds a Theme to
+// hand back on save. No CSS variable names or raw CSS are shown.
+export const GameThemeEditorPanel: React.FunctionComponent<{
+    host: IGameThemeEditorHost;
+}> = (props) => {
+    const host = props.host;
+    const startingSlug = host.getCurrentThemeName();
+    // "New" mode (a copy of the current theme): present a fresh name, treat as custom, and on
+    // save write a new slug without deleting the original.
+    const newThemeName = host.getNewThemeName();
+    const isNewTheme = newThemeName !== null;
+    // Factory themes (shipped in source) can't be renamed and can only be saved back to source.
+    const isFactory = isNewTheme ? false : host.isFactoryTheme();
+    // When renaming an existing custom theme, the slug to replace (empty for new themes/factory).
+    const renameFromSlug = isNewTheme ? "" : startingSlug;
+    // Default the Save button to wherever the theme already lives: a collection theme defaults to
+    // "Save to Collection"; a factory theme to source; otherwise (book/new) to "Save to Book".
+    const themeSource = isNewTheme ? "none" : host.getThemeSource();
+    let defaultTarget: "source" | "collection" | "book";
+    if (isFactory) defaultTarget = "source";
+    else if (themeSource === "collection") defaultTarget = "collection";
+    else defaultTarget = "book";
+    // Where this (non-factory) theme can be deleted from. New themes aren't saved anywhere yet.
+    const locations = isNewTheme
+        ? { inCollection: false, inBook: false }
+        : host.getThemeLocations();
+
+    const [displayName, setDisplayName] = useState(
+        isNewTheme ? newThemeName : slugToDisplayName(startingSlug || "custom"),
+    );
+    // Effective color of every variable (seeded from the live page's computed style).
+    const [values, setValues] = useState<Record<string, string>>(() =>
+        host.readAppliedVariables(),
+    );
+    // Which variables are explicitly part of the theme as loaded (the theme's own rule plus
+    // the two roots, which are always written). Captured once so "Reset" can restore it.
+    const initialExplicit = useMemo(
+        () =>
+            new Set<string>([
+                ...rootVariableNames,
+                ...Object.keys(host.getThemeDefinition(startingSlug)),
+            ]),
+        [host, startingSlug],
+    );
+    const [explicit, setExplicit] = useState<Set<string>>(
+        () => new Set(initialExplicit),
+    );
+    const [canDev, setCanDev] = useState(false);
+    const [status, setStatus] = useState<string>("");
+    const [busy, setBusy] = useState(false);
+    // Variables used by the preview/contrast item the user last clicked; the Colors outline
+    // highlights and reveals them.
+    const [highlightedVars, setHighlightedVars] = useState<string[]>([]);
+
+    // The picker palette: black, white, and the theme's own current colors (deduped so colors
+    // that look the same aren't offered twice). Recomputed as the live colors change.
+    const swatches = useMemo(
+        () => buildThemeSwatches(Object.values(values)),
+        [values],
+    );
+
+    useEffect(() => {
+        host.canSaveToFactorySource().then(setCanDev);
+    }, [host]);
+
+    // Drop any explicit color that already equals what it would derive to if we hadn't specified
+    // it (its parent's resolved value in the derivation hierarchy — the same chain the Colors
+    // outline is built from), keeping the theme minimal. To "drop" one we make it DERIVE from its
+    // parent (override it to var(--parent)) rather than clearing the override: clearing would fall
+    // back to the theme's own stylesheet rule, which may pin a different color, so the page would
+    // visibly change. Deriving shows the same color, tracks the parent, and isn't saved (it's no
+    // longer in "explicit"). Returns the pruned set; order-independent since each variable is
+    // compared to its parent's resolved value and deriving a redundant one doesn't change a value.
+    const dropRedundantColors = (currentExplicit: Set<string>): Set<string> => {
+        const resolved = host.readAppliedVariables();
+        const next = new Set(currentExplicit);
+        for (const def of themeVariables) {
+            // Roots/independent colors have no parent to derive from, so keep them.
+            if (!def.parent || !next.has(def.name)) continue;
+            if (sameColor(resolved[def.name], resolved[def.parent])) {
+                host.setLiveVariable(def.name, `var(${def.parent})`);
+                next.delete(def.name);
+            }
+        }
+        return next;
+    };
+
+    // On open, prune any colors the loaded theme specifies redundantly (already equal to what
+    // they'd derive to), so the editor starts from a minimal theme and the outline shows only
+    // genuinely-customized colors. Runs once.
+    useEffect(() => {
+        setExplicit(dropRedundantColors(explicit));
+        setValues(host.readAppliedVariables());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // A freshly-created theme wants a real name, so highlight the field on open so the user can
+    // just start typing. We focus immediately and again after a short delay, because when opened
+    // from the theme dropdown the closing menu restores focus to the dropdown right after we
+    // mount, which would otherwise steal it back. Keyed off isNewTheme (the host's explicit "new"
+    // signal) rather than sniffing the name for "Untitled": that literal is the English suggested
+    // name, so matching it would both misfire on a user theme actually called "Untitled ..." and
+    // break silently if the suggested name is ever localized.
+    const nameInputRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+        if (!isNewTheme) return;
+        const selectName = () => {
+            nameInputRef.current?.focus();
+            nameInputRef.current?.select();
+        };
+        selectName();
+        const timer = setTimeout(selectName, 150);
+        return () => clearTimeout(timer);
+        // Only on first open.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const handleChange = (name: string, hex: string) => {
+        host.setLiveVariable(name, hex);
+        // Re-read all values: changing a root cascades to its derived descendants on the
+        // live page, and we want those new colors reflected in the outline/preview/contrast.
+        // Then drop any color (the one just set, or a descendant) that now matches what it
+        // would derive to anyway.
+        setExplicit(dropRedundantColors(new Set(explicit).add(name)));
+        setValues(host.readAppliedVariables());
+        setStatus("");
+    };
+
+    const handleReset = (name: string) => {
+        // Make the variable derive from its parent again. We override it to var(--parent) rather
+        // than clearing the override, because clearing would fall back to the theme's stylesheet
+        // rule (which may pin a different color) instead of the derived value the user expects.
+        const parent = parentByName[name];
+        host.setLiveVariable(name, parent ? `var(${parent})` : undefined);
+        setExplicit((prev) => {
+            const next = new Set(prev);
+            next.delete(name);
+            return next;
+        });
+        // The browser has recomputed the derived value; re-read so swatches show it.
+        setValues(host.readAppliedVariables());
+        setStatus("");
+    };
+
+    // Discard all edits made in this session, restoring the theme exactly as it was loaded.
+    const handleResetAll = () => {
+        host.clearLiveOverrides();
+        setExplicit(new Set(initialExplicit));
+        setValues(host.readAppliedVariables());
+        setStatus("");
+    };
+
+    const buildTheme = (): Theme => {
+        const variables: Record<string, string> = {};
+        explicit.forEach((name) => {
+            variables[name] = values[name];
+        });
+        return { slug: slugify(displayName), displayName, variables };
+    };
+
+    const del = async (where: "collection" | "book") => {
+        setBusy(true);
+        setStatus("Deleting…");
+        try {
+            if (where === "collection")
+                await host.deleteFromCollection(startingSlug);
+            else await host.deleteFromBook(startingSlug);
+            host.close();
+        } catch (e) {
+            setStatus("Delete failed: " + (e as Error).message);
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const save = async (target: "book" | "collection" | "source") => {
+        const theme = buildTheme();
+        if (!theme.slug) {
+            setStatus("Please enter a theme name.");
+            return;
+        }
+        // Don't clobber a different existing theme by renaming/creating onto its name.
+        // Compare against renameFromSlug, not startingSlug: for a New/Customize theme
+        // renameFromSlug is "" (we are not replacing anything), so naming it after the theme it
+        // was based on correctly trips this guard. startingSlug is the theme the page was showing
+        // when the editor opened, which for those modes IS the base theme -- comparing against it
+        // silently skipped the check and let the save overwrite the base. When simply editing a
+        // theme in place, renameFromSlug equals its own slug, so saving over itself is still fine.
+        if (theme.slug !== renameFromSlug && host.themeExists(theme.slug)) {
+            setStatus(
+                `A theme named "${theme.displayName}" already exists. Please choose another name.`,
+            );
+            return;
+        }
+        setBusy(true);
+        setStatus("Saving…");
+        try {
+            if (target === "source")
+                await host.saveToFactorySource(theme, renameFromSlug);
+            else if (target === "book")
+                await host.saveToBook(theme, renameFromSlug);
+            else await host.saveToCollection(theme, renameFromSlug);
+            // A successful save applies the theme to the page, so we're done: close the dialog.
+            host.close();
+        } catch (e) {
+            setStatus("Save failed: " + (e as Error).message);
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <DraggableResizableFrame
+            title="Game Theme Editor"
+            onClose={host.close}
+            defaultWidth={1040}
+            defaultHeight={600}
+            minWidth={300}
+            minHeight={300}
+            storageKey="game-theme-editor"
+        >
+            <div
+                css={css`
+                    padding: 10px 12px;
+                    border-bottom: 1px solid #e0e0e0;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: flex-end;
+                    gap: 8px;
+                `}
+            >
+                <div>
+                    <label
+                        css={css`
+                            display: block;
+                            font-size: 12px;
+                            color: #555;
+                            margin-bottom: 3px;
+                        `}
+                    >
+                        Theme name
+                        {isFactory ? " (factory theme — can't rename)" : ""}
+                    </label>
+                    <input
+                        ref={nameInputRef}
+                        type="text"
+                        value={displayName}
+                        disabled={isFactory}
+                        onChange={(e) => setDisplayName(e.target.value)}
+                        css={css`
+                            width: 21ch;
+                            max-width: 100%;
+                            box-sizing: border-box;
+                            padding: 5px 7px;
+                            font-size: 14px;
+                            border: 1px solid #c0c0c0;
+                            border-radius: 4px;
+                            &:disabled {
+                                background: #f3f3f3;
+                                color: #777;
+                            }
+                        `}
+                    />
+                </div>
+            </div>
+
+            {/* The three panes flow: a wide (short) dialog lays them out side by side; a tall,
+                thin dialog wraps them into a single column. Each pane has a flex-basis so wrapping
+                is driven by the available width. */}
+            <div
+                css={css`
+                    flex: 1;
+                    min-height: 0;
+                    overflow: auto;
+                    padding: 12px;
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: flex-start;
+                    gap: 12px;
+                `}
+            >
+                {/* Elements pane on the left; clicking an element reveals its settings in the
+                    Colors outline on the right. */}
+                <div css={paneStyle}>
+                    <ContrastChecker
+                        resolvedValues={values}
+                        onSelectVars={setHighlightedVars}
+                    />
+                </div>
+                <div css={paneStyle}>
+                    <ColorsOutline
+                        resolvedValues={values}
+                        isVariableOverridden={(n) => explicit.has(n)}
+                        onColorChange={handleChange}
+                        onReset={handleReset}
+                        onResetAll={handleResetAll}
+                        highlightedVars={highlightedVars}
+                        swatches={swatches}
+                    />
+                </div>
+            </div>
+
+            <div
+                css={css`
+                    border-top: 1px solid #e0e0e0;
+                    padding: 8px 12px;
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 8px;
+                    flex-shrink: 0;
+                `}
+            >
+                {/* Borderless delete links on the far left, for a non-factory theme that exists
+                    in the collection and/or this book. */}
+                {!isFactory && locations.inCollection && (
+                    <button
+                        type="button"
+                        disabled={busy}
+                        onClick={() => del("collection")}
+                        css={borderlessButtonStyle}
+                    >
+                        <TrashIcon />
+                        Delete from Collection
+                    </button>
+                )}
+                {!isFactory && locations.inBook && (
+                    <button
+                        type="button"
+                        disabled={busy}
+                        onClick={() => del("book")}
+                        css={borderlessButtonStyle}
+                    >
+                        <TrashIcon />
+                        Delete from Book
+                    </button>
+                )}
+                {/* Developer-only, set apart on the far left: writes the factory source. Only
+                    shown for an actual factory theme (it overwrites that theme's source); for a
+                    factory theme it's the only available save, so make it prominent. In the custom
+                    theme scenario it's hidden rather than shown disabled. */}
+                {canDev && isFactory && (
+                    <button
+                        type="button"
+                        disabled={busy}
+                        onClick={() => save("source")}
+                        css={buttonStyle("primary")}
+                    >
+                        Save Factory Theme to Source
+                    </button>
+                )}
+                <span
+                    css={css`
+                        flex: 1 1 40px;
+                        min-width: 0;
+                        font-size: 12px;
+                        color: #666;
+                    `}
+                >
+                    {status}
+                </span>
+                {/* Factory themes can only be saved back to source (above), not to a book or
+                    collection; to customize one, use "New" to make an editable copy. */}
+                {/* Save to Collection is temporarily disabled.
+                <button
+                    type="button"
+                    disabled={busy || isFactory}
+                    onClick={() => save("collection")}
+                    title="Save this theme so it can be used by every book in this collection."
+                    css={buttonStyle(
+                        defaultTarget === "collection" ? "primary" : "outline",
+                    )}
+                >
+                    Save to Collection
+                </button>
+                */}
+                <button
+                    type="button"
+                    disabled={busy || isFactory}
+                    onClick={() => save("book")}
+                    title="Save this theme in this book only."
+                    css={buttonStyle(
+                        defaultTarget === "book" ? "primary" : "outline",
+                    )}
+                >
+                    Save to Book
+                </button>
+                <button
+                    type="button"
+                    disabled={busy}
+                    onClick={host.close}
+                    title="Discard your changes and close the editor."
+                    css={buttonStyle("outline")}
+                >
+                    Cancel
+                </button>
+            </div>
+        </DraggableResizableFrame>
+    );
+};
+
+// Each of the three panes; flex-basis drives the wrap from a row (wide) to a column (thin).
+const paneStyle = css`
+    flex: 1 1 300px;
+    min-width: 260px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+`;
+
+// MUI-like buttons using Bloom's palette (contained = filled primary; outlined = bordered).
+// A borderless text button with a leading icon (for the Delete links). Neutral color, not red.
+const borderlessButtonStyle = css`
+    border: none;
+    background: transparent;
+    padding: 6px 8px;
+    font-size: 13px;
+    cursor: pointer;
+    color: #555;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    &:hover:not(:disabled) {
+        text-decoration: underline;
+    }
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+`;
+
+const buttonStyle = (variant: "primary" | "outline") => css`
+    padding: 6px 16px;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    border-radius: 4px;
+    cursor: pointer;
+    white-space: nowrap;
+    border: 1px solid ${variant === "primary" ? bloom.blue : bloom.blue};
+    background: ${variant === "primary" ? bloom.blue : "transparent"};
+    color: ${variant === "primary" ? "white" : bloom.blueText};
+    &:hover:not(:disabled) {
+        background: ${variant === "primary"
+            ? bloom.blueText
+            : "rgba(29, 148, 164, 0.08)"};
+    }
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+`;
diff --git a/src/gameThemeEditor/src/VariableRow.tsx b/src/gameThemeEditor/src/VariableRow.tsx
new file mode 100644
index 000000000000..15996d192c26
--- /dev/null
+++ b/src/gameThemeEditor/src/VariableRow.tsx
@@ -0,0 +1,160 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import type { HierarchyNode } from "./themeModel";
+import { ColorSwatch } from "./ColorSwatch";
+import { bloom } from "./bloomTheme";
+
+const INDENT = 22; // px per level
+
+// One row of the colors outline: indentation + hierarchy connectors, an optional
+// expand/collapse chevron, the color swatch, the friendly label, and either an
+// "Inherited" tag (derived value) or a "Reset" button (explicitly overridden).
+export const VariableRow: React.FunctionComponent<{
+    node: HierarchyNode;
+    value: string;
+    isOverridden: boolean;
+    isExpanded: boolean;
+    hasChildren: boolean;
+    /** Highlighted because the preview/contrast item the user clicked uses this variable. */
+    isHighlighted: boolean;
+    /** Palette offered by the color picker (black, white, the theme's colors). */
+    swatches: string[];
+    onToggleExpand: () => void;
+    onColorChange: (hex: string) => void;
+    onReset: () => void;
+}> = (props) => {
+    const showConnector = props.node.level > 0;
+    return (
+        <div
+            data-var={props.node.name}
+            css={css`
+                position: relative;
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                padding: 3px 0;
+                margin-left: ${props.node.level * INDENT}px;
+                ${props.isHighlighted
+                    ? "background: #fff3a0; border-radius: 3px;"
+                    : ""}
+            `}
+        >
+            {showConnector && (
+                <React.Fragment>
+                    {/* vertical line up to the parent row */}
+                    <span
+                        css={css`
+                            position: absolute;
+                            left: -${INDENT / 2}px;
+                            top: 0;
+                            bottom: 50%;
+                            width: 1px;
+                            background: #d0d0d0;
+                        `}
+                    />
+                    {/* horizontal line to this row */}
+                    <span
+                        css={css`
+                            position: absolute;
+                            left: -${INDENT / 2}px;
+                            top: 50%;
+                            width: ${INDENT / 2 - 3}px;
+                            height: 1px;
+                            background: #d0d0d0;
+                        `}
+                    />
+                </React.Fragment>
+            )}
+
+            {props.hasChildren ? (
+                <button
+                    type="button"
+                    onClick={props.onToggleExpand}
+                    aria-label={props.isExpanded ? "Collapse" : "Expand"}
+                    css={css`
+                        width: 18px;
+                        height: 18px;
+                        border: none;
+                        background: transparent;
+                        cursor: pointer;
+                        color: #555;
+                        font-size: 11px;
+                        line-height: 1;
+                        padding: 0;
+                        flex-shrink: 0;
+                    `}
+                >
+                    {props.isExpanded ? "▾" : "▸"}
+                </button>
+            ) : (
+                <span
+                    css={css`
+                        width: 18px;
+                        flex-shrink: 0;
+                    `}
+                />
+            )}
+
+            <ColorSwatch
+                value={props.value}
+                isInherited={!props.isOverridden}
+                swatches={props.swatches}
+                onChange={props.onColorChange}
+                title={props.node.displayName}
+            />
+
+            <span
+                css={css`
+                    flex: 1;
+                    font-size: 13px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    ${props.isOverridden ? "font-weight: 600;" : ""}
+                `}
+            >
+                {props.node.displayName}
+            </span>
+
+            {!props.isOverridden ? (
+                <span
+                    css={css`
+                        font-size: 11px;
+                        color: #999;
+                        flex-shrink: 0;
+                    `}
+                >
+                    Inherited
+                </span>
+            ) : props.node.level > 0 ? (
+                <button
+                    type="button"
+                    onClick={props.onReset}
+                    css={css`
+                        border: none;
+                        background: transparent;
+                        color: ${bloom.blueText};
+                        cursor: pointer;
+                        font-size: 12px;
+                        padding: 2px 4px;
+                        flex-shrink: 0;
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    `}
+                >
+                    Reset
+                </button>
+            ) : (
+                // root variable: nothing to reset to; keep the row width stable
+                <span
+                    css={css`
+                        width: 40px;
+                        flex-shrink: 0;
+                    `}
+                />
+            )}
+        </div>
+    );
+};
diff --git a/src/gameThemeEditor/src/bloomTheme.ts b/src/gameThemeEditor/src/bloomTheme.ts
new file mode 100644
index 000000000000..a3a333504fd2
--- /dev/null
+++ b/src/gameThemeEditor/src/bloomTheme.ts
@@ -0,0 +1,12 @@
+// Bloom UI theme tokens, COPIED (not imported) from src/BloomBrowserUI/bloomMaterialUITheme.ts
+// and utils/colorUtils.ts so this editor stays a self-contained project that depends on nothing
+// in BloomBrowserUI. Keep these in sync with Bloom if its palette changes.
+export const bloom = {
+    blue: "#1d94a4", // kBloomBlue — primary
+    blueText: "#19818f", // kBloomBlueTextBackground — darker blue for contrast
+    purple: "#96668f", // kBloomPurple — secondary
+    red: "#d65649", // kBloomRed
+    gold: "#f3aa18", // kBloomGold
+    panel: "#2e2e2e", // kPanelBackground
+    fontStack: "Roboto, NotoSans, sans-serif", // kUiFontStack
+};
diff --git a/src/gameThemeEditor/src/colorUtils.ts b/src/gameThemeEditor/src/colorUtils.ts
new file mode 100644
index 000000000000..962ca9845af0
--- /dev/null
+++ b/src/gameThemeEditor/src/colorUtils.ts
@@ -0,0 +1,137 @@
+// Small color helpers for the editor's color picker and swatches: converting arbitrary CSS
+// color strings ("white", "rgb(0,88,204)", "#0058cc", "#rrggbbaa", …) to/from the HSVA model
+// the picker edits, deduping swatches, and drawing transparency.
+
+import { parseColorToRgb, parseColorToRgba } from "./contrastUtils";
+
+// CSS for a light/grey checkerboard, drawn behind a (possibly translucent) color so its
+// transparency is visible. Put the real color in a layer on top of an element with this.
+export const checkerboardBackground = `
+    background-color: white;
+    background-image:
+        linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
+        linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
+        linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
+    background-size: 8px 8px;
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+`;
+
+/** Canonical "#rrggbb" (opaque) or "#rrggbbaa" (translucent) form of any CSS color string. */
+export const toCanonicalColor = (cssColor: string): string => {
+    const [r, g, b, a] = parseColorToRgba(cssColor);
+    const h2 = (n: number) => n.toString(16).padStart(2, "0");
+    const base = `#${h2(r)}${h2(g)}${h2(b)}`;
+    return a >= 1 ? base : base + h2(Math.round(a * 255));
+};
+
+// Two colors count as "the same to the eye" when every channel is within this many 0-255 steps
+// and their alpha within a small fraction. Used only to avoid listing near-identical swatches
+// twice; the values stored when a swatch is clicked are still the exact theme colors.
+const kSwatchMergeTolerance = 12;
+const kAlphaMergeTolerance = 0.06;
+
+const colorsLookAlike = (a: string, b: string): boolean => {
+    const [ar, ag, ab, aa] = parseColorToRgba(a);
+    const [br, bg, bb, ba] = parseColorToRgba(b);
+    return (
+        Math.abs(ar - br) <= kSwatchMergeTolerance &&
+        Math.abs(ag - bg) <= kSwatchMergeTolerance &&
+        Math.abs(ab - bb) <= kSwatchMergeTolerance &&
+        Math.abs(aa - ba) <= kAlphaMergeTolerance
+    );
+};
+
+// HSV is the natural model for the picker's spectrum (a saturation/value square plus a hue
+// slider), so we convert to/from it here. h is in [0,360); s and v are in [0,1].
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+
+const rgbToHsv = (r: number, g: number, b: number): Hsv => {
+    const rr = r / 255;
+    const gg = g / 255;
+    const bb = b / 255;
+    const max = Math.max(rr, gg, bb);
+    const min = Math.min(rr, gg, bb);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === rr) h = ((gg - bb) / d) % 6;
+        else if (max === gg) h = (bb - rr) / d + 2;
+        else h = (rr - gg) / d + 4;
+        h *= 60;
+        if (h < 0) h += 360;
+    }
+    return { h, s: max === 0 ? 0 : d / max, v: max };
+};
+
+/** The HSV of any CSS color string. */
+export const colorToHsv = (cssColor: string): Hsv => {
+    const [r, g, b] = parseColorToRgb(cssColor);
+    return rgbToHsv(r, g, b);
+};
+
+/** "#rrggbb" for an HSV color. */
+export const hsvToHex = (hsv: Hsv): string => {
+    const c = hsv.v * hsv.s;
+    const x = c * (1 - Math.abs(((hsv.h / 60) % 2) - 1));
+    const m = hsv.v - c;
+    let rr = 0;
+    let gg = 0;
+    let bb = 0;
+    if (hsv.h < 60) [rr, gg] = [c, x];
+    else if (hsv.h < 120) [rr, gg] = [x, c];
+    else if (hsv.h < 180) [gg, bb] = [c, x];
+    else if (hsv.h < 240) [gg, bb] = [x, c];
+    else if (hsv.h < 300) [rr, bb] = [x, c];
+    else [rr, bb] = [c, x];
+    const toHex = (n: number) =>
+        Math.round((n + m) * 255)
+            .toString(16)
+            .padStart(2, "0");
+    return `#${toHex(rr)}${toHex(gg)}${toHex(bb)}`;
+};
+
+// HSV plus an alpha channel (a in [0,1]), for a picker that can edit transparency.
+export interface Hsva extends Hsv {
+    a: number;
+}
+
+/** The HSVA of any CSS color string. */
+export const colorToHsva = (cssColor: string): Hsva => {
+    const [r, g, b, a] = parseColorToRgba(cssColor);
+    return { ...rgbToHsv(r, g, b), a };
+};
+
+/** "#rrggbb" (opaque) or "#rrggbbaa" (translucent) for an HSVA color. */
+export const hsvaToColor = (hsva: Hsva): string => {
+    const base = hsvToHex(hsva);
+    if (hsva.a >= 1) return base;
+    const aa = Math.round(Math.min(1, Math.max(0, hsva.a)) * 255)
+        .toString(16)
+        .padStart(2, "0");
+    return base + aa;
+};
+
+/**
+ * Build the swatch palette for the picker: black, white, then each distinct color currently
+ * used in the theme (passed in as CSS color strings). Near-identical colors are merged so the
+ * user doesn't see what looks like the same color twice; the first occurrence wins, so the
+ * representative is an exact theme color. Returns canonical "#rrggbb"/"#rrggbbaa" strings
+ * (alpha preserved, so a translucent theme color stays translucent in the palette).
+ */
+export const buildThemeSwatches = (themeColors: string[]): string[] => {
+    const result: string[] = [];
+    const add = (cssColor: string) => {
+        const canonical = toCanonicalColor(cssColor);
+        if (!result.some((existing) => colorsLookAlike(existing, canonical)))
+            result.push(canonical);
+    };
+    add("#000000");
+    add("#ffffff");
+    themeColors.forEach(add);
+    return result;
+};
diff --git a/src/gameThemeEditor/src/contrastUtils.ts b/src/gameThemeEditor/src/contrastUtils.ts
new file mode 100644
index 000000000000..b9537dc2b774
--- /dev/null
+++ b/src/gameThemeEditor/src/contrastUtils.ts
@@ -0,0 +1,102 @@
+// Minimal WCAG contrast helpers, inlined so the editor needs no extra dependency.
+// See https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio and #dfn-relative-luminance.
+
+// Tools for resolving ANY CSS color the browser understands — named colors, 8-digit hex,
+// rgb()/rgba(), and crucially color-mix() (which the targets use for transparency) — into exact
+// [r,g,b,a] bytes. We let the DOM resolve the color (so color-mix() etc. are evaluated; a
+// canvas alone can't), then read the painted pixel (so we don't depend on how getComputedStyle
+// happens to serialize it). This is why a faint, mostly-transparent target was wrongly scoring
+// high contrast: the color it was built from couldn't be parsed and fell back to opaque.
+let probeEl: HTMLSpanElement | null = null;
+let pixelCtx: CanvasRenderingContext2D | null = null;
+const resolveCache = new Map<string, [number, number, number, number]>();
+
+function getProbe(): HTMLSpanElement {
+    if (!probeEl) {
+        probeEl = document.createElement("span");
+        probeEl.style.cssText =
+            "position:absolute;left:-9999px;top:-9999px;width:0;height:0;";
+        document.body.appendChild(probeEl);
+    }
+    return probeEl;
+}
+
+function getPixelCtx(): CanvasRenderingContext2D {
+    if (!pixelCtx) {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        pixelCtx = canvas.getContext("2d", { willReadFrequently: true })!;
+    }
+    return pixelCtx;
+}
+
+/**
+ * Parse any CSS color string ("white", "#0058cc", "#rrggbbaa", "rgba(...)", "color-mix(...)") to
+ * [r,g,b,a], with r/g/b in 0-255 and a (alpha) in 0-1. The DOM resolves the color and we read the
+ * painted pixel, so functional colors and transparency come through exactly. Cached by input.
+ */
+export function parseColorToRgba(
+    cssColor: string,
+): [number, number, number, number] {
+    const value = (cssColor || "").trim();
+    const cached = resolveCache.get(value);
+    if (cached) return cached;
+
+    // 1. Let the DOM resolve the color (evaluates color-mix(), named colors, etc.). Resetting to
+    //    transparent first means an unparseable value yields transparent rather than a stale color.
+    const probe = getProbe();
+    probe.style.color = "rgba(0, 0, 0, 0)";
+    probe.style.color = value;
+    const resolved = getComputedStyle(probe).color || "rgba(0, 0, 0, 0)";
+
+    // 2. Paint the resolved color on a 1x1 canvas and read the exact bytes (canvas reliably parses
+    //    whatever rgb()/rgba()/color() form getComputedStyle returns).
+    const ctx = getPixelCtx();
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = "rgba(0, 0, 0, 0)";
+    ctx.fillStyle = resolved;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+
+    const result: [number, number, number, number] = [r, g, b, a / 255];
+    resolveCache.set(value, result);
+    return result;
+}
+
+/** Parse any CSS color string to [r,g,b] 0-255 (alpha dropped). */
+export function parseColorToRgb(cssColor: string): [number, number, number] {
+    const [r, g, b] = parseColorToRgba(cssColor);
+    return [r, g, b];
+}
+
+/**
+ * Flatten a (possibly translucent) top color over an opaque bottom color, returning the visible
+ * "rgb(...)". Contrast must be measured against what the eye actually sees, so a nearly-transparent
+ * color resolves close to its background (and so fails contrast) rather than to its nominal color.
+ */
+export function compositeOver(top: string, bottom: string): string {
+    const [tr, tg, tb, ta] = parseColorToRgba(top);
+    if (ta >= 1) return top;
+    const [br, bg, bb] = parseColorToRgb(bottom);
+    const mix = (t: number, b: number) => Math.round(t * ta + b * (1 - ta));
+    return `rgb(${mix(tr, br)}, ${mix(tg, bg)}, ${mix(tb, bb)})`;
+}
+
+/** WCAG relative luminance of an sRGB color. */
+function relativeLuminance([r, g, b]: [number, number, number]): number {
+    const channel = (c: number) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+/** WCAG contrast ratio (1..21) between two CSS colors. */
+export function contrastRatio(colorA: string, colorB: string): number {
+    const la = relativeLuminance(parseColorToRgb(colorA));
+    const lb = relativeLuminance(parseColorToRgb(colorB));
+    const lighter = Math.max(la, lb);
+    const darker = Math.min(la, lb);
+    return (lighter + 0.05) / (darker + 0.05);
+}
diff --git a/src/gameThemeEditor/src/host/IGameThemeEditorHost.ts b/src/gameThemeEditor/src/host/IGameThemeEditorHost.ts
new file mode 100644
index 000000000000..3a8aaf8c61e8
--- /dev/null
+++ b/src/gameThemeEditor/src/host/IGameThemeEditorHost.ts
@@ -0,0 +1,99 @@
+// The contract between the (self-contained) Game Theme Editor project and whatever
+// host embeds it. This file is the ONLY surface the host needs to implement, plus the
+// mount()/unmount() functions exported from ../index. The editor itself imports nothing
+// from the host application; all coupling flows through this interface, which the host
+// supplies as a concrete object at mount() time.
+//
+// In Bloom, the host implementation lives in the editable-page iframe so that it can
+// recolor the live .bloom-page element directly (see gameThemeEditorHost.ts on the
+// Bloom side). But nothing here is Bloom-specific: a standalone harness can implement
+// IGameThemeEditorHost to drive the editor against any preview surface.
+
+/** A theme is a named set of CSS custom-property overrides. */
+export interface Theme {
+    /** url-safe identifier, e.g. "blue-on-white"; also the game-theme-<slug> class suffix. */
+    slug: string;
+    /** human-friendly name shown in the dropdown, e.g. "Blue On White". */
+    displayName: string;
+    /** the CSS custom properties this theme sets explicitly, e.g. {"--game-primary-color": "#0058cc"}. */
+    variables: Record<string, string>;
+}
+
+export interface IGameThemeEditorHost {
+    /** The slug of the theme currently applied to the page when the editor opens. */
+    getCurrentThemeName(): string;
+
+    /**
+     * When the editor was opened via "New" (to create a copy of the current theme), the
+     * suggested name for the new theme (e.g. "Untitled Theme 3"); otherwise null. In "new"
+     * mode the editor seeds its colors from the current theme but saves under a new slug and
+     * never deletes the original.
+     */
+    getNewThemeName(): string | null;
+
+    /**
+     * Whether the theme being edited is a built-in/factory theme (defined in the shipped games
+     * stylesheet, not in a book/collection custom stylesheet). Factory themes cannot be renamed.
+     */
+    isFactoryTheme(): boolean;
+
+    /**
+     * Where the theme being edited currently lives, so the editor can default to the matching
+     * Save button (e.g. a theme from the collection defaults to "Save to Collection").
+     */
+    getThemeSource(): "factory" | "collection" | "book" | "none";
+
+    /** Which custom stylesheets currently contain the theme, so the editor can offer to delete it. */
+    getThemeLocations(): { inCollection: boolean; inBook: boolean };
+
+    /** Whether a theme with this slug already exists anywhere, so saving won't clobber another theme. */
+    themeExists(slug: string): boolean;
+
+    /** Delete the theme's rule from the collection stylesheet and update the live page. */
+    deleteFromCollection(slug: string): Promise<void>;
+
+    /** Delete the theme's rule from this book's stylesheet and update the live page. */
+    deleteFromBook(slug: string): Promise<void>;
+
+    /**
+     * The effective (computed) value of every theme variable on the live page right now.
+     * Used to seed the color swatches so they show what the user actually sees.
+     */
+    readAppliedVariables(): Record<string, string>;
+
+    /**
+     * The variables a given theme sets EXPLICITLY (as opposed to inheriting via the cascade),
+     * read from the stylesheet rule for that theme. Used to seed which swatches are "part of"
+     * the theme so save round-trips correctly and Reset knows what to clear.
+     */
+    getThemeDefinition(slug: string): Record<string, string>;
+
+    /**
+     * Live preview: set (or, when value is undefined, clear) a CSS custom property on the
+     * live page. The browser's native cascade derives all dependent variables, so the real
+     * game recolors immediately. This is why there is no separate preview component.
+     */
+    setLiveVariable(name: string, value: string | undefined): void;
+
+    /** Clear ALL live preview overrides at once, reverting the page to its saved theme. */
+    clearLiveOverrides(): void;
+
+    /**
+     * Persist the theme to the current book only (Bloom: customBookStyles2.css) and apply it.
+     * When renameFrom is given and differs from the theme's slug, the old theme rule is removed
+     * (an in-place rename rather than a duplicate).
+     */
+    saveToBook(theme: Theme, renameFrom?: string): Promise<void>;
+
+    /** Persist the theme collection-wide (Bloom: customCollectionStyles.css) and apply it. */
+    saveToCollection(theme: Theme, renameFrom?: string): Promise<void>;
+
+    /** Developer-only: persist into the factory theme source (Bloom: gamesThemes.less). */
+    saveToFactorySource(theme: Theme, renameFrom?: string): Promise<void>;
+
+    /** Whether the developer "save to factory themes" path is available (running from source). */
+    canSaveToFactorySource(): Promise<boolean>;
+
+    /** Tear down the editor (host removes the container and reverts unsaved live overrides). */
+    close(): void;
+}
diff --git a/src/gameThemeEditor/src/index.tsx b/src/gameThemeEditor/src/index.tsx
new file mode 100644
index 000000000000..62ee0d0ce484
--- /dev/null
+++ b/src/gameThemeEditor/src/index.tsx
@@ -0,0 +1,69 @@
+// Public entry point of the self-contained Game Theme Editor project.
+// A host mounts the editor into a container element and passes a concrete
+// IGameThemeEditorHost; the editor knows nothing else about the host application.
+
+import { createRoot, Root } from "react-dom/client";
+import createCache, { EmotionCache } from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import type { IGameThemeEditorHost } from "./host/IGameThemeEditorHost";
+import { GameThemeEditorPanel } from "./GameThemeEditorPanel";
+
+export type { IGameThemeEditorHost, Theme } from "./host/IGameThemeEditorHost";
+export { themeVariableNames } from "./themeModel";
+
+// The React root and the Emotion cache are kept together: the cache owns the <style> elements
+// Emotion injects into the document head, so unmount() needs it to clean them up again.
+interface MountedEditor {
+    root: Root;
+    cache: EmotionCache;
+}
+const mountedByContainer = new WeakMap<HTMLElement, MountedEditor>();
+
+/**
+ * Mount (or re-render) the editor into the given container, driven by the host.
+ *
+ * The container may live in a DIFFERENT document than the code calling mount() — in Bloom
+ * the host runs in the toolbox iframe but mounts the panel into the editable-page iframe so
+ * it can recolor the live page. So we give Emotion a cache anchored to the container's own
+ * document head; otherwise the css-prop styles would be injected into the caller's document
+ * and never reach the panel.
+ */
+export function mount(
+    container: HTMLElement,
+    host: IGameThemeEditorHost,
+): void {
+    // Reuse the existing root AND cache when re-rendering into the same container. Creating a
+    // fresh cache per call would inject a duplicate set of <style> elements every time.
+    let mounted = mountedByContainer.get(container);
+    if (!mounted) {
+        mounted = {
+            root: createRoot(container),
+            cache: createCache({
+                key: "gte",
+                container: container.ownerDocument.head,
+            }),
+        };
+        mountedByContainer.set(container, mounted);
+    }
+    mounted.root.render(
+        <CacheProvider value={mounted.cache}>
+            <GameThemeEditorPanel host={host} />
+        </CacheProvider>,
+    );
+}
+
+/**
+ * Unmount the editor from the container, if present.
+ *
+ * Emotion injects its <style> elements into the document head rather than into the container,
+ * so removing the container (as the host does) does not take them with it. flush() removes the
+ * ones this cache inserted; without it, every open/close cycle would leave another set behind.
+ */
+export function unmount(container: HTMLElement): void {
+    const mounted = mountedByContainer.get(container);
+    if (mounted) {
+        mounted.root.unmount();
+        mounted.cache.sheet.flush();
+        mountedByContainer.delete(container);
+    }
+}
diff --git a/src/gameThemeEditor/src/themeModel.ts b/src/gameThemeEditor/src/themeModel.ts
new file mode 100644
index 000000000000..967b2818bb60
--- /dev/null
+++ b/src/gameThemeEditor/src/themeModel.ts
@@ -0,0 +1,222 @@
+// The game-theme CSS custom properties the editor exposes, with friendly names and the
+// parent/child hierarchy that drives the outline tree. Ported from the standalone SPA's
+// theme-utils.ts (cssVariables + buildHierarchyTree).
+//
+// We deliberately do NOT port that file's JS cascade-resolution engine
+// (resolveVariableValue / getDerivationMap / defaultValues). In the real host the browser
+// resolves the cascade natively: gamesThemes.less's .apply-game-theme() defines every
+// derived variable as a var() chain rooted at the two "main" colors, so overriding a root
+// on the live page makes all descendants cascade automatically. We read the resolved values
+// back from the live page (getComputedStyle); the hierarchy here is only for drawing the tree.
+
+export type { Theme } from "./host/IGameThemeEditorHost";
+
+export interface ThemeVariableDef {
+    /** the CSS custom property name, e.g. "--game-primary-color". */
+    name: string;
+    /** friendly label shown in the outline. */
+    displayName: string;
+    /** depth in the hierarchy (0 = a root/independent color). */
+    level: number;
+    /** the variable this one derives from, when not a root. */
+    parent?: string;
+}
+
+/** A node in the outline tree: a variable plus its derived children. */
+export interface HierarchyNode extends ThemeVariableDef {
+    children: HierarchyNode[];
+}
+
+// Order and parent relationships mirror gamesThemes.less .apply-game-theme().
+export const themeVariables: ThemeVariableDef[] = [
+    { name: "--game-primary-color", displayName: "Primary", level: 0 },
+    {
+        name: "--game-primary-bg-color",
+        displayName: "Primary Background",
+        level: 1,
+        parent: "--game-primary-color",
+    },
+    {
+        name: "--game-button-correct-bg-color",
+        displayName: "'Correct' Button Background",
+        level: 2,
+        parent: "--game-primary-bg-color",
+    },
+    {
+        name: "--game-selected-checkbox-bg-color",
+        displayName: "Selected Checkbox Background",
+        level: 3,
+        parent: "--game-button-correct-bg-color",
+    },
+    {
+        name: "--game-selected-checkbox-outline-color",
+        displayName: "Selected Checkbox Outline",
+        level: 4,
+        parent: "--game-selected-checkbox-bg-color",
+    },
+    {
+        name: "--game-draggable-bg-color",
+        displayName: "Draggable Background",
+        level: 2,
+        parent: "--game-primary-bg-color",
+    },
+    {
+        name: "--game-draggable-target-outline-color",
+        displayName: "Draggable Target Outline",
+        level: 3,
+        parent: "--game-draggable-bg-color",
+    },
+    {
+        name: "--game-header-bg-color",
+        displayName: "Header Background",
+        level: 2,
+        parent: "--game-primary-bg-color",
+    },
+    {
+        name: "--game-control-button-bg-color",
+        displayName: "Control Button Background",
+        level: 2,
+        parent: "--game-primary-bg-color",
+    },
+    {
+        name: "--game-text-color",
+        displayName: "Text",
+        level: 1,
+        parent: "--game-primary-color",
+    },
+    {
+        name: "--game-page-number-color",
+        displayName: "Page Number",
+        level: 2,
+        parent: "--game-text-color",
+    },
+    {
+        name: "--game-checkbox-text-color",
+        displayName: "Checkbox Text",
+        level: 2,
+        parent: "--game-text-color",
+    },
+    {
+        name: "--game-checkbox-outline-color",
+        displayName: "Checkbox Outline",
+        level: 3,
+        parent: "--game-checkbox-text-color",
+    },
+    {
+        name: "--game-button-text-color",
+        displayName: "Button Text",
+        level: 1,
+        parent: "--game-primary-color",
+    },
+    {
+        name: "--game-button-outline-color",
+        displayName: "Button Outline",
+        level: 2,
+        parent: "--game-button-text-color",
+    },
+    { name: "--game-secondary-color", displayName: "Secondary", level: 0 },
+    {
+        name: "--game-page-bg-color",
+        displayName: "Page Background",
+        level: 1,
+        parent: "--game-secondary-color",
+    },
+    {
+        name: "--page-background-color",
+        displayName: "Appearance System Page Background",
+        level: 2,
+        parent: "--game-page-bg-color",
+    },
+    {
+        name: "--game-button-bg-color",
+        displayName: "Button Background",
+        level: 1,
+        parent: "--game-secondary-color",
+    },
+    {
+        name: "--game-button-correct-color",
+        displayName: "'Correct' Button Text/Icon",
+        level: 1,
+        parent: "--game-secondary-color",
+    },
+    {
+        name: "--game-selected-checkbox-color",
+        displayName: "Selected Checkbox Icon",
+        level: 2,
+        parent: "--game-button-correct-color",
+    },
+    {
+        name: "--game-draggable-color",
+        displayName: "Draggable Text/Icon",
+        level: 1,
+        parent: "--game-secondary-color",
+    },
+    {
+        name: "--game-header-color",
+        displayName: "Header Text",
+        level: 1,
+        parent: "--game-secondary-color",
+    },
+    {
+        name: "--game-control-button-color",
+        displayName: "Control Button Icon",
+        level: 1,
+        parent: "--game-secondary-color",
+    },
+    {
+        name: "--game-button-wrong-color",
+        displayName: "'Incorrect' Button Text/Icon",
+        level: 0,
+    },
+    {
+        name: "--game-button-wrong-bg-color",
+        displayName: "'Incorrect' Button Background",
+        level: 0,
+    },
+];
+
+/** All theme variable names the editor exposes (handy for hosts seeding computed values). */
+export const themeVariableNames = themeVariables.map((v) => v.name);
+
+/** The two root colors that the rest of the theme derives from; always saved. */
+export const rootVariableNames = [
+    "--game-primary-color",
+    "--game-secondary-color",
+];
+
+/** Build the outline tree (roots and their derived children) from the flat variable list. */
+export const buildHierarchyTree = (): HierarchyNode[] => {
+    const nodeMap: Record<string, HierarchyNode> = {};
+    const roots: HierarchyNode[] = [];
+
+    themeVariables.forEach((variable) => {
+        nodeMap[variable.name] = { ...variable, children: [] };
+    });
+
+    themeVariables.forEach((variable) => {
+        if (variable.parent && nodeMap[variable.parent]) {
+            nodeMap[variable.parent].children.push(nodeMap[variable.name]);
+        } else {
+            roots.push(nodeMap[variable.name]);
+        }
+    });
+
+    return roots;
+};
+
+/** Turn a slug like "blue-on-white" into a display name like "Blue On White". */
+export const slugToDisplayName = (slug: string): string =>
+    slug
+        .split("-")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+
+/** Turn a display name into a url-safe slug. */
+export const slugify = (text: string): string =>
+    text
+        .toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^\w-]+/g, "")
+        .replace(/--+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "");
diff --git a/src/gameThemeEditor/tsconfig.json b/src/gameThemeEditor/tsconfig.json
new file mode 100644
index 000000000000..ca262b6178bd
--- /dev/null
+++ b/src/gameThemeEditor/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true
+    },
+    "include": ["src"]
+}