dark mode

src/App.vue

@@ -1,33 +1,60 @@
 <template>
   <div id="app">
-    <img id="avatar" alt="Avatar" src="./assets/logo.jpeg">
-    <Timeline/>
+    <img id="avatar" alt="Avatar" src="./assets/logo.jpeg" />
+    <Timeline />
   </div>
 </template>
 
 <script>
-import Timeline from './components/Timeline.vue'
+import Timeline from "./components/Timeline.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    Timeline
-  }
-}
+    Timeline,
+  },
+};
 </script>
 
 <style>
+@media (prefers-color-scheme: dark) {
+  /* Dark theme styles go here */
+  :root {
+    --bg-color: #121212;
+    --link-color: #1b644c;
+  }
+  img {
+    filter: brightness(0.8) contrast(1.2);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  /* Light theme styles go here */
+  :root {
+    --bg-color: white;
+    --link-color: #025539;
+  }
+}
+
+a {
+  color: var(--link-color);
+}
+
+html body {
+  background-color: var(--bg-color);
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 10px;
+  padding-top: 10px;
 }
 
 #avatar {
   border-radius: 100%;
   width: 200px;
+  padding-bottom: 10px;
 }
 </style>

src/components/Timeline.vue

@@ -84,6 +84,37 @@ export default {
 @import url("/css/print.css");
 @import url("/css/screen.css");
 @import url("/css/timeline.css");
+@media (prefers-color-scheme: dark) {
+  /* Dark theme styles go here */
+  :root {
+    --event-bg-color: #ffdd40;
+    --color: white;
+    --link-color: #1b644c;
+  }
+
+  .event {
+    border: 1px dashed #505050;
+    background-color: #121212;
+  }
+
+  .timeline .event:hover {
+    background: #777777;
+    color: #121212;
+  }
+
+  .event .tag {
+    background-color: #ddcc7e;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  /* Light theme styles go here */
+  :root {
+    --event-bg-color: #505050;
+    --color: #2c3e50;
+    --link-color: #025539;
+  }
+}
 
 /* line 166, ../sass/timeline.scss */
 .event .meta {
@@ -95,8 +126,8 @@ export default {
 
 /* line 170, ../sass/timeline.scss */
 .event .time {
-  background-color: #505050;
-  color: white;
+  background-color: var(--event-bg-color);
+  color: var(--color);
   padding: 0 0.5em;
   width: auto;
   float: none;
@@ -109,7 +140,7 @@ export default {
 /* line 180, ../sass/timeline.scss */
 .event .tag {
   background-color: #ffdd40;
-  color: #505050;
+  color: var(--color);
   width: auto;
   padding: 0 0.5em;
   display: inline-block;