Drive the theme accent from the app layout instead of the player

web-player/src/lib/player/player.svelte.ts

@@ -1,9 +1,7 @@
 import { browser } from '$app/environment';
-import { accent } from '$lib/theme/accent.svelte';
 import { dialog } from '$lib/state/dialog.svelte';
 import type { Track } from '$lib/types';
 import { readStorage, writeStorage } from '$lib/utils/storage';
-import { trackCover } from '$lib/utils/hrefs';
 import { ListenTracker } from './listenTracker';
 import { mediaSession } from './mediaSession';
 import { ProgressClock } from './progressClock';
@@ -140,7 +138,6 @@ class PlayerState {
 	}
 
 	#announce(track: Track) {
-		accent.follow(trackCover(track.id, 'small'), () => this.currentId === track.id);
 		mediaSession.setTrack(track);
 	}
 

web-player/src/routes/(app)/+layout.svelte

@@ -12,6 +12,8 @@
 	import { queuePanel } from '$lib/state/panels.svelte';
 	import { liked } from '$lib/state/liked.svelte';
 	import { createPlaylistModal } from '$lib/state/panels.svelte';
+	import { accent } from '$lib/theme/accent.svelte';
+	import { trackCover } from '$lib/utils/hrefs';
 	import { trackNavigation } from '$lib/state/history.svelte';
 	import { restoreScroll } from '$lib/state/scroll';
 	import { page } from '$app/state';
@@ -36,6 +38,11 @@
 		if (data.lastPlayedTrack) player.hydrate(data.lastPlayedTrack);
 	});
 
+	$effect(() => {
+		const id = player.currentId;
+		if (id) accent.follow(trackCover(id, 'small'), () => player.currentId === id);
+	});
+
 	let queueAutoOpened = false;
 	$effect(() => {
 		if (!player.playing || queueAutoOpened) return;