Make admin light/dark mode follow real palettes end-to-end.

Light admin derives from the public light theme; dark keeps HK overrides. Remap inputs, cards, muted text, and kill the public wallpaper on admin so fonts and boxes stay readable in both modes.

Co-authored-by: Cursor <[email protected]>

src/app/admin/theme/page.tsx

@@ -223,41 +223,41 @@ const ADMIN_FIELDS: {
 }[] = [
 	{
 		key: "admin_canvas",
-		label: "Page background",
+		label: "Page background (dark)",
 		def: "#0f172a",
-		desc: "Main admin page background",
+		desc: "Dark-mode admin canvas. Light mode follows the public light palette.",
 	},
 	{
 		key: "admin_surface",
-		label: "Card / panel",
+		label: "Card / panel (dark)",
 		def: "#1e293b",
-		desc: "Admin cards, tables, and panel backgrounds",
+		desc: "Dark-mode cards, tables, and panels",
 	},
 	{
 		key: "admin_text",
-		label: "Body text",
+		label: "Body text (dark)",
 		def: "#f1f5f9",
-		desc: "Main admin text — must contrast with canvas/surface",
+		desc: "Dark-mode text — must contrast with canvas/surface",
 		bgKey: "admin_canvas",
 	},
 	{
 		key: "admin_text_muted",
-		label: "Muted text",
+		label: "Muted text (dark)",
 		def: "#94a3b8",
-		desc: "Secondary labels, hints, descriptions",
+		desc: "Dark-mode secondary labels and hints",
 		bgKey: "admin_canvas",
 	},
 	{
 		key: "admin_border",
-		label: "Border",
+		label: "Border (dark)",
 		def: "#334155",
-		desc: "Table borders, dividers, input outlines",
+		desc: "Dark-mode table borders, dividers, input outlines",
 	},
 	{
 		key: "admin_sidebar_bg",
-		label: "Sidebar",
+		label: "Sidebar (dark)",
 		def: "#0f172a",
-		desc: "Left navigation sidebar background",
+		desc: "Dark-mode left navigation background",
 	},
 ];
 

src/app/globals.css

@@ -95,7 +95,7 @@ html.dark textarea {
 }
 html.dark .admin-page table,
 html.dark .admin-card {
-	border-color: rgba(255, 255, 255, 0.06);
+	border-color: var(--admin-border);
 }
 html.dark .currency,
 html.dark .article-img {
@@ -262,6 +262,14 @@ html.dark .site-bg {
 	background-blend-mode: overlay;
 }
 
+/* Admin must not inherit the public wallpaper — solid HK canvas only. */
+body.site-bg:has([data-admin]),
+html.dark body.site-bg:has([data-admin]) {
+	background: var(--admin-canvas);
+	background-image: none;
+	background-blend-mode: normal;
+}
+
 
 .article-body {
 	line-height: 1.7;
@@ -1156,8 +1164,59 @@ body:has([data-admin]) {
 	--color-surface-text-readable: var(--admin-text);
 	--color-dropdown: var(--admin-surface);
 	--color-dropdown-text-readable: var(--admin-text);
+	--input-border-color: var(--admin-border);
+	--input-focus-color: var(--admin-accent);
+	--muted: var(--admin-text-muted);
+	--border-subtle: color-mix(in srgb, var(--admin-text-muted) 22%, transparent);
 	color: var(--admin-text);
 	background-color: var(--admin-canvas);
+	font-family: var(--font-family);
+}
+
+/* Admin forms / boxes follow admin tokens in both light and dark. */
+body:has([data-admin]) input:not([type="checkbox"]):not([type="radio"]):not(
+		[type="range"]
+	):not([type="file"]):not([type="color"]),
+body:has([data-admin]) select,
+body:has([data-admin]) textarea {
+	background-color: var(--admin-surface-elevated);
+	color: var(--admin-text);
+	border-color: var(--admin-border);
+	caret-color: var(--admin-text);
+}
+body:has([data-admin]) input::placeholder,
+body:has([data-admin]) textarea::placeholder {
+	color: var(--admin-text-muted);
+	opacity: 0.85;
+}
+body:has([data-admin]) .muted,
+body:has([data-admin]) .admin-empty,
+body:has([data-admin]) .text-muted-foreground {
+	color: var(--admin-text-muted);
+}
+body:has([data-admin]) .admin-card,
+body:has([data-admin]) .admin-page table {
+	background: var(--admin-surface);
+	color: var(--admin-text);
+	border-color: var(--admin-border);
+}
+body:has([data-admin]) .btn-outline {
+	color: var(--admin-text);
+	border-color: var(--admin-border);
+	background: transparent;
+}
+body:has([data-admin]) .btn-outline:hover {
+	background: color-mix(in srgb, var(--admin-accent) 12%, transparent);
+	color: var(--admin-text);
+}
+/* Override public html.dark input hardcodes inside admin. */
+html.dark body:has([data-admin]) input:not([type="checkbox"]):not(
+		[type="radio"]
+	):not([type="range"]):not([type="file"]):not([type="color"]),
+html.dark body:has([data-admin]) select,
+html.dark body:has([data-admin]) textarea {
+	background: var(--admin-surface-elevated);
+	color: var(--admin-text);
 }
 
 /* ── Details/summary open states for nav ──────────────────── */