From fe21c1981049b5be14e3a4d84b89df0211f04e4d Mon Sep 17 00:00:00 2001 From: XShine555 Date: Tue, 22 Sep 2026 18:57:16 +0200 Subject: [PATCH] Make dark mode more colorful and give chrome bars a full tint Mirror the earlier light-mode pastel/colorful pass for dark mode: boost tc()'s lightness and chroma, and richen --mf-bg/--mf-elevated/ --mf-panel-bg/--mf-bar-bg/--mf-hairline the same way, so dark mode reads as colorful instead of near-grayscale. Sidebar, Queue, and MobileHeader used bg-bg directly, so in dark mode they stayed almost black regardless of hue. Add --mf-chrome-bg (an alias to --mf-bg in light mode, a solid color-mix of --mf-hero-tint into --mf-bg in dark mode) and switch those three to bg-chrome, so they read as a full, solid colored bar in dark mode instead of a fading gradient (per feedback: a whole bar, not a gradient). Also fixes glass-bar (PlayerBar/TabsBar): it set `background-image: var(--mf-bar-bg)`, but --mf-bar-bg is a plain color, not a valid , so the declaration was silently dropped and these bars never actually showed their tint in either mode. Changed to background-color. --- .../src/lib/components/layout/MobileHeader.svelte | 2 +- .../src/lib/components/layout/Sidebar.svelte | 2 +- web-player/src/lib/components/player/Queue.svelte | 2 +- web-player/src/lib/theme/tokens.ts | 15 ++++++++------- web-player/src/routes/layout.css | 3 ++- 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte index e219c10..bb027d0 100644 --- a/web-player/src/lib/components/layout/MobileHeader.svelte +++ b/web-player/src/lib/components/layout/MobileHeader.svelte @@ -18,7 +18,7 @@
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte index 06261ff..e835f10 100644 --- a/web-player/src/lib/components/layout/Sidebar.svelte +++ b/web-player/src/lib/components/layout/Sidebar.svelte @@ -31,7 +31,7 @@