diff --git a/apps/app/src/react-app/domains/settings/appearance/theme-section.tsx b/apps/app/src/react-app/domains/settings/appearance/theme-section.tsx
index 9f3b0cd72..ac547ce69 100644
--- a/apps/app/src/react-app/domains/settings/appearance/theme-section.tsx
+++ b/apps/app/src/react-app/domains/settings/appearance/theme-section.tsx
@@ -14,6 +14,11 @@ import {
 
 type ThemeMode = AppearanceViewProps["themeMode"];
 
+export const THEME_PREVIEW_CLASSES: Record<"light" | "dark", string> = {
+  light: "bg-white",
+  dark: "bg-black",
+};
+
 interface ThemeSectionProps
   extends Pick<AppearanceViewProps, "busy" | "themeMode" | "setThemeMode"> {}
 
@@ -69,14 +74,14 @@ function ThemePicker(props: ThemePickerProps) {
         value="light"
         label={t("settings.theme_light")}
       >
-        <ThemePreview value="light" className="bg-white" />
+        <ThemePreview value="light" className={THEME_PREVIEW_CLASSES.light} />
         <ThemePickerLabel>{t("settings.theme_light")}</ThemePickerLabel>
       </ThemePickerItem>
       <ThemePickerItem
         value="dark"
         label={t("settings.theme_dark")}
       >
-        <ThemePreview value="dark" className="bg-zinc-950" />
+        <ThemePreview value="dark" className={THEME_PREVIEW_CLASSES.dark} />
         <ThemePickerLabel>{t("settings.theme_dark")}</ThemePickerLabel>
       </ThemePickerItem>
     </ToggleGroup>
@@ -116,8 +121,8 @@ function ThemePreview(props: ThemePreviewProps) {
     >
       {props.value === "system" && (
         <div className="flex h-full">
-          <div className="w-1/2 bg-white" />
-          <div className="w-1/2 bg-zinc-950" />
+          <div className={cn("w-1/2", THEME_PREVIEW_CLASSES.light)} />
+          <div className={cn("w-1/2", THEME_PREVIEW_CLASSES.dark)} />
         </div>
       )}
     </div>
diff --git a/apps/app/tests/theme-preview.test.ts b/apps/app/tests/theme-preview.test.ts
new file mode 100644
index 000000000..4ed0f9cef
--- /dev/null
+++ b/apps/app/tests/theme-preview.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test";
+
+import tailwindConfig from "../tailwind.config";
+import { THEME_PREVIEW_CLASSES } from "../src/react-app/domains/settings/appearance/theme-section";
+
+describe("theme picker previews", () => {
+  test("uses fixed light and dark preview colors", () => {
+    expect(THEME_PREVIEW_CLASSES.light).toBe("bg-white");
+    expect(THEME_PREVIEW_CLASSES.dark).toBe("bg-black");
+  });
+
+  test("uses colors defined by the Tailwind palette", () => {
+    for (const className of Object.values(THEME_PREVIEW_CLASSES)) {
+      const colorName = className.replace("bg-", "");
+
+      expect(Object.hasOwn(tailwindConfig.theme.colors, colorName)).toBe(true);
+    }
+  });
+});