Respect prefers-contrast: more query

static/style.css

@@ -18,6 +18,11 @@ body {
   margin: 0;
   height: 100%;
 }
+@media (prefers-contrast: more) {
+  body {
+    background-color: black;
+  }
+}
 
 body > div {
   padding: 1rem;
@@ -35,6 +40,14 @@ a {
   font-weight: bold;
   text-decoration: none;
 }
+@media (prefers-contrast: more) {
+  a,
+  [role=button],
+  [role=link] {
+    color: #99f;
+    text-decoration: underline;
+  }
+}
 
 ul {
   list-style: none;
@@ -70,9 +83,16 @@ ul {
   display: flex;
   align-items: center;
 }
+
 .queue li.playing {
   background-color: #334;
 }
+@media (prefers-contrast: more) {
+  .queue li.playing {
+    background-color: black;
+    border: 2px solid white;
+  }
+}
 
 .queue .metadata {
   flex: 1;
@@ -94,6 +114,12 @@ ul.breadcrumb {
   border-radius: .25rem;
   padding: .75rem 1rem;
 }
+@media (prefers-contrast: more) {
+  ul.breadcrumb {
+    background-color: black;
+    border: 2px solid white;
+  }
+}
 
 ul.breadcrumb li:not(:first-child)::before {
   display: inline-block;
@@ -164,6 +190,12 @@ ul.dir li .material-symbols-outlined {
   border-radius: 0.25rem;
   height: 9.5rem;
 }
+@media (prefers-contrast: more) {
+  .player .nowplaying {
+    background-color: black;
+    border: 2px solid white;
+  }
+}
 
 .player .controls {
   display: flex;

templates/browser.html

@@ -46,6 +46,7 @@
     hx-vals='{"path": "{{ path }}"}'
     hx-replace-url="/?path={{ path }}"
     hx-target=".browser"
+    role="link"
   >
     <span class="material-symbols-outlined">folder</span>
     <div class="song__name">{{ name }}</div>