dark mode, kind of

ui/src/App.vue

@@ -1,36 +1,64 @@
 <template>
-  <div id="app">
-    <header><h1><a href="/">UpEnd</a></h1></header>
+  <div id="app" :class="{ 'sl-theme-dark': prefersDark }">
+    <header>
+      <h1><a href="/">UpEnd</a></h1>
+    </header>
     <main>
-      <router-view/>
+      <router-view />
     </main>
     <footer>
-      <Jobs/>
+      <Jobs />
     </footer>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import { defineComponent } from "vue";
 import Jobs from "@/components/Jobs.vue";
 
 export default defineComponent({
   name: "App",
-  components: {Jobs}
+  data() {
+    return {
+      prefersDark: false,
+    };
+  },
+  components: { Jobs },
+  mounted() {
+    this.prefersDark =
+      window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  },
 });
 </script>
 
 <style lang="scss">
 @import "../node_modules/normalize.css/normalize.css";
 @import "../node_modules/@shoelace-style/shoelace/dist/shoelace/shoelace.css";
+@import "../node_modules/@shoelace-style/shoelace/themes/dark.css";
 
-html, body, #app {
+html {
+  --foreground: #2c3e50;
+  --background: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --foreground: white;
+    --background: #2c3e50;
+  }
+}
+
+html,
+body,
+#app {
   height: calc(100% - 1rem);
+  color: var(--foreground);
+  background: var(--background);
 }
 
 #app {
   font-family: Helvetica, Arial, sans-serif;
-  color: #2c3e50;
+  color: var(--foreground);
 
   display: flex;
   flex-direction: column;
@@ -46,7 +74,7 @@ header {
   margin-bottom: 1rem;
   padding: 1rem;
   display: block;
-  background: white;
+  background: var(--background);
 
   h1,
   h2 {
@@ -56,7 +84,7 @@ header {
   }
 
   h1 a {
-    color: #2c3e50;
+    color: var(--foreground);
     text-decoration: none;
     font-weight: bold;
   }
@@ -65,4 +93,12 @@ header {
 main {
   flex-grow: 1;
 }
+
+a {
+  color: var(--foreground);
+}
+
+a:visited {
+  color: var(--foreground);
+}
 </style>

ui/src/components/SearchResult.vue

@@ -33,7 +33,7 @@ export default defineComponent({
 
   text-align: center;
 
-  color: #2c3e50;
+  color: --foreground;
   text-decoration: inherit;
 
   div {