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">