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..5b4b80d 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)
@@ -2007,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>
@@ -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..518f5a4 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(() => {
@@ -168,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]);
 
@@ -509,69 +579,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(themeNameRef.current);
 
     if (appleTouchDevice) {
       const editorElement = editor.getDomNode();
@@ -617,12 +626,9 @@ export const MonacoPseudocodeEditor = memo(function MonacoPseudocodeEditor({
   }, [markers]);
 
   useEffect(() => {
-    if (!monacoRef.current) {
-      return;
-    }
-
-    monacoRef.current.editor.setTheme(theme === "dark" ? "examLabThemeDark" : "examLabThemeLight");
-  }, [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
new file mode 100644
index 0000000..0e00e2c
--- /dev/null
+++ b/apps/web/src/app/components/SyntaxColorSchemePicker.tsx
@@ -0,0 +1,98 @@
+import { useId } from "react";
+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) {
+  // 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) => {
+        const selected = scheme.id === value;
+        return (
+          <label
+            key={scheme.id}
+            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))]"
+            }`}
+          >
+            <input
+              type="radio"
+              name={radioName}
+              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..934b0f3
--- /dev/null
+++ b/apps/web/src/lib/syntaxColorSchemes.test.ts
@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  DEFAULT_SYNTAX_COLOR_SCHEME,
+  SYNTAX_COLOR_SCHEMES,
+  isSyntaxColorSchemeId,
+  loadSyntaxColorScheme,
+  monacoThemeName,
+  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("recognises only known scheme ids", () => {
+    expect(isSyntaxColorSchemeId("ocean")).toBe(true);
+    expect(isSyntaxColorSchemeId("neon")).toBe(false);
+  });
+
+  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..098c2aa
--- /dev/null
+++ b/apps/web/src/lib/syntaxColorSchemes.ts
@@ -0,0 +1,209 @@
+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 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.
+  }
+}