From 8deb762a52feba1bdaf1003397f6d66d9503218b Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 19:02:10 +0200
Subject: [PATCH] Revert chrome-bg: sidebar/queue should just be the tinted
 background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per feedback, the solid color-mix bar was wrong — sidebar, queue and
the mobile header should stay on the plain --mf-bg (the same subtly
hue-shifting black used everywhere else), exactly like light mode
already does, not a separately-boosted colored panel. Drop --mf-chrome-bg/
--color-chrome and switch those three back to bg-bg.

The general dark-mode richness bump (tc(), --mf-bg/--mf-elevated/etc.)
and the glass-bar background-color fix from the previous commit stay;
only the separate chrome treatment is reverted.
---
 web-player/src/lib/components/layout/MobileHeader.svelte | 2 +-
 web-player/src/lib/components/layout/Sidebar.svelte      | 2 +-
 web-player/src/lib/components/player/Queue.svelte        | 2 +-
 web-player/src/lib/theme/tokens.ts                       | 1 -
 web-player/src/routes/layout.css                         | 1 -
 5 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index bb027d0..e219c10 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-chrome/85 page-x backdrop-blur-md sm:hidden"
+	class="sticky top-0 z-(--z-sticky) flex h-14 items-center justify-between border-b border-hairline bg-bg/85 page-x backdrop-blur-md sm:hidden"
 >
 	<a href="/">
 		<Logo size="sm" />
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index e835f10..06261ff 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline bg-chrome p-5 lg:flex"
+	class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<nav class="flex flex-col gap-1">
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index dfa0c13..22d620a 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -18,7 +18,7 @@
 {#if queuePanel.open}
 	<aside
 		transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
-		class="hidden shrink-0 flex-col border-l border-hairline bg-chrome px-4 pt-5 sm:flex"
+		class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index b85183a..8ac8e77 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -52,7 +52,6 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-panel-bg': light ? `oklch(0.97 0.014 ${H} / 0.7)` : `oklch(0.1 0.022 ${H} / 0.28)`,
 		'--mf-bar-bg': light ? `oklch(0.97 0.014 ${H} / 0.9)` : `oklch(0.115 0.025 ${H} / 0.9)`,
 		'--mf-hairline': light ? `oklch(0.3 0.035 ${H} / 0.1)` : `oklch(0.62 0.05 ${H} / 0.08)`,
-		'--mf-chrome-bg': light ? 'var(--mf-bg)' : `color-mix(in srgb, ${tc(1, 42, h)} 40%, var(--mf-bg))`,
 		'--mf-ambient': light
 			? 'none'
 			: `radial-gradient(52% 38% at 14% 0%, ${tc(0.26, 30, h)}, transparent 54%), radial-gradient(46% 34% at 78% 0%, ${tc(0.2, 40, h)}, transparent 56%)`,
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 8c13d4b..1193b00 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -5,7 +5,6 @@
 	--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;
 
 	--color-bg: var(--mf-bg);
-	--color-chrome: var(--mf-chrome-bg);
 	--color-elevated: var(--mf-elevated);
 	--color-surface: var(--mf-surface);
 	--color-surface-2: var(--mf-surface-2);