From 441ec0a162b0bddafb33b8eeea8c1674b7533fa2 Mon Sep 17 00:00:00 2001
From: alex <alex.xinliu@outlook.com>
Date: Wed, 4 Nov 2026 18:38:43 +0800
Subject: [PATCH 1/3] Let users pick a syntax colour scheme for the editor

The editor had one fixed highlighting palette. Settings now offer six
schemes (Classic, Ocean, Forest, Ember, Monochrome, High contrast), each
with light and dark variants, previewed as small code cards. The choice
is stored per device and applies to every editor pane immediately.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/app/page.test.tsx   |  29 +++
 apps/web/src/app/[locale]/app/page.tsx        |  43 ++++
 .../app/components/MonacoPseudocodeEditor.tsx | 136 +++++------
 .../components/SyntaxColorSchemePicker.tsx    |  95 ++++++++
 apps/web/src/i18n/messages/editor.en.ts       |   5 +-
 apps/web/src/i18n/messages/editor.zh.ts       |   2 +-
 apps/web/src/lib/analytics.ts                 |   1 +
 apps/web/src/lib/syntaxColorSchemes.test.ts   | 104 +++++++++
 apps/web/src/lib/syntaxColorSchemes.ts        | 213 ++++++++++++++++++
 9 files changed, 561 insertions(+), 67 deletions(-)
 create mode 100644 apps/web/src/app/components/SyntaxColorSchemePicker.tsx
 create mode 100644 apps/web/src/lib/syntaxColorSchemes.test.ts
 create mode 100644 apps/web/src/lib/syntaxColorSchemes.ts

diff --git a/apps/web/src/app/[locale]/app/page.test.tsx b/apps/web/src/app/[locale]/app/page.test.tsx
index ba60581..f90653a 100644
--- a/apps/web/src/app/[locale]/app/page.test.tsx
+++ b/apps/web/src/app/[locale]/app/page.test.tsx
@@ -142,14 +142,17 @@ vi.mock("@/app/components/MonacoPseudocodeEditor", async () => {
     MonacoPseudocodeEditor: memo(function MockEditor({
       value,
       onChange,
+      colorScheme,
     }: {
       value: string;
       onChange: (value: string) => void;
+      colorScheme?: string;
     }) {
       editorRenderMock();
       return (
         <textarea
           aria-label="Mock editor"
+          data-color-scheme={colorScheme}
           value={value}
           onChange={(event) => onChange(event.target.value)}
         />
@@ -521,6 +524,32 @@ describe("HomePage workspace flow", () => {
     });
   });
 
+  it("lets the user pick syntax colours from settings and remembers them", async () => {
+    mockLoadedWorkspace(createWorkspaceFixture());
+    const { unmount } = render(<HomePage />);
+    const editor = await screen.findByRole("textbox", { name: "Mock editor" });
+    expect(editor).toHaveAttribute("data-color-scheme", "classic");
+
+    fireEvent.click(screen.getByRole("button", { name: "Open settings" }));
+    const dialog = await screen.findByRole("dialog", { name: "Settings" });
+    const picker = within(dialog).getByRole("radiogroup", { name: "Syntax colours" });
+    expect(within(picker).getAllByRole("radio")).toHaveLength(6);
+    expect(within(picker).getByRole("radio", { name: "Classic" })).toBeChecked();
+
+    fireEvent.click(within(picker).getByRole("radio", { name: "Ocean" }));
+
+    expect(within(picker).getByRole("radio", { name: "Ocean" })).toBeChecked();
+    expect(editor).toHaveAttribute("data-color-scheme", "ocean");
+    expect(localStore.get("pseudoeditor-syntax-color-scheme")).toBe("ocean");
+
+    unmount();
+    render(<HomePage />);
+    expect(await screen.findByRole("textbox", { name: "Mock editor" })).toHaveAttribute(
+      "data-color-scheme",
+      "ocean",
+    );
+  });
+
   it("reorders documents through workspace controls", async () => {
     mockLoadedWorkspace(createWorkspaceFixture());
     render(<HomePage />);
diff --git a/apps/web/src/app/[locale]/app/page.tsx b/apps/web/src/app/[locale]/app/page.tsx
index 1abe24e..4d9fb34 100644
--- a/apps/web/src/app/[locale]/app/page.tsx
+++ b/apps/web/src/app/[locale]/app/page.tsx
@@ -51,6 +51,7 @@ import { Dialog } from "@/app/components/Dialog";
 import { EditorLoader } from "@/app/components/EditorLoader";
 import { PracticeQuestionBanner } from "@/app/components/PracticeQuestionBanner";
 import { SettingsSelect } from "@/app/components/SettingsSelect";
+import { SyntaxColorSchemePicker } from "@/app/components/SyntaxColorSchemePicker";
 import { WorkspaceSidebar } from "@/app/components/WorkspaceSidebar";
 import { usePracticeQuestion } from "@/app/hooks/usePracticeQuestion";
 import { useWorkspaceSession } from "@/app/hooks/useWorkspaceSession";
@@ -81,6 +82,11 @@ import {
   type ThemeMode,
 } from "@/lib/theme";
 import { SYNTAX_OPTIONS, resolveSyntax } from "@/lib/pseudocodeLanguages";
+import {
+  loadSyntaxColorScheme,
+  saveSyntaxColorScheme,
+  type SyntaxColorSchemeId,
+} from "@/lib/syntaxColorSchemes";
 import type { WorkspaceSyntaxId } from "@pseudoeditor/workspace";
 
 /* ── constants ── */
@@ -373,6 +379,9 @@ export default function HomePage() {
   const [showFlowchartPrompt, setShowFlowchartPrompt] = useState(false);
   const [flowchartFileName, setFlowchartFileName] = useState("");
   const [themeMode, setThemeMode] = useState<ThemeMode>(() => loadThemeMode());
+  const [syntaxColorScheme, setSyntaxColorScheme] = useState<SyntaxColorSchemeId>(() =>
+    loadSyntaxColorScheme(),
+  );
   const [manualSaveStatus, setManualSaveStatus] = useState<ManualSaveStatus>("idle");
   const manualSaveStatusTimerRef = useRef<number | null>(null);
 
@@ -805,6 +814,12 @@ export default function HomePage() {
     setThemeMode(mode);
   }, []);
 
+  const handleSyntaxColorSchemeChange = useCallback((scheme: SyntaxColorSchemeId) => {
+    track("syntax_colors_changed", { scheme });
+    setSyntaxColorScheme(scheme);
+    saveSyntaxColorScheme(scheme);
+  }, []);
+
   const handleAutoSaveIntervalChange = useCallback((value: number) => {
     const nextValue = clampAutoSaveIntervalMinutes(value);
     setAutoSaveIntervalMinutes(nextValue);
@@ -985,6 +1000,28 @@ export default function HomePage() {
     </div>
   );
 
+  const renderSyntaxColorSettings = (compact = false) => (
+    <div className={compact ? "mt-6 space-y-4" : "space-y-4"}>
+      <div>
+        <p className="text-[11px] font-semibold tracking-[0.18em] text-[var(--text3)]">
+          {t.settings.appearance}
+        </p>
+        <h3 className="mt-2 text-[22px] font-semibold text-[var(--text)]">{t.settings.syntaxColors}</h3>
+        <p className="mt-2 max-w-md text-sm leading-6 text-[var(--text2)]">
+          {t.settings.syntaxColorsDescription}
+        </p>
+      </div>
+
+      <SyntaxColorSchemePicker
+        value={syntaxColorScheme}
+        theme={resolvedTheme}
+        label={t.settings.syntaxColors}
+        names={t.settings.syntaxColorSchemes}
+        onChange={handleSyntaxColorSchemeChange}
+      />
+    </div>
+  );
+
   const renderSaveSettings = (compact = false) => (
     <div className={compact ? "mt-6 space-y-4" : "space-y-4"}>
       <div>
@@ -1081,6 +1118,7 @@ export default function HomePage() {
                 <div className="p-2">
                   {renderSyntaxSettings()}
                   {renderThemeSettings()}
+                  {renderSyntaxColorSettings()}
                 </div>
               </UserButton.UserProfilePage>
               <UserButton.UserProfilePage
@@ -1476,6 +1514,7 @@ export default function HomePage() {
         <div className="mt-5 space-y-6">
           {renderSyntaxSettings()}
           {renderThemeSettings()}
+          {renderSyntaxColorSettings()}
           {renderSaveSettings()}
         </div>
         <div className="mt-6 border-t border-[var(--separator)] pt-4 text-center">
@@ -1882,6 +1921,7 @@ export default function HomePage() {
                         }
                         theme={resolvedTheme}
                         syntaxId={syntaxId}
+                        colorScheme={syntaxColorScheme}
                       />
                     ) : (
                       renderStarterPanel(true)
@@ -1984,6 +2024,7 @@ export default function HomePage() {
                         }
                         theme={resolvedTheme}
                         syntaxId={syntaxId}
+                        colorScheme={syntaxColorScheme}
                       />
                     ) : (
                       renderStarterPanel(true)
@@ -2019,6 +2060,7 @@ export default function HomePage() {
                       </p>
                       {renderSyntaxSettings(true)}
                       {renderThemeSettings(true)}
+                      {renderSyntaxColorSettings(true)}
                       {renderSaveSettings(true)}
                       <button
                         type="button"
@@ -2339,6 +2381,7 @@ export default function HomePage() {
                     }
                     theme={resolvedTheme}
                     syntaxId={syntaxId}
+                    colorScheme={syntaxColorScheme}
                   />
                 ) : (
                   renderStarterPanel()
diff --git a/apps/web/src/app/components/MonacoPseudocodeEditor.tsx b/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
index 9ba828a..d9793de 100644
--- a/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
+++ b/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
@@ -18,6 +18,12 @@ import {
   syntaxKeywords,
   type SyntaxId,
 } from "@/lib/pseudocodeLanguages";
+import {
+  DEFAULT_SYNTAX_COLOR_SCHEME,
+  SYNTAX_COLOR_SCHEMES,
+  monacoThemeName,
+  type SyntaxColorSchemeId,
+} from "@/lib/syntaxColorSchemes";
 import type { ResolvedTheme } from "@/lib/theme";
 import { useDictionary } from "@/i18n/context";
 import { editorEn } from "@/i18n/messages/editor.en";
@@ -29,6 +35,7 @@ interface MonacoPseudocodeEditorProps {
   theme: ResolvedTheme;
   documentKey?: string;
   syntaxId?: SyntaxId | string;
+  colorScheme?: SyntaxColorSchemeId;
 }
 
 const TYPE_KEYWORDS = [
@@ -149,6 +156,65 @@ if (typeof window !== "undefined") {
   void ensureMonacoNullCaretHitTestGuard();
 }
 
+const EDITOR_SURFACE_COLORS = {
+  dark: {
+    "editor.background": "#1C1C1E",
+    "editor.foreground": "#E5E5EA",
+    "editorLineNumber.foreground": "#48484A",
+    "editorLineNumber.activeForeground": "#98989D",
+    "editor.lineHighlightBackground": "#2C2C2E",
+    "editorCursor.foreground": "#E5E5EA",
+    "editor.selectionBackground": "#0A84FF30",
+    "editor.inactiveSelectionBackground": "#38383A",
+    "editorIndentGuide.background1": "#38383A",
+    "editorIndentGuide.activeBackground1": "#48484A",
+    "editorWidget.background": "#2C2C2E",
+    "editorSuggestWidget.background": "#2C2C2E",
+    "editorSuggestWidget.selectedBackground": "#0A84FF30",
+  },
+  light: {
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#111111",
+    "editorLineNumber.foreground": "#CFCFCF",
+    "editorLineNumber.activeForeground": "#6B7280",
+    "editor.lineHighlightBackground": "#F5F5F5",
+    "editorCursor.foreground": "#111111",
+    "editor.selectionBackground": "#0B6E4F2A",
+    "editor.inactiveSelectionBackground": "#E5E5E5",
+    "editorIndentGuide.background1": "#E5E5E5",
+    "editorIndentGuide.activeBackground1": "#D1D5DB",
+    "editorWidget.background": "#FFFFFF",
+    "editorSuggestWidget.background": "#FFFFFF",
+    "editorSuggestWidget.selectedBackground": "#0B6E4F1F",
+  },
+} as const;
+
+// Defines a light and a dark Monaco theme for every syntax colour scheme.
+function defineSyntaxThemes(monaco: typeof import("monaco-editor")) {
+  const hex = (color: string) => color.replace("#", "");
+  for (const scheme of SYNTAX_COLOR_SCHEMES) {
+    for (const mode of ["dark", "light"] as const) {
+      const colors = scheme[mode];
+      monaco.editor.defineTheme(monacoThemeName(scheme.id, mode), {
+        base: mode === "dark" ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [
+          { token: "keyword", foreground: hex(colors.keyword), fontStyle: scheme.boldKeywords ? "bold" : "" },
+          { token: "type", foreground: hex(colors.type) },
+          { token: "predefined", foreground: hex(colors.routine) },
+          { token: "string", foreground: hex(colors.string) },
+          { token: "comment", foreground: hex(colors.comment), fontStyle: "italic" },
+          { token: "number", foreground: hex(colors.number) },
+          { token: "operator", foreground: hex(colors.operator) },
+          { token: "identifier", foreground: hex(colors.identifier) },
+          { token: "delimiter", foreground: hex(colors.operator) },
+        ],
+        colors: EDITOR_SURFACE_COLORS[mode],
+      });
+    }
+  }
+}
+
 export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
   value,
   onChange,
@@ -156,6 +222,7 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
   theme,
   documentKey,
   syntaxId = "cambridge-igcse",
+  colorScheme = DEFAULT_SYNTAX_COLOR_SCHEME,
 }: MonacoPseudocodeEditorProps) {
   const autocomplete = useDictionary().editor.autocomplete;
   useEffect(() => {
@@ -509,69 +576,8 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
       isProgrammaticEdit = false;
     });
 
-    monaco.editor.defineTheme("examLabThemeDark", {
-      base: "vs-dark",
-      inherit: true,
-      rules: [
-        { token: "keyword", foreground: "FC5FA3" },
-        { token: "type", foreground: "5DD8FF" },
-        { token: "predefined", foreground: "A167E6" },
-        { token: "string", foreground: "FC6A5D" },
-        { token: "comment", foreground: "6C7986", fontStyle: "italic" },
-        { token: "number", foreground: "D0BF69" },
-        { token: "operator", foreground: "E5E5EA" },
-        { token: "identifier", foreground: "67B7A4" },
-        { token: "delimiter", foreground: "E5E5EA" },
-      ],
-      colors: {
-        "editor.background": "#1C1C1E",
-        "editor.foreground": "#E5E5EA",
-        "editorLineNumber.foreground": "#48484A",
-        "editorLineNumber.activeForeground": "#98989D",
-        "editor.lineHighlightBackground": "#2C2C2E",
-        "editorCursor.foreground": "#E5E5EA",
-        "editor.selectionBackground": "#0A84FF30",
-        "editor.inactiveSelectionBackground": "#38383A",
-        "editorIndentGuide.background1": "#38383A",
-        "editorIndentGuide.activeBackground1": "#48484A",
-        "editorWidget.background": "#2C2C2E",
-        "editorSuggestWidget.background": "#2C2C2E",
-        "editorSuggestWidget.selectedBackground": "#0A84FF30",
-      },
-    });
-
-    monaco.editor.defineTheme("examLabThemeLight", {
-      base: "vs",
-      inherit: true,
-      rules: [
-        { token: "keyword", foreground: "9B2D63" },
-        { token: "type", foreground: "0F7A94" },
-        { token: "predefined", foreground: "7856B3" },
-        { token: "string", foreground: "B45438" },
-        { token: "comment", foreground: "8C7B6A", fontStyle: "italic" },
-        { token: "number", foreground: "8D6A12" },
-        { token: "operator", foreground: "2A241F" },
-        { token: "identifier", foreground: "2D7A6D" },
-        { token: "delimiter", foreground: "2A241F" },
-      ],
-      colors: {
-        "editor.background": "#FFFFFF",
-        "editor.foreground": "#111111",
-        "editorLineNumber.foreground": "#CFCFCF",
-        "editorLineNumber.activeForeground": "#6B7280",
-        "editor.lineHighlightBackground": "#F5F5F5",
-        "editorCursor.foreground": "#111111",
-        "editor.selectionBackground": "#0B6E4F2A",
-        "editor.inactiveSelectionBackground": "#E5E5E5",
-        "editorIndentGuide.background1": "#E5E5E5",
-        "editorIndentGuide.activeBackground1": "#D1D5DB",
-        "editorWidget.background": "#FFFFFF",
-        "editorSuggestWidget.background": "#FFFFFF",
-        "editorSuggestWidget.selectedBackground": "#0B6E4F1F",
-      },
-    });
-
-    monaco.editor.setTheme(theme === "dark" ? "examLabThemeDark" : "examLabThemeLight");
+    defineSyntaxThemes(monaco);
+    monaco.editor.setTheme(monacoThemeName(colorScheme, theme));
 
     if (appleTouchDevice) {
       const editorElement = editor.getDomNode();
@@ -621,8 +627,8 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
       return;
     }
 
-    monacoRef.current.editor.setTheme(theme === "dark" ? "examLabThemeDark" : "examLabThemeLight");
-  }, [theme]);
+    monacoRef.current.editor.setTheme(monacoThemeName(colorScheme, theme));
+  }, [colorScheme, theme]);
 
   useEffect(() => {
     keywordLookupRef.current = keywordLookup;
diff --git a/apps/web/src/app/components/SyntaxColorSchemePicker.tsx b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
new file mode 100644
index 0000000..df5ebfb
--- /dev/null
+++ b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
@@ -0,0 +1,95 @@
+import {
+  SYNTAX_COLOR_SCHEMES,
+  type SyntaxColorScheme,
+  type SyntaxColorSchemeId,
+  type SyntaxTokenColors,
+} from "@/lib/syntaxColorSchemes";
+import type { ResolvedTheme } from "@/lib/theme";
+
+type TokenKind = keyof SyntaxTokenColors;
+
+// The same token kinds the editor's highlighter gives this code, so the preview matches the editor.
+const PREVIEW_LINES: Array<Array<[string, TokenKind | null]>> = [
+  [["// Count to 3", "comment"]],
+  [
+    ["FOR", "keyword"], [" ", null], ["i", "identifier"], [" ", null], ["←", "operator"], [" ", null],
+    ["1", "number"], [" ", null], ["TO", "keyword"], [" ", null], ["3", "number"],
+  ],
+  [["  ", null], ["OUTPUT", "keyword"], [" ", null], ['"Hi "', "string"], [",", "operator"], [" ", null], ["i", "identifier"]],
+];
+
+function SchemePreview({ scheme, theme }: { scheme: SyntaxColorScheme; theme: ResolvedTheme }) {
+  const colors = scheme[theme];
+  return (
+    <pre
+      aria-hidden="true"
+      className="m-0 overflow-hidden rounded-md bg-[var(--bg)] px-2.5 py-2 font-mono text-[11.5px] leading-[1.6] text-[var(--code-text)]"
+    >
+      {PREVIEW_LINES.map((line, lineIndex) => (
+        <span key={lineIndex} className="block whitespace-pre">
+          {line.map(([text, kind], tokenIndex) => (
+            <span
+              key={tokenIndex}
+              style={
+                kind
+                  ? {
+                      color: colors[kind],
+                      fontStyle: kind === "comment" ? "italic" : undefined,
+                      fontWeight: kind === "keyword" && scheme.boldKeywords ? 700 : undefined,
+                    }
+                  : undefined
+              }
+            >
+              {text}
+            </span>
+          ))}
+        </span>
+      ))}
+    </pre>
+  );
+}
+
+type SyntaxColorSchemePickerProps = {
+  value: SyntaxColorSchemeId;
+  theme: ResolvedTheme;
+  label: string;
+  names: Record<SyntaxColorSchemeId, string>;
+  onChange: (id: SyntaxColorSchemeId) => void;
+};
+
+export function SyntaxColorSchemePicker({ value, theme, label, names, onChange }: SyntaxColorSchemePickerProps) {
+  return (
+    <div role="radiogroup" aria-label={label} className="grid grid-cols-2 gap-2">
+      {SYNTAX_COLOR_SCHEMES.map((scheme) => {
+        const selected = scheme.id === value;
+        return (
+          <label
+            key={scheme.id}
+            className={`group cursor-pointer rounded-xl border p-1.5 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[color-mix(in_srgb,var(--accent)_30%,transparent)] ${
+              selected
+                ? "border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_8%,var(--surface2))]"
+                : "border-[var(--separator)] bg-[var(--surface2)] hover:border-[color-mix(in_srgb,var(--text3)_45%,var(--separator))]"
+            }`}
+          >
+            <input
+              type="radio"
+              name="syntax-color-scheme"
+              value={scheme.id}
+              checked={selected}
+              onChange={() => onChange(scheme.id)}
+              className="sr-only"
+            />
+            <SchemePreview scheme={scheme} theme={theme} />
+            <span
+              className={`mt-1.5 block truncate px-1 pb-0.5 text-xs font-semibold ${
+                selected ? "text-[var(--text)]" : "text-[var(--text2)] group-hover:text-[var(--text)]"
+              }`}
+            >
+              {names[scheme.id]}
+            </span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/src/i18n/messages/editor.en.ts b/apps/web/src/i18n/messages/editor.en.ts
index 4491d82..e6b8412 100644
--- a/apps/web/src/i18n/messages/editor.en.ts
+++ b/apps/web/src/i18n/messages/editor.en.ts
@@ -17,7 +17,10 @@ export const editorEn = {
     system: "System", systemDescription: "Follow the operating system appearance automatically.",
     dark: "Dark", darkDescription: "Use the current graphite shell and dark editor palette.",
     light: "Light", lightDescription: "Switch to the warm paper light theme across the app.",
-    activeAppearance: "Active appearance:", saving: "SAVING", autosave: "Autosave", autosaveInterval: "Autosave interval",
+    activeAppearance: "Active appearance:",
+    syntaxColors: "Syntax colours", syntaxColorsDescription: "Pick the colours the editor uses for keywords, strings, numbers, and comments.",
+    syntaxColorSchemes: { classic: "Classic", ocean: "Ocean", forest: "Forest", ember: "Ember", monochrome: "Monochrome", "high-contrast": "High contrast" },
+    saving: "SAVING", autosave: "Autosave", autosaveInterval: "Autosave interval",
     autosaveIntervalMinutes: "Autosave interval minutes", minute: (count: number) => `${count} minute${count !== 1 ? "s" : ""}`,
     autosaveEvery: (count: number) => `Automatically save your workspace every ${count} minute${count !== 1 ? "s" : ""}.`,
     general: "General", heading: "SETTINGS", touchDescription: "Open the docs, review the language guide, and keep the workspace controls one tap away.",
diff --git a/apps/web/src/i18n/messages/editor.zh.ts b/apps/web/src/i18n/messages/editor.zh.ts
index 98ff9dc..0ab91ce 100644
--- a/apps/web/src/i18n/messages/editor.zh.ts
+++ b/apps/web/src/i18n/messages/editor.zh.ts
@@ -4,7 +4,7 @@ export const editorZh: typeof editorEn = {
   common: { cancel: "取消", close: "关闭", delete: "删除", dismiss: "忽略" },
   toolbar: { editor: "编辑器", run: "运行", running: "运行中", docs: "文档", openDocs: "打开文档", practice: "练习", openPractice: "练习一道随机题", settings: "设置", openSettings: "打开设置", hideSidebar: "隐藏侧边栏", showSidebar: "显示侧边栏", openFiles: "打开文件", backToEditor: "返回编辑器", switchToCode: "切换到代码视图", switchToFlowchart: "切换到流程图视图", home: "PseudoEditor 首页" },
   loading: { editor: "正在加载编辑器", flowchart: "正在加载流程图", workspace: "正在加载工作区…", workspaceEyebrow: "工作区", preparing: "正在准备编辑器布局和运行面板。" },
-  settings: { examBoard: "考试局", syntax: "语法", examSyntax: "考试语法", syntaxDescription: "选择编译器、语法高亮和自动补全所遵循的伪代码写法。", appearance: "外观", theme: "主题", themeDescription: "选择编译器界面在此设备上的外观。", system: "跟随系统", systemDescription: "自动跟随操作系统外观。", dark: "深色", darkDescription: "使用石墨色界面和深色编辑器。", light: "浅色", lightDescription: "在整个应用中使用暖纸色浅色主题。", activeAppearance: "当前外观：", saving: "保存", autosave: "自动保存", autosaveInterval: "自动保存间隔", autosaveIntervalMinutes: "自动保存间隔（分钟）", minute: (count) => `${count} 分钟`, autosaveEvery: (count) => `每 ${count} 分钟自动保存工作区。`, general: "通用", heading: "设置", touchDescription: "打开文档、查看语言指南，并快速使用工作区控制项。" },
+  settings: { examBoard: "考试局", syntax: "语法", examSyntax: "考试语法", syntaxDescription: "选择编译器、语法高亮和自动补全所遵循的伪代码写法。", appearance: "外观", theme: "主题", themeDescription: "选择编译器界面在此设备上的外观。", system: "跟随系统", systemDescription: "自动跟随操作系统外观。", dark: "深色", darkDescription: "使用石墨色界面和深色编辑器。", light: "浅色", lightDescription: "在整个应用中使用暖纸色浅色主题。", activeAppearance: "当前外观：", syntaxColors: "语法配色", syntaxColorsDescription: "选择编辑器中关键字、字符串、数字和注释的颜色。", syntaxColorSchemes: { classic: "经典", ocean: "海洋", forest: "森林", ember: "余烬", monochrome: "黑白", "high-contrast": "高对比度" }, saving: "保存", autosave: "自动保存", autosaveInterval: "自动保存间隔", autosaveIntervalMinutes: "自动保存间隔（分钟）", minute: (count) => `${count} 分钟`, autosaveEvery: (count) => `每 ${count} 分钟自动保存工作区。`, general: "通用", heading: "设置", touchDescription: "打开文档、查看语言指南，并快速使用工作区控制项。" },
   files: { explorer: "文件浏览器", file: "文件", folder: "文件夹", createFile: "新建文件", createFolder: "新建文件夹", newFileHere: "在此新建文件", newFolderHere: "在此新建文件夹", moveUp: "上移", moveDown: "下移", moveTopLevel: "移至顶层", rename: "重命名", explorerActions: "文件浏览器操作", itemsSelected: (count) => `已选择 ${count} 个项目`, folderActions: "文件夹操作", fileActions: "文件操作", batchActions: "批量操作", collapseFolder: "折叠文件夹", expandFolder: "展开文件夹", deleteItems: (count) => `删除 ${count} 个项目`, noFileSelected: "未选择文件", createAFile: "新建文件", fileName: "文件名", itemName: "名称", createNewFile: "新建文件", createAndOpen: "创建并打开", renameItem: "重命名", currentName: "当前名称：", saveName: "保存名称", confirmDelete: "确认删除", deleteOne: (name) => `删除“${name}”？`, deleteMany: (count) => `删除选中的 ${count} 个项目？`, closeDocument: (name) => `关闭 ${name}` },
   terminal: { output: "输出", terminal: "终端", ready: "就绪", clearOutput: "清空输出", close: (title) => `关闭${title}`, closeTerminal: "关闭终端", input: "终端输入", inputPlaceholder: "在此输入并按 Enter", send: "发送", running: "运行中…", resizeOutput: "调整输出区域大小", resizeTerminal: "调整终端大小", resizeSidebar: "调整侧边栏大小" },
   diagnostics: { hint: "提示：" },
diff --git a/apps/web/src/lib/analytics.ts b/apps/web/src/lib/analytics.ts
index 3a43c15..536802f 100644
--- a/apps/web/src/lib/analytics.ts
+++ b/apps/web/src/lib/analytics.ts
@@ -13,6 +13,7 @@ export type AnalyticsEvents = {
   };
   flowchart_opened: Record<string, never>;
   syntax_changed: { syntax: string };
+  syntax_colors_changed: { scheme: string };
   practice_question_opened: { question: string; source: "link" | "random" };
 };
 
diff --git a/apps/web/src/lib/syntaxColorSchemes.test.ts b/apps/web/src/lib/syntaxColorSchemes.test.ts
new file mode 100644
index 0000000..38208aa
--- /dev/null
+++ b/apps/web/src/lib/syntaxColorSchemes.test.ts
@@ -0,0 +1,104 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  DEFAULT_SYNTAX_COLOR_SCHEME,
+  SYNTAX_COLOR_SCHEMES,
+  isSyntaxColorSchemeId,
+  loadSyntaxColorScheme,
+  monacoThemeName,
+  resolveSyntaxColorScheme,
+  saveSyntaxColorScheme,
+} from "@/lib/syntaxColorSchemes";
+
+// The editor surfaces each scheme is drawn on: the background and the current-line highlight.
+const EDITOR_SURFACES = {
+  dark: ["#1C1C1E", "#2C2C2E"],
+  light: ["#FFFFFF", "#F5F5F5"],
+} as const;
+
+function luminance(hex: string): number {
+  const channels = [1, 3, 5].map((index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255);
+  const [r, g, b] = channels.map((value) =>
+    value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4,
+  );
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrast(foreground: string, background: string): number {
+  const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+const localStore = new Map<string, string>();
+
+describe("syntax colour schemes", () => {
+  beforeEach(() => {
+    localStore.clear();
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      value: {
+        getItem: (key: string) => localStore.get(key) ?? null,
+        setItem: (key: string, value: string) => {
+          localStore.set(key, value);
+        },
+        removeItem: (key: string) => {
+          localStore.delete(key);
+        },
+      },
+    });
+  });
+
+  it("offers several schemes with unique ids", () => {
+    const ids = SYNTAX_COLOR_SCHEMES.map((scheme) => scheme.id);
+    expect(ids.length).toBeGreaterThan(1);
+    expect(new Set(ids).size).toBe(ids.length);
+    expect(ids[0]).toBe(DEFAULT_SYNTAX_COLOR_SCHEME);
+  });
+
+  // Classic is the palette the editor shipped with, so it is kept as is.
+  it.each(SYNTAX_COLOR_SCHEMES.filter((scheme) => scheme.id !== "classic"))(
+    "keeps $id readable on the editor surfaces",
+    (scheme) => {
+      for (const mode of ["dark", "light"] as const) {
+        for (const [token, color] of Object.entries(scheme[mode])) {
+          const minimum = token === "comment" ? 3 : 4.5;
+          for (const surface of EDITOR_SURFACES[mode]) {
+            expect(
+              contrast(color, surface),
+              `${scheme.id} ${mode} ${token} ${color} on ${surface}`,
+            ).toBeGreaterThanOrEqual(minimum);
+          }
+        }
+      }
+    },
+  );
+
+  it("falls back to the default for unknown ids", () => {
+    expect(isSyntaxColorSchemeId("ocean")).toBe(true);
+    expect(isSyntaxColorSchemeId("neon")).toBe(false);
+    expect(resolveSyntaxColorScheme("neon").id).toBe(DEFAULT_SYNTAX_COLOR_SCHEME);
+  });
+
+  it("names a Monaco theme per scheme and appearance", () => {
+    expect(monacoThemeName("ocean", "dark")).toBe("pseudo-ocean-dark");
+    expect(monacoThemeName("ocean", "light")).toBe("pseudo-ocean-light");
+  });
+
+  it("remembers the chosen scheme and ignores stored junk", () => {
+    expect(loadSyntaxColorScheme()).toBe(DEFAULT_SYNTAX_COLOR_SCHEME);
+    saveSyntaxColorScheme("forest");
+    expect(loadSyntaxColorScheme()).toBe("forest");
+    localStore.set("pseudoeditor-syntax-color-scheme", "neon");
+    expect(loadSyntaxColorScheme()).toBe(DEFAULT_SYNTAX_COLOR_SCHEME);
+  });
+
+  it("still loads when storage is blocked", () => {
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      get() {
+        throw new Error("blocked");
+      },
+    });
+    expect(loadSyntaxColorScheme()).toBe(DEFAULT_SYNTAX_COLOR_SCHEME);
+    expect(() => saveSyntaxColorScheme("ocean")).not.toThrow();
+  });
+});
diff --git a/apps/web/src/lib/syntaxColorSchemes.ts b/apps/web/src/lib/syntaxColorSchemes.ts
new file mode 100644
index 0000000..3d4e991
--- /dev/null
+++ b/apps/web/src/lib/syntaxColorSchemes.ts
@@ -0,0 +1,213 @@
+import type { ResolvedTheme } from "@/lib/theme";
+
+export type SyntaxColorSchemeId =
+  | "classic"
+  | "ocean"
+  | "forest"
+  | "ember"
+  | "monochrome"
+  | "high-contrast";
+
+export type SyntaxTokenColors = {
+  keyword: string;
+  type: string;
+  routine: string;
+  string: string;
+  number: string;
+  operator: string;
+  comment: string;
+  identifier: string;
+};
+
+export type SyntaxColorScheme = {
+  id: SyntaxColorSchemeId;
+  dark: SyntaxTokenColors;
+  light: SyntaxTokenColors;
+  // Monochrome leans on weight instead of hue to tell keywords apart.
+  boldKeywords?: boolean;
+};
+
+export const DEFAULT_SYNTAX_COLOR_SCHEME: SyntaxColorSchemeId = "classic";
+
+// Token colours only. The editor background, gutter and selection stay with the app theme,
+// so every scheme sits on the same surface as the rest of the workspace.
+export const SYNTAX_COLOR_SCHEMES: readonly SyntaxColorScheme[] = [
+  {
+    id: "classic",
+    dark: {
+      keyword: "#FC5FA3",
+      type: "#5DD8FF",
+      routine: "#A167E6",
+      string: "#FC6A5D",
+      number: "#D0BF69",
+      operator: "#E5E5EA",
+      comment: "#6C7986",
+      identifier: "#67B7A4",
+    },
+    light: {
+      keyword: "#9B2D63",
+      type: "#0F7A94",
+      routine: "#7856B3",
+      string: "#B45438",
+      number: "#8D6A12",
+      operator: "#2A241F",
+      comment: "#8C7B6A",
+      identifier: "#2D7A6D",
+    },
+  },
+  {
+    id: "ocean",
+    dark: {
+      keyword: "#6CB6FF",
+      type: "#39C5CF",
+      routine: "#B392F0",
+      string: "#7EE0B5",
+      number: "#F2C46D",
+      operator: "#C9D1D9",
+      comment: "#7D8B99",
+      identifier: "#E6EDF3",
+    },
+    light: {
+      keyword: "#0550AE",
+      type: "#0A6F80",
+      routine: "#6639BA",
+      string: "#116329",
+      number: "#953800",
+      operator: "#24292F",
+      comment: "#6E7781",
+      identifier: "#1F2328",
+    },
+  },
+  {
+    id: "forest",
+    dark: {
+      keyword: "#86D96B",
+      type: "#5CCFE6",
+      routine: "#D2A6FF",
+      string: "#E6C07B",
+      number: "#F29E74",
+      operator: "#D8DEE4",
+      comment: "#808C79",
+      identifier: "#B8E0C0",
+    },
+    light: {
+      keyword: "#2E6B30",
+      type: "#00677F",
+      routine: "#7B3FA8",
+      string: "#855000",
+      number: "#AE3A12",
+      operator: "#1F2A1F",
+      comment: "#6B7768",
+      identifier: "#2F4F3A",
+    },
+  },
+  {
+    id: "ember",
+    dark: {
+      keyword: "#FF9E64",
+      type: "#FFC777",
+      routine: "#FF757F",
+      string: "#C3E88D",
+      number: "#FCA7EA",
+      operator: "#E5E5EA",
+      comment: "#8C8074",
+      identifier: "#F2E4D4",
+    },
+    light: {
+      keyword: "#B03E0A",
+      type: "#855700",
+      routine: "#B3263A",
+      string: "#3F7212",
+      number: "#A3237E",
+      operator: "#2A241F",
+      comment: "#857565",
+      identifier: "#3B2F26",
+    },
+  },
+  {
+    id: "monochrome",
+    boldKeywords: true,
+    dark: {
+      keyword: "#FFFFFF",
+      type: "#E5E5EA",
+      routine: "#D1D1D6",
+      string: "#BDBDC2",
+      number: "#E5E5EA",
+      operator: "#AEAEB2",
+      comment: "#7C7C82",
+      identifier: "#E5E5EA",
+    },
+    light: {
+      keyword: "#000000",
+      type: "#1C1C1E",
+      routine: "#3A3A3C",
+      string: "#545458",
+      number: "#1C1C1E",
+      operator: "#636366",
+      comment: "#85858A",
+      identifier: "#1C1C1E",
+    },
+  },
+  {
+    id: "high-contrast",
+    dark: {
+      keyword: "#FF7AC6",
+      type: "#6BE4FF",
+      routine: "#C9A2FF",
+      string: "#FFB86B",
+      number: "#FFE66D",
+      operator: "#FFFFFF",
+      comment: "#A8B3BD",
+      identifier: "#8DF0C6",
+    },
+    light: {
+      keyword: "#A1005B",
+      type: "#005A8C",
+      routine: "#5B2BB5",
+      string: "#9E3600",
+      number: "#6B5300",
+      operator: "#000000",
+      comment: "#4F5B66",
+      identifier: "#006B4E",
+    },
+  },
+];
+
+const STORAGE_KEY = "pseudoeditor-syntax-color-scheme";
+
+export function isSyntaxColorSchemeId(value: unknown): value is SyntaxColorSchemeId {
+  return SYNTAX_COLOR_SCHEMES.some((scheme) => scheme.id === value);
+}
+
+export function resolveSyntaxColorScheme(id: string): SyntaxColorScheme {
+  return SYNTAX_COLOR_SCHEMES.find((scheme) => scheme.id === id) ?? SYNTAX_COLOR_SCHEMES[0];
+}
+
+export function monacoThemeName(id: SyntaxColorSchemeId, theme: ResolvedTheme): string {
+  return `pseudo-${id}-${theme}`;
+}
+
+export function loadSyntaxColorScheme(): SyntaxColorSchemeId {
+  if (typeof window === "undefined") {
+    return DEFAULT_SYNTAX_COLOR_SCHEME;
+  }
+
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return isSyntaxColorSchemeId(stored) ? stored : DEFAULT_SYNTAX_COLOR_SCHEME;
+  } catch {
+    return DEFAULT_SYNTAX_COLOR_SCHEME;
+  }
+}
+
+export function saveSyntaxColorScheme(id: SyntaxColorSchemeId): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, id);
+  } catch {
+    // Storage can be blocked (private mode, quota); the choice still applies for this session.
+  }
+}

From 3ce8ed07b3e6a083ff056b3b1cd564089b67bf1a Mon Sep 17 00:00:00 2001
From: alex <alex.xinliu@outlook.com>
Date: Wed, 4 Nov 2026 18:42:17 +0800
Subject: [PATCH 2/3] Let the phone Settings tab scroll to every colour scheme

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/app/page.tsx                  | 2 +-
 apps/web/src/app/components/SyntaxColorSchemePicker.tsx | 2 +-
 apps/web/src/lib/syntaxColorSchemes.test.ts             | 4 +---
 apps/web/src/lib/syntaxColorSchemes.ts                  | 4 ----
 4 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/[locale]/app/page.tsx b/apps/web/src/app/[locale]/app/page.tsx
index 4d9fb34..5b4b80d 100644
--- a/apps/web/src/app/[locale]/app/page.tsx
+++ b/apps/web/src/app/[locale]/app/page.tsx
@@ -2048,7 +2048,7 @@ export default function HomePage() {
                   {touchTab === "output" ? renderTouchOutputSurface(t.terminal.output) : null}
 
                   {touchTab === "settings" ? (
-                    <div className="flex h-full min-h-0 flex-col bg-[var(--bg)] px-6 py-8">
+                    <div className="flex h-full min-h-0 flex-col overflow-y-auto bg-[var(--bg)] px-6 py-8">
                       <p className="text-[11px] font-semibold tracking-[0.18em] text-[var(--text3)]">
                         {t.settings.heading}
                       </p>
diff --git a/apps/web/src/app/components/SyntaxColorSchemePicker.tsx b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
index df5ebfb..463eee6 100644
--- a/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
+++ b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
@@ -65,7 +65,7 @@ export function SyntaxColorSchemePicker({ value, theme, label, names, onChange }
         return (
           <label
             key={scheme.id}
-            className={`group cursor-pointer rounded-xl border p-1.5 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[color-mix(in_srgb,var(--accent)_30%,transparent)] ${
+            className={`group relative cursor-pointer rounded-xl border p-1.5 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[color-mix(in_srgb,var(--accent)_30%,transparent)] ${
               selected
                 ? "border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_8%,var(--surface2))]"
                 : "border-[var(--separator)] bg-[var(--surface2)] hover:border-[color-mix(in_srgb,var(--text3)_45%,var(--separator))]"
diff --git a/apps/web/src/lib/syntaxColorSchemes.test.ts b/apps/web/src/lib/syntaxColorSchemes.test.ts
index 38208aa..934b0f3 100644
--- a/apps/web/src/lib/syntaxColorSchemes.test.ts
+++ b/apps/web/src/lib/syntaxColorSchemes.test.ts
@@ -5,7 +5,6 @@ import {
   isSyntaxColorSchemeId,
   loadSyntaxColorScheme,
   monacoThemeName,
-  resolveSyntaxColorScheme,
   saveSyntaxColorScheme,
 } from "@/lib/syntaxColorSchemes";
 
@@ -72,10 +71,9 @@ describe("syntax colour schemes", () => {
     },
   );
 
-  it("falls back to the default for unknown ids", () => {
+  it("recognises only known scheme ids", () => {
     expect(isSyntaxColorSchemeId("ocean")).toBe(true);
     expect(isSyntaxColorSchemeId("neon")).toBe(false);
-    expect(resolveSyntaxColorScheme("neon").id).toBe(DEFAULT_SYNTAX_COLOR_SCHEME);
   });
 
   it("names a Monaco theme per scheme and appearance", () => {
diff --git a/apps/web/src/lib/syntaxColorSchemes.ts b/apps/web/src/lib/syntaxColorSchemes.ts
index 3d4e991..098c2aa 100644
--- a/apps/web/src/lib/syntaxColorSchemes.ts
+++ b/apps/web/src/lib/syntaxColorSchemes.ts
@@ -179,10 +179,6 @@ export function isSyntaxColorSchemeId(value: unknown): value is SyntaxColorSchem
   return SYNTAX_COLOR_SCHEMES.some((scheme) => scheme.id === value);
 }
 
-export function resolveSyntaxColorScheme(id: string): SyntaxColorScheme {
-  return SYNTAX_COLOR_SCHEMES.find((scheme) => scheme.id === id) ?? SYNTAX_COLOR_SCHEMES[0];
-}
-
 export function monacoThemeName(id: SyntaxColorSchemeId, theme: ResolvedTheme): string {
   return `pseudo-${id}-${theme}`;
 }

From 63e068d48d6a084b3b86294952974c06f6b9a43f Mon Sep 17 00:00:00 2001
From: alex <alex.xinliu@outlook.com>
Date: Thu, 5 Nov 2026 12:41:47 +0800
Subject: [PATCH 3/3] Keep every syntax colour picker in step and apply late
 scheme changes

Each picker now gets its own radio name, so two pickers on screen at once
no longer share one native radio group (picking in one left the other
with nothing checked). The editor also reads the current theme on mount,
so a scheme picked while Monaco is still loading is not lost.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../app/components/MonacoPseudocodeEditor.tsx | 14 +++----
 .../SyntaxColorSchemePicker.test.tsx          | 40 +++++++++++++++++++
 .../components/SyntaxColorSchemePicker.tsx    |  5 ++-
 3 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/app/components/SyntaxColorSchemePicker.test.tsx

diff --git a/apps/web/src/app/components/MonacoPseudocodeEditor.tsx b/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
index d9793de..518f5a4 100644
--- a/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
+++ b/apps/web/src/app/components/MonacoPseudocodeEditor.tsx
@@ -235,6 +235,9 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
   const monacoRef = useRef<typeof import("monaco-editor") | null>(null);
   const editorRef = useRef<import("monaco-editor").editor.IStandaloneCodeEditor | null>(null);
   const touchFocusCleanupRef = useRef<(() => void) | null>(null);
+  // The editor keeps the first onMount it is given, so mount reads the current theme through a ref.
+  const themeName = monacoThemeName(colorScheme, theme);
+  const themeNameRef = useRef(themeName);
   const appleTouchDevice = useMemo(() => isAppleTouchDevice(typeof navigator === "undefined" ? undefined : navigator), []);
   const editorOptions = useMemo(() => getPseudocodeEditorOptions(appleTouchDevice), [appleTouchDevice]);
 
@@ -577,7 +580,7 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
     });
 
     defineSyntaxThemes(monaco);
-    monaco.editor.setTheme(monacoThemeName(colorScheme, theme));
+    monaco.editor.setTheme(themeNameRef.current);
 
     if (appleTouchDevice) {
       const editorElement = editor.getDomNode();
@@ -623,12 +626,9 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
   }, [markers]);
 
   useEffect(() => {
-    if (!monacoRef.current) {
-      return;
-    }
-
-    monacoRef.current.editor.setTheme(monacoThemeName(colorScheme, theme));
-  }, [colorScheme, theme]);
+    themeNameRef.current = themeName;
+    monacoRef.current?.editor.setTheme(themeName);
+  }, [themeName]);
 
   useEffect(() => {
     keywordLookupRef.current = keywordLookup;
diff --git a/apps/web/src/app/components/SyntaxColorSchemePicker.test.tsx b/apps/web/src/app/components/SyntaxColorSchemePicker.test.tsx
new file mode 100644
index 0000000..8acec41
--- /dev/null
+++ b/apps/web/src/app/components/SyntaxColorSchemePicker.test.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { SyntaxColorSchemePicker } from "@/app/components/SyntaxColorSchemePicker";
+import { SYNTAX_COLOR_SCHEMES, type SyntaxColorSchemeId } from "@/lib/syntaxColorSchemes";
+
+const NAMES = Object.fromEntries(SYNTAX_COLOR_SCHEMES.map((scheme) => [scheme.id, scheme.id])) as Record<
+  SyntaxColorSchemeId,
+  string
+>;
+
+function TwoPickers() {
+  const [value, setValue] = useState<SyntaxColorSchemeId>("classic");
+  return (
+    <>
+      <SyntaxColorSchemePicker value={value} theme="light" label="Phone settings" names={NAMES} onChange={setValue} />
+      <SyntaxColorSchemePicker value={value} theme="light" label="Account appearance" names={NAMES} onChange={setValue} />
+    </>
+  );
+}
+
+function checkedIn(label: string) {
+  return within(screen.getByRole("radiogroup", { name: label }))
+    .getAllByRole("radio")
+    .filter((radio) => (radio as HTMLInputElement).checked)
+    .map((radio) => (radio as HTMLInputElement).value);
+}
+
+describe("SyntaxColorSchemePicker", () => {
+  afterEach(() => cleanup());
+
+  it("keeps every mounted picker showing the chosen scheme", () => {
+    render(<TwoPickers />);
+
+    fireEvent.click(within(screen.getByRole("radiogroup", { name: "Account appearance" })).getByRole("radio", { name: "forest" }));
+
+    expect(checkedIn("Phone settings")).toEqual(["forest"]);
+    expect(checkedIn("Account appearance")).toEqual(["forest"]);
+  });
+});
diff --git a/apps/web/src/app/components/SyntaxColorSchemePicker.tsx b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
index 463eee6..0e00e2c 100644
--- a/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
+++ b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import {
   SYNTAX_COLOR_SCHEMES,
   type SyntaxColorScheme,
@@ -58,6 +59,8 @@ type SyntaxColorSchemePickerProps = {
 };
 
 export function SyntaxColorSchemePicker({ value, theme, label, names, onChange }: SyntaxColorSchemePickerProps) {
+  // Radios group by name across the whole page, so two pickers on screen at once need different names.
+  const radioName = useId();
   return (
     <div role="radiogroup" aria-label={label} className="grid grid-cols-2 gap-2">
       {SYNTAX_COLOR_SCHEMES.map((scheme) => {
@@ -73,7 +76,7 @@ export function SyntaxColorSchemePicker({ value, theme, label, names, onChange }
           >
             <input
               type="radio"
-              name="syntax-color-scheme"
+              name={radioName}
               value={scheme.id}
               checked={selected}
               onChange={() => onChange(scheme.id)}