From c3279280debed0bfef8106933588d46f4630b5d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 4 Aug 2026 15:41:45 +0000
Subject: [PATCH] black lyrics sheet, and lift the inactive lines out of the
 murk
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the sheet forces the dark theme tokens on its own subtree — they are CSS
variables scoped to a .dark ancestor, so a light theme would otherwise paint
near-black text on black. inactive synced lines drop the /50 and use plain
muted-foreground, the same grade as the artist under each track title.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/workspaces/officerdev/src/MusicPlayer/LyricsPane.tsx  | 2 +-
 src/workspaces/officerdev/src/MusicPlayer/LyricsPanel.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/workspaces/officerdev/src/MusicPlayer/LyricsPane.tsx b/src/workspaces/officerdev/src/MusicPlayer/LyricsPane.tsx
index a8d68c63..8657e19d 100644
--- a/src/workspaces/officerdev/src/MusicPlayer/LyricsPane.tsx
+++ b/src/workspaces/officerdev/src/MusicPlayer/LyricsPane.tsx
@@ -49,7 +49,7 @@ export const LyricsPane = ({ lines, synced, loading }: LyricsPaneProps) => {
             synced ? 'text-center' : 'text-left text-foreground/85',
             // Only the colour changes on the active line — no weight or size change, so nothing reflows
             // and the sheet does not jitter as the highlight moves.
-            active ? 'text-foreground' : synced ? 'text-muted-foreground/50' : '',
+            active ? 'text-foreground' : synced ? 'text-muted-foreground' : '',
             seekable ? 'cursor-pointer hover:text-foreground/80' : '',
           ]
             .filter(Boolean)
diff --git a/src/workspaces/officerdev/src/MusicPlayer/LyricsPanel.tsx b/src/workspaces/officerdev/src/MusicPlayer/LyricsPanel.tsx
index 2c3a514f..6a2f274a 100644
--- a/src/workspaces/officerdev/src/MusicPlayer/LyricsPanel.tsx
+++ b/src/workspaces/officerdev/src/MusicPlayer/LyricsPanel.tsx
@@ -15,8 +15,11 @@ export const LyricsPanel = () => {
   const [, toggleLyrics] = useLyricsOpen();
   const lyrics = useLyrics(current?.albumRel ?? '', current?.file ?? '', true, token);
 
+  // `dark` is not decoration: the theme tokens are CSS variables scoped to a `.dark` ancestor, so marking
+  // this subtree re-points foreground/muted-foreground/border at their dark values. Without it a light
+  // theme would paint near-black text on the black sheet.
   return (
-    <div className="flex h-full flex-col">
+    <div className="dark flex h-full flex-col bg-black">
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
         <MicVocal size={15} className="shrink-0 text-muted-foreground" />
         <div className="min-w-0 flex-1">