From 049cdc9d63b0b964270191f61fc8386b51a8ab08 Mon Sep 17 00:00:00 2001
From: Evgenii Kabanov <dev@evbuilds.net>
Date: Fri, 21 Aug 2026 10:04:55 -0300
Subject: [PATCH 1/2] fix(web): keep unchecked switches visible in custom
 themes

---
 apps/web/src/components/ui/switch.test.tsx | 13 +++++++++++++
 apps/web/src/components/ui/switch.tsx      |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/ui/switch.test.tsx

diff --git a/apps/web/src/components/ui/switch.test.tsx b/apps/web/src/components/ui/switch.test.tsx
new file mode 100644
index 000000000000..cbaba994f720
--- /dev/null
+++ b/apps/web/src/components/ui/switch.test.tsx
@@ -0,0 +1,13 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { Switch } from "./switch";
+
+describe("switch colors", () => {
+  it("keeps the unchecked track visible when a theme has a transparent input border", () => {
+    const html = renderToStaticMarkup(<Switch checked={false} aria-label="Example" />);
+
+    expect(html).toContain("data-unchecked:bg-muted-foreground/30");
+    expect(html).not.toContain("data-unchecked:bg-input");
+  });
+});
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
index 4b65b5466bb0..c8adccfb52c1 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/apps/web/src/components/ui/switch.tsx
@@ -8,7 +8,7 @@ function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
   return (
     <SwitchPrimitive.Root
       className={cn(
-        "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 cursor-pointer items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]",
+        "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 cursor-pointer items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-muted-foreground/30 data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]",
         className,
       )}
       data-slot="switch"

From 28f168026ad47ba6a4f6be259bd9c70c1e117dad Mon Sep 17 00:00:00 2001
From: Evgenii Kabanov <dev@evbuilds.net>
Date: Fri, 21 Aug 2026 10:09:34 -0300
Subject: [PATCH 2/2] fix(web): align menu switch off states

---
 apps/web/src/components/ui/menu.tsx        |  2 +-
 apps/web/src/components/ui/switch.test.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index b66782ebe2d1..f3a2e99f7dc8 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -121,7 +121,7 @@ function MenuCheckboxItem({
         <>
           <span className="col-start-1">{children}</span>
           <MenuPrimitive.CheckboxItemIndicator
-            className="inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
+            className="inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-muted-foreground/30 data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
             keepMounted
           >
             <span className="pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" />
diff --git a/apps/web/src/components/ui/switch.test.tsx b/apps/web/src/components/ui/switch.test.tsx
index cbaba994f720..ae31b70a299f 100644
--- a/apps/web/src/components/ui/switch.test.tsx
+++ b/apps/web/src/components/ui/switch.test.tsx
@@ -1,6 +1,7 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vite-plus/test";
 
+import { Menu, MenuCheckboxItem } from "./menu";
 import { Switch } from "./switch";
 
 describe("switch colors", () => {
@@ -10,4 +11,17 @@ describe("switch colors", () => {
     expect(html).toContain("data-unchecked:bg-muted-foreground/30");
     expect(html).not.toContain("data-unchecked:bg-input");
   });
+
+  it("uses the same visible unchecked track in switch menu items", () => {
+    const html = renderToStaticMarkup(
+      <Menu open>
+        <MenuCheckboxItem checked={false} variant="switch">
+          Example
+        </MenuCheckboxItem>
+      </Menu>,
+    );
+
+    expect(html).toContain("data-unchecked:bg-muted-foreground/30");
+    expect(html).not.toContain("data-unchecked:bg-input");
+  });
 });