diff --git a/apps/web/src/components/theme-swatch.tsx b/apps/web/src/components/theme-swatch.tsx
index 0b0904d5..7ae144b5 100644
--- a/apps/web/src/components/theme-swatch.tsx
+++ b/apps/web/src/components/theme-swatch.tsx
@@ -14,7 +14,7 @@ function SwatchStrip({ palette }: { palette: string }) {
 /**
  * Previews a theme through its own tokens: `data-palette` scopes tokens.css,
  * so the strip shows that theme's surface, accent, success and error. Two
- * palettes split the swatch, e.g. System's light and dark.
+ * palettes split the swatch, e.g. Auto's light and dark.
  */
 export function ThemeSwatch({
   palettes,
diff --git a/apps/web/src/theme.ts b/apps/web/src/theme.ts
index fef7f37e..9abbab87 100644
--- a/apps/web/src/theme.ts
+++ b/apps/web/src/theme.ts
@@ -29,13 +29,19 @@ function bundled(name: string): ThemesType {
 export const THEMES = [
   {
     id: "system",
-    label: "System",
+    label: "Auto",
     kind: "base",
     mode: "system",
     code: pierre,
   },
-  { id: "light", label: "Light", kind: "base", mode: "light", code: pierre },
-  { id: "dark", label: "Dark", kind: "base", mode: "dark", code: pierre },
+  {
+    id: "light",
+    label: "diffx Light",
+    kind: "base",
+    mode: "light",
+    code: pierre,
+  },
+  { id: "dark", label: "diffx Dark", kind: "base", mode: "dark", code: pierre },
   {
     id: "catppuccin",
     label: "Catppuccin",
diff --git a/apps/web/test/browser/app.spec.ts b/apps/web/test/browser/app.spec.ts
index d845193c..1611d45d 100644
--- a/apps/web/test/browser/app.spec.ts
+++ b/apps/web/test/browser/app.spec.ts
@@ -1585,16 +1585,16 @@ test("settings theme picker follows system, applies palettes and persists", asyn
   // One flat list: no group headings.
   await expect(themes.getByRole("group")).toHaveCount(0);
   await expect(
-    themes.getByRole("radio", { name: "System", exact: true }),
+    themes.getByRole("radio", { name: "Auto", exact: true }),
   ).toBeChecked();
 
-  await themes.getByRole("radio", { name: "Light", exact: true }).click();
+  await themes.getByRole("radio", { name: "diffx Light", exact: true }).click();
   await expect(html).toHaveAttribute("data-theme", "light");
   await expect.poll(savedTheme).toBe("light");
   // Arrow keys move and select, like native radios.
   await page.keyboard.press("ArrowDown");
   await expect(
-    themes.getByRole("radio", { name: "Dark", exact: true }),
+    themes.getByRole("radio", { name: "diffx Dark", exact: true }),
   ).toBeChecked();
   await expect(html).toHaveAttribute("data-theme", "dark");
 
@@ -1618,7 +1618,7 @@ test("settings theme picker follows system, applies palettes and persists", asyn
   await expect(html).toHaveAttribute("data-palette", "flexoki-light");
   await expect(html).toHaveAttribute("data-theme", "light");
 
-  await themes.getByRole("radio", { name: "System", exact: true }).click();
+  await themes.getByRole("radio", { name: "Auto", exact: true }).click();
   await expect(html).not.toHaveAttribute("data-palette");
   await expect(html).toHaveAttribute("data-theme", "dark");
   await page.emulateMedia({ colorScheme: "light" });