diff --git a/pug/album_grid.pug b/pug/album_grid.pug
index 60e54b2..3141145 100644
--- a/pug/album_grid.pug
+++ b/pug/album_grid.pug
@@ -9,7 +9,7 @@ block view
     .d-grid.gx8.gy12.jc-center.break-word(style="grid-template-columns: repeat(auto-fit, 210px)")
       each item in items
         div
-          a.cover(href=`/api/play/${item.item_type}/${item.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
+          a.cover(href=item.item_url hx-get=`/api/play/${item.item_type}/${item.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
             picture
               img(loading="lazy" src=item.item_art_url width=210 height=210)
               != icons.use("play-solid", 64)
diff --git a/pug/artist_grid.pug b/pug/artist_grid.pug
index ddb1e5f..a0a73a1 100644
--- a/pug/artist_grid.pug
+++ b/pug/artist_grid.pug
@@ -28,5 +28,5 @@ block view
                   span.s-tag--sponsor!= icons.use("flower", 16)
                   = label
           each preview in item.previews
-            a.d-flex(href=`/api/play/${preview.item_type}/${preview.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
+            a.d-flex(href=preview.item_url hx-get=`/api/play/${preview.item_type}/${preview.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
               img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: auto; width: auto; max-height: 70px")
diff --git a/pug/label_grid.pug b/pug/label_grid.pug
index d80db64..887dbd4 100644
--- a/pug/label_grid.pug
+++ b/pug/label_grid.pug
@@ -28,5 +28,5 @@ block view
                   span.s-tag--sponsor!= icons.use("compact-disc", 16)
                   = item.total_duration
           each preview in item.previews
-            a.d-flex(href=`/api/play/${preview.item_type}/${preview.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
+            a.d-flex(href=preview.item_url hx-get=`/api/play/${preview.item_type}/${preview.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
               img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: auto; width: auto; max-height: 70px")
diff --git a/pug/player.pug b/pug/player.pug
index 3f51e85..97d797a 100644
--- a/pug/player.pug
+++ b/pug/player.pug
@@ -1,5 +1,10 @@
 #player
   .s-sidebarwidget(style="overflow: hidden")
     div(style="margin: -1px; margin-bottom: -11px").ps-relative
-      a.ps-absolute.bg-white.bar0.t0.r0.s-btn.s-btn__icon.s-btn__muted.s-btn__sm.px12(href=`/api/play/${item_type}/${item_id}` hx-target="#player" hx-select="#player" hx-push-url="false" title="reload embedded player").fc-theme-primary!= icons.get("refresh-double", 18)
-      iframe(style="border: 0; width: 100%; height: 424px;" src=`https://bandcamp.com/EmbeddedPlayer/${item_type}=${item_id}/size=large/bgcol=ffffff/linkcol=63b2cc/artwork=none/transparent=true/track=${track_id}`)
+      button.ps-absolute.bg-white.bar0.t0.r0.s-btn.s-btn__icon.s-btn__muted.s-btn__sm.px12(hx-get=`/api/play/${item_type}/${item_id}` hx-target="#player" hx-select="#player" hx-push-url="false" title="reload embedded player").fc-theme-primary!= icons.get("refresh-double", 18)
+      iframe#player-iframe(style="border: 0; width: 100%; height: 424px;" data-src=`https://bandcamp.com/EmbeddedPlayer/track=${track_id}/size=large/bgcol=ffffff/linkcol=63b2cc/artwork=none/transparent=true/${item_type}=${item_id}`)
+      script.
+        var dark = window.matchMedia?.("(prefers-color-scheme: dark)").matches
+        var iframe = document.getElementById("player-iframe")
+        if (dark) iframe.src = iframe.getAttribute("data-src").replace("bgcol=ffffff", "bgcol=000000")
+        else iframe.src = iframe.getAttribute("data-src")
diff --git a/routes/app.js b/routes/app.js
index fb2caa3..f2288f8 100644
--- a/routes/app.js
+++ b/routes/app.js
@@ -36,7 +36,7 @@ const sqls = {
 
 function loadPreviews(locals, field, number, whereClause, account, filter_field, filter, filter_fuzzy) {
 	const params = [account, number]
-	let sql = `SELECT ${field}, item_id, item_type, item_art_url FROM (SELECT ${field}, item_id, item_type, item_art_url, row_number() OVER (PARTITION BY ${field} ORDER BY purchased DESC) AS row_number FROM item {JOIN TAG} WHERE account = ? {WHERE}) WHERE row_number <= ?`
+	let sql = `SELECT ${field}, item_id, item_type, item_url, item_art_url FROM (SELECT ${field}, item_id, item_type, item_url, item_art_url, row_number() OVER (PARTITION BY ${field} ORDER BY purchased DESC) AS row_number FROM item {JOIN TAG} WHERE account = ? {WHERE}) WHERE row_number <= ?`
 	sql = sql.replace("{WHERE}", whereClause)
 	if (whereClause) {
 		if (filter_field === "band_url" || filter_fuzzy) {