media player now takes custom colour to style itself

src/lib/media/player.svelte

@@ -7,9 +7,17 @@
     let {
         tracks,
         cover, // album cover (optional, currently unused)
+
+        // we're doing this manually instead of letting the computer calculate optimal colours because... it's easier this way. might as well spend the 2 seconds setting two booleans rather than 2 hours trying to make this work halfway decently, lol
+        customColor,
+        useDarkText,
+        useDarkHoverText,
     }: {
         tracks: Track[];
         cover?: string;
+        customColor: string;
+        useDarkText?: boolean;
+        useDarkHoverText?: boolean;
     } = $props();
 
     let selectedTrackId: number = $state(0);
@@ -44,7 +52,11 @@
     }
 </script>
 
-<div class="media-player">
+<div class="media-player" style="
+    --color-player: {customColor};
+    --color-player-text: var({useDarkText ? "--color-text-dark" : "--color-text"});
+    --color-player-text-hover: var({useDarkHoverText ? "--color-text-dark" : "--color-text"});
+">
     <div class="now-playing">
         <audio
             src={tracks[selectedTrackId].link}
@@ -137,7 +149,7 @@
     .icon {
         width: 20px;
         height: 20px;
-        color: var(--color-text);
+        color: var(--color-player-text);
         transition: color var(--duration-animation) var(--anim-curve);
     }
     .icon:hover {
@@ -146,15 +158,18 @@
     }
 
     .media-player {
+        --color-player-bg: color-mix(in srgb, var(--color-player) 40%, transparent);
+
         width: 100%;
         border-radius: var(--border-radius);
-        background-color: var(--color-background-highlight-alt);
+        background-color: var(--color-player-bg);
         padding: 16px 0 16px;
         overflow: hidden;
     }
 
     .media-player p, .media-player a {
         margin: 0;
+        color: var(--color-player-text);
     }
 
     .now-playing {
@@ -171,7 +186,7 @@
     }
     /* not sure why the svg target is required only for the latter here but it won't work without it */
     .now-playing-button:hover, .track-download-icon:hover svg {
-        color: var(--color-highlight-alt);
+        color: var(--color-player);
     }
 
     .now-playing-hint, .now-playing-duration {
@@ -200,7 +215,7 @@
 	.slider {
 		flex: 1;
 		height: 6px;
-		background: var(--color-background-highlight-alt);
+        background: var(--color-player-bg);
 		border-radius: 6px;
 		overflow: hidden;
         cursor: pointer;
@@ -210,7 +225,7 @@
 	.progress-bar {
 		width: calc(100 * var(--progress));
 		height: 100%;
-		background: var(--color-highlight-alt);
+		background: var(--color-player);
         transition: width var(--duration-animation) var(--anim-curve);
 	}
 
@@ -239,12 +254,18 @@
         transition: background-color var(--duration-animation) var(--anim-curve);
     }
     .track-play:hover {
-        background-color: var(--color-background-highlight-hover-alt);
+        background-color: var(--color-player);
+    }
+    .track-title, .track-icon {
+        transition: color var(--duration-animation) var(--anim-curve);
+    }
+    .track-play:hover .track-title, .track-play:hover .track-icon {
+        color: var(--color-player-text-hover);
     }
 
     .track-icon {
         width: 24px;
-        color: var(--color-text);
+        color: var(--color-player-text);
     }
 
     .track-download-icon {

src/routes/projects/music/anewbeginning.md

@@ -28,4 +28,6 @@ The EP is available for download on [my copyparty instance](https://files.natcon
         },
     ]}
     cover=""
+    customColor="#A26D5F"
+    useDarkHoverText="false"
     />

src/routes/projects/music/dreamworld.md

@@ -44,4 +44,6 @@ The album is available for download on [my copyparty instance](https://files.nat
         },
     ]}
     cover=""
+    customColor="#B796A7"
+    useDarkHoverText="true"
     />