diff --git a/dev/App.tsx b/dev/App.tsx
index 68f7340..dfd77d9 100644
--- a/dev/App.tsx
+++ b/dev/App.tsx
@@ -11,6 +11,7 @@ import {
     validateStateAndSource,
 } from "../src/Activity/activityState";
 import { isReportScoreByItemMessage, isReportStateMessage } from "../src/types";
+import { useResolvedTheme } from "../src/utils/theme";
 import type { ThemeSetting } from "../src/utils/theme";
 
 function App() {
@@ -55,6 +56,35 @@ function App() {
         darkMode,
     } = testSettings;
 
+    // Resolve the selected dark-mode setting so the dev-harness chrome (the
+    // gray header box and its controls) tracks the same theme as the viewer
+    // below it, rather than staying light.
+    const resolvedTheme = useResolvedTheme(darkMode);
+
+    // Keep the whole dev page — the body backdrop and native form controls —
+    // in step with the selection, not just the OS preference that index.css
+    // keys off of. Match the backdrop to the viewer's `--canvas` color so the
+    // area below/around the activities doesn't read as a lighter black.
+    useEffect(() => {
+        const root = document.documentElement;
+        root.style.colorScheme = resolvedTheme;
+        root.style.backgroundColor =
+            resolvedTheme === "dark" ? "#121212" : "#ffffff";
+        return () => {
+            root.style.colorScheme = "";
+            root.style.backgroundColor = "";
+        };
+    }, [resolvedTheme]);
+
+    // Native <button>s take their background from dev/index.css, which keys off
+    // the OS `prefers-color-scheme` and so drifts out of sync with the selected
+    // theme (e.g. a white button background under a dark selection, giving
+    // white-on-white). Pin the dev-chrome buttons to the resolved selection.
+    const devButtonColors = {
+        backgroundColor: resolvedTheme === "dark" ? "#1a1a1a" : "#f9f9f9",
+        color: resolvedTheme === "dark" ? "white" : "black",
+    };
+
     let controls = null;
     let buttonText = "show";
     if (controlsVisible) {
@@ -73,6 +103,7 @@ function App() {
                             setUpdateNumber((was) => was + 1);
                         }}
                         style={{
+                            ...devButtonColors,
                             padding: "2px",
                             marginLeft: "12px",
                             width: "80px",
@@ -237,8 +268,7 @@ function App() {
                             onChange={(e) => {
                                 setTestSettings((was) => ({
                                     ...was,
-                                    darkMode: e.target
-                                        .value as ThemeSetting,
+                                    darkMode: e.target.value as ThemeSetting,
                                 }));
                                 setUpdateNumber((was) => was + 1);
                             }}
@@ -329,8 +359,10 @@ function App() {
         <div style={{ marginBottom: "50vh" }}>
             <div
                 style={{
-                    backgroundColor: "lightGray",
-                    color: "black",
+                    backgroundColor:
+                        resolvedTheme === "dark" ? "#2a2a2a" : "lightGray",
+                    color: resolvedTheme === "dark" ? "white" : "black",
+                    colorScheme: resolvedTheme,
                     width: "800px",
                     padding: "20px",
                 }}
@@ -343,6 +375,7 @@ function App() {
                                 setControlsVisible((was) => !was);
                             }}
                             style={{
+                                ...devButtonColors,
                                 padding: "2px",
                                 marginLeft: "12px",
                                 width: "160px",
diff --git a/dev/testActivity.json b/dev/testActivity.json
index 8923ae4..7554204 100644
--- a/dev/testActivity.json
+++ b/dev/testActivity.json
@@ -16,7 +16,7 @@
                     "type": "singleDoc",
                     "isDescription": false,
                     "doenetML": "<problem>2+2=<answer>4</answer><selectFromSequence /></problem>",
-                    "version": "0.7.4",
+                    "version": "0.7.20-dev.332",
                     "numVariants": 10
                 },
                 {
@@ -25,7 +25,7 @@
                     "type": "singleDoc",
                     "isDescription": false,
                     "doenetML": "<problem>1+1=<answer>2</answer><selectFromSequence length='3' /></problem><problem>4+4=<answer>8</answer><selectFromSequence length='4' /></problem>",
-                    "version": "0.7.4",
+                    "version": "0.7.20-dev.332",
                     "numVariants": 12
                 }
             ]
@@ -41,7 +41,7 @@
                     "type": "singleDoc",
                     "isDescription": false,
                     "doenetML": "<question>Question 1A <graph><point name='P'/></graph><answer><award><when>$P.x > 0</when></award></answer></question>",
-                    "version": "0.7.4",
+                    "version": "0.7.20-dev.332",
                     "numVariants": 1
                 },
                 {
@@ -49,7 +49,7 @@
                     "type": "singleDoc",
                     "isDescription": false,
                     "doenetML": "<question>Question 1B <p>Enter: <select name='a'>a b c</select>. <answer>$a</answer></p></question>",
-                    "version": "0.7.4",
+                    "version": "0.7.20-dev.332",
                     "numVariants": 3
                 },
                 {
@@ -57,7 +57,7 @@
                     "type": "singleDoc",
                     "isDescription": false,
                     "doenetML": "<question>Question 1C <p>Enter: <selectFromSequence name='a' />. <answer>$a</answer></p></question>",
-                    "version": "0.7.4",
+                    "version": "0.7.20-dev.332",
                     "numVariants": 10
                 },
                 {
@@ -65,7 +65,7 @@
                     "type": "singleDoc",
                     "isDescription": false,
                     "doenetML": "<question>Question 1D <p>Enter: <selectFromSequence name='a' length=\"5\" />.  <answer>$a</answer></p></question>",
-                    "version": "0.7.4",
+                    "version": "0.7.20-dev.332",
                     "numVariants": 5
                 }
             ]