From fac8b55b1fc0a26f0843d37469f23e0da5320d80 Mon Sep 17 00:00:00 2001
From: iflaq khurshid <ifuubhat72@gmail.com>
Date: Sun, 21 Jun 2026 17:34:04 +0530
Subject: [PATCH 1/2] fix(settings): keep theme previews independent of active
 theme

---
 .../domains/settings/appearance/theme-section.tsx   | 13 +++++++++----
 apps/app/tests/theme-preview.test.ts                | 10 ++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 apps/app/tests/theme-preview.test.ts

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..8ebd4b483
--- /dev/null
+++ b/apps/app/tests/theme-preview.test.ts
@@ -0,0 +1,10 @@
+import { describe, expect, test } from "bun:test";
+
+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");
+  });
+});

From b6d5995e28b7f7ce5edd6e64a15c0fd399115034 Mon Sep 17 00:00:00 2001
From: iflaq khurshid <ifuubhat72@gmail.com>
Date: Tue, 23 Jun 2026 12:19:07 +0530
Subject: [PATCH 2/2] test(settings): verify theme preview colors exist in
 palette

---
 apps/app/tests/theme-preview.test.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/app/tests/theme-preview.test.ts b/apps/app/tests/theme-preview.test.ts
index 8ebd4b483..4ed0f9cef 100644
--- a/apps/app/tests/theme-preview.test.ts
+++ b/apps/app/tests/theme-preview.test.ts
@@ -1,5 +1,6 @@
 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", () => {
@@ -7,4 +8,12 @@ describe("theme picker previews", () => {
     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);
+    }
+  });
 });