fix(ui): make shared switches visible across CMS themes

src/app/admin/banners/banners-manager.tsx

@@ -192,12 +192,13 @@ export function BannersManager({ banners }: Props) {
 							<div className="flex gap-6">
 								<div className="flex items-center gap-2">
 									<Switch
+										id="banner-active"
 										checked={form.isActive === 1}
 										onCheckedChange={(v) =>
 											setForm({ ...form, isActive: v ? 1 : 0 })
 										}
 									/>
-									<Label>Active</Label>
+									<Label htmlFor="banner-active">Active</Label>
 								</div>
 								<div className="space-y-2 flex items-center gap-2">
 									<Label>Order</Label>

src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Check, ChevronsUpDown, Star } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -37,11 +37,15 @@ export function ToggleField({
 	onChange: (v: boolean) => void;
 	disabled?: boolean;
 }) {
+	const id = useId();
 	const isChecked = checked ?? (value === 1 || value === "1");
 	return (
 		<div className="flex items-center justify-between gap-2">
-			<Label className="text-xs">{label}</Label>
+			<Label htmlFor={id} className="text-xs">
+				{label}
+			</Label>
 			<Switch
+				id={id}
 				checked={isChecked}
 				onCheckedChange={onChange}
 				disabled={disabled}

src/app/admin/permissions/[id]/rank-edit-client.tsx

@@ -347,12 +347,15 @@ export function RankEditClient({
 							<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
 								<div className="flex items-center justify-between rounded-lg border p-3">
 									<div>
-										<Label className="text-sm">Hidden Rank</Label>
+										<Label htmlFor="rank-hidden_rank" className="text-sm">
+											Hidden Rank
+										</Label>
 										<p className="text-xs text-muted-foreground">
 											Hide from public
 										</p>
 									</div>
 									<Switch
+										id="rank-hidden_rank"
 										checked={general.hidden_rank === "1"}
 										onCheckedChange={(v) =>
 											setGeneral({ ...general, hidden_rank: v ? "1" : "0" })
@@ -361,12 +364,15 @@ export function RankEditClient({
 								</div>
 								<div className="flex items-center justify-between rounded-lg border p-3">
 									<div>
-										<Label className="text-sm">Log Commands</Label>
+										<Label htmlFor="rank-log_commands" className="text-sm">
+											Log Commands
+										</Label>
 										<p className="text-xs text-muted-foreground">
 											Record to audit log
 										</p>
 									</div>
 									<Switch
+										id="rank-log_commands"
 										checked={general.log_commands === "1"}
 										onCheckedChange={(v) =>
 											setGeneral({ ...general, log_commands: v ? "1" : "0" })

src/app/admin/polls/poll-form.tsx

@@ -146,19 +146,23 @@ export function PollForm({ defaultValues }: PollFormProps) {
 					<div className="flex gap-6">
 						<div className="flex items-center gap-2">
 							<Switch
+								id="poll-show-results"
 								checked={form.watch("showResults") === 1}
 								onCheckedChange={(v) => form.setValue("showResults", v ? 1 : 0)}
 							/>
-							<Label>{t("formShowResults")}</Label>
+							<Label htmlFor="poll-show-results">{t("formShowResults")}</Label>
 						</div>
 						<div className="flex items-center gap-2">
 							<Switch
+								id="poll-multiple-choice"
 								checked={form.watch("multipleChoice") === 1}
 								onCheckedChange={(v) =>
 									form.setValue("multipleChoice", v ? 1 : 0)
 								}
 							/>
-							<Label>{t("formAllowMultiple")}</Label>
+							<Label htmlFor="poll-multiple-choice">
+								{t("formAllowMultiple")}
+							</Label>
 						</div>
 					</div>
 

src/components/admin/catalog-manager/catalog-access.module.css

@@ -39,32 +39,6 @@
 	line-height: 1.5;
 	color: var(--admin-text-muted);
 }
-.toggle[data-slot="switch"] {
-	width: 44px;
-	height: 24px;
-	border: 1px solid var(--admin-text-muted);
-	background: var(--admin-border);
-	cursor: pointer;
-}
-.toggle[data-checked] {
-	background: var(--admin-accent);
-	border-color: var(--admin-accent);
-}
-.toggle [data-slot="switch-thumb"] {
-	width: 18px;
-	height: 18px;
-	left: 2px;
-	background: var(--admin-text);
-	color: var(--admin-canvas);
-}
-.toggle[data-checked] [data-slot="switch-thumb"] {
-	left: 22px;
-}
-.toggle:focus-visible {
-	outline: 2px solid var(--admin-accent);
-	outline-offset: 3px;
-}
-.option[data-disabled] .toggle,
 .option[data-disabled] .label {
 	cursor: not-allowed;
 }

src/components/admin/catalog-manager/inline-editor.tsx

@@ -864,7 +864,6 @@ function ToggleRow({
 						onCheckedChange={onChange}
 						disabled={disabled}
 						aria-describedby={`${id}-description`}
-						className={styles.toggle}
 					/>
 				</div>
 			</div>

src/components/ui/switch.module.css

@@ -0,0 +1,105 @@
+.root {
+	--switch-off: var(--color-input);
+	--switch-on: var(--color-primary);
+	--switch-border: var(--color-muted-foreground);
+	--switch-thumb: var(--color-foreground);
+	--switch-mark: var(--color-background);
+	position: relative;
+	display: inline-flex;
+	flex-shrink: 0;
+	width: 44px;
+	height: 24px;
+	border: 1px solid var(--switch-border);
+	border-radius: 999px;
+	background: var(--switch-off);
+	cursor: pointer;
+	outline: none;
+	transition:
+		background-color 150ms,
+		border-color 150ms;
+}
+body:has([data-admin]) .root {
+	--switch-off: var(--admin-border);
+	--switch-on: var(--admin-accent);
+	--switch-border: var(--admin-text-muted);
+	--switch-thumb: var(--admin-text);
+	--switch-mark: var(--admin-canvas);
+}
+.root[data-checked] {
+	background: var(--switch-on);
+	border-color: var(--switch-on);
+}
+.root:focus-visible {
+	outline: 2px solid var(--switch-on);
+	outline-offset: 3px;
+}
+.root[data-disabled] {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+.thumb {
+	pointer-events: none;
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	top: 50%;
+	left: 2px;
+	transform: translateY(-50%);
+	border-radius: 999px;
+	background: var(--switch-thumb);
+	color: var(--switch-mark);
+	transition: left 150ms;
+}
+.root[data-checked] .thumb {
+	left: 22px;
+}
+.check {
+	width: 10px;
+	height: 10px;
+	stroke-width: 3;
+	opacity: 0;
+}
+.root[data-checked] .check {
+	opacity: 1;
+}
+.root[data-size="sm"] {
+	width: 32px;
+	height: 20px;
+}
+.root[data-size="sm"] .thumb {
+	width: 14px;
+	height: 14px;
+}
+.root[data-size="sm"][data-checked] .thumb {
+	left: 14px;
+}
+.root[data-size="sm"] .check {
+	width: 8px;
+	height: 8px;
+}
+@media (prefers-reduced-motion: reduce) {
+	.root,
+	.thumb {
+		transition: none;
+	}
+}
+@media (forced-colors: active) {
+	.root {
+		border-color: ButtonText;
+		background: Canvas;
+	}
+	.root[data-checked] {
+		background: Highlight;
+		border-color: Highlight;
+	}
+	.thumb {
+		background: ButtonText;
+		color: Canvas;
+	}
+	.root:focus-visible {
+		outline-color: Highlight;
+	}
+}

src/components/ui/switch.tsx

@@ -4,6 +4,7 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { CheckIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import styles from "./switch.module.css";
 
 function Switch({
 	className,
@@ -16,35 +17,11 @@ function Switch({
 		<SwitchPrimitive.Root
 			data-slot="switch"
 			data-size={size}
-			className={cn(
+			className={cn(styles.root, className)}
-				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-colors",
-				"bg-input hover:bg-input/80",
-				"data-checked:bg-primary data-checked:hover:bg-primary/90",
-				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
-				"disabled:cursor-not-allowed disabled:opacity-50",
-				"data-[size=default]:h-5 data-[size=default]:w-9",
-				"data-[size=sm]:h-4 data-[size=sm]:w-7",
-				className,
-			)}
 			{...props}
 		>
-			<SwitchPrimitive.Thumb
+			<SwitchPrimitive.Thumb data-slot="switch-thumb" className={styles.thumb}>
-				data-slot="switch-thumb"
+				<CheckIcon aria-hidden className={styles.check} />
-				className={cn(
-					"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full bg-background text-primary shadow-sm ring-0 transition-[left,colors]",
-					"left-0.5 data-checked:left-[calc(100%-1.125rem)]",
-					"group-data-[size=default]/switch:size-4",
-					"group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:data-checked:left-[calc(100%-0.875rem)]",
-				)}
-			>
-				<CheckIcon
-					aria-hidden
-					className={cn(
-						"size-2.5 stroke-[3] opacity-0 transition-opacity",
-						"group-data-checked/switch:opacity-100",
-						"group-data-[size=sm]/switch:size-2",
-					)}
-				/>
 			</SwitchPrimitive.Thumb>
 		</SwitchPrimitive.Root>
 	);