diff --git a/web/src/components/Base.vue b/web/src/components/Base.vue
index 2c7a2ed5..c7972dd7 100644
--- a/web/src/components/Base.vue
+++ b/web/src/components/Base.vue
@@ -3,7 +3,6 @@
     <v-app-bar
       app
       clipped-left
-      color="white"
       flat
       style="border-bottom: 1px solid #eee !important"
     >
diff --git a/web/src/components/Graph.vue b/web/src/components/Graph.vue
index b2eacf66..42866740 100644
--- a/web/src/components/Graph.vue
+++ b/web/src/components/Graph.vue
@@ -65,6 +65,7 @@
     }}</v-alert>
     <div v-else-if="chartData != null && chartOptions != null">
       <apexchart
+        ref="chart"
         type="area"
         :options="chartOptions"
         :series="chartData"
@@ -78,6 +79,7 @@
 <script>
 import { mapActions, mapState } from "vuex";
 import ToolBar from "./ToolBar.vue";
+import { getColorScheme, onColorSchemeChange } from "../lib/darkmode";
 
 export default {
   name: "Graph",
@@ -552,6 +554,9 @@ export default {
         }
       };
       this.chartOptions = {
+        theme: {
+          mode: getColorScheme(),
+        },
         dataLabels: {
           enabled: false,
         },
@@ -589,6 +594,22 @@ export default {
           },
         },
       };
+      onColorSchemeChange(() => {
+        if (!this.$refs.chart) {
+          return;
+        }
+        this.$refs.chart.updateOptions({
+          theme: {
+            mode: getColorScheme(),
+          },
+          chart: {
+            foreColor: getColorScheme() === 'dark' ? '#f6f7f8' : '#373d3f'
+          },
+          tooltip: {
+            theme: getColorScheme()
+          }
+        });
+      });
       this.chartData = [];
       obj.build(this.chartData, this.chartOptions);
     },
diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue
index c9861ca6..538b0c97 100644
--- a/web/src/components/Navigation.vue
+++ b/web/src/components/Navigation.vue
@@ -189,11 +189,29 @@
           <v-list-item-title>Manage Converters</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-    </v-list-group>
+
+        <v-btn-toggle
+            v-model="colorscheme"
+            mandatory
+            background-color="transparent"
+            class="pl-9 pt-2"
+        >
+          <v-btn>
+            <v-icon>mdi-weather-sunny</v-icon>
+          </v-btn>
+          <v-btn>
+            <v-icon>mdi-cog-outline</v-icon>
+          </v-btn>
+          <v-btn>
+            <v-icon>mdi-weather-night</v-icon>
+          </v-btn>
+        </v-btn-toggle>
+      </v-list-group>
   </v-list>
 </template>
 
 <script>
+import { setColorScheme, getColorSchemeFromStorage } from "@/lib/darkmode";
 import { EventBus } from "./EventBus";
 import { mapActions, mapGetters, mapState } from "vuex";
 
@@ -201,6 +219,7 @@ export default {
   name: "Navigation",
   data() {
     return {
+      colorscheme: 0,
       tagTypes: [
         {
           title: "Services",
@@ -230,6 +249,24 @@ export default {
     ...mapGetters(["groupedTags"]),
     ...mapState(["status"]),
   },
+  watch: {
+    colorscheme() {
+      const schemes = {
+        0: "light",
+        1: "system",
+        2: "dark",
+      };
+      setColorScheme(schemes[this.colorscheme]);
+    },
+  },
+  beforeMount() {
+    const schemeInitialisations = {
+      light: 0,
+      system: 1,
+      dark: 2,
+    };
+    this.colorscheme = schemeInitialisations[getColorSchemeFromStorage()];
+  },
   mounted() {
     this.updateTags();
     this.updateStatus();
diff --git a/web/src/components/StreamData.vue b/web/src/components/StreamData.vue
index cc16480a..b3492070 100644
--- a/web/src/components/StreamData.vue
+++ b/web/src/components/StreamData.vue
@@ -2,42 +2,29 @@
 <template>
   <v-card>
     <v-card-text>
-      <template v-if="presentation == 'ascii'">
+      <template v-if="presentation === 'ascii'">
         <span
-          v-for="(chunk, index) in data"
-          :key="index"
-          class="chunk"
-          :data-chunk-idx="index"
-          :style="
-            chunk.Direction != 0
-              ? 'font-family: monospace,monospace; color: #000080; background-color: #eeedfc;'
-              : 'font-family: monospace,monospace; color: #800000; background-color: #faeeed;'
-          "
-          v-html="$options.filters.inlineAscii(chunk.Content).join('')"
+            v-for="(chunk, index) in data"
+            :key="index"
+            :class="classes(chunk)"
+            :data-chunk-idx="index"
+            v-html="$options.filters.inlineAscii(chunk.Content).join('')"
         >
         </span>
       </template>
-      <template v-else-if="presentation == 'hexdump'">
+      <template v-else-if="presentation === 'hexdump'">
         <pre
-          v-for="(chunk, index) in data"
-          :key="index"
-          :style="
-            chunk.Direction != 0
-              ? 'margin-left: 2em; color: #000080; background-color: #eeedfc;'
-              : 'color: #800000; background-color: #faeeed;'
-          "
-          >{{ chunk.Content | hexdump }}</pre
-        >
+            v-for="(chunk, index) in data"
+            :key="index"
+            :class="[classes(chunk), 'hexdump']"
+        >{{ chunk.Content | hexdump }}
+        </pre>
       </template>
       <template v-else>
         <span
-          v-for="(chunk, index) in data"
-          :key="index"
-          :style="
-            chunk.Direction != 0
-              ? 'font-family: monospace,monospace; color: #000080; background-color: #eeedfc;'
-              : 'font-family: monospace,monospace; color: #800000; background-color: #faeeed;'
-          "
+            v-for="(chunk, index) in data"
+            :key="index"
+            :class="[classes(chunk)]"
         >
           {{ chunk.Content | inlineHex }}<br
         /></span>
@@ -47,7 +34,7 @@
 </template>
 
 <script>
-const asciiMap = Array.from({ length: 0x100 }, (_, i) => {
+const asciiMap = Array.from({length: 0x100}, (_, i) => {
   if (i === 0x0d) return "\r";
   if (i === 0x0a) return "\n";
   if (i >= 0x20 && i <= 0x7e) return `&#x${i.toString(16).padStart(2, "0")};`;
@@ -58,55 +45,55 @@ export default {
   filters: {
     inlineAscii(b64) {
       return atob(b64)
-        .split("")
-        .map((c) => asciiMap[c.charCodeAt(0)]);
+          .split("")
+          .map((c) => asciiMap[c.charCodeAt(0)]);
     },
     inlineHex(b64) {
       const ui8 = Uint8Array.from(
-        atob(b64)
-          .split("")
-          .map((char) => char.charCodeAt(0))
+          atob(b64)
+              .split("")
+              .map((char) => char.charCodeAt(0))
       );
       var str = [].slice
-        .call(ui8)
-        .map((i) => i.toString(16).padStart("2", "0"))
-        .join("");
+          .call(ui8)
+          .map((i) => i.toString(16).padStart(2, "0"))
+          .join("");
       return str;
     },
     hexdump(b64) {
       const ui8 = Uint8Array.from(
-        atob(b64)
-          .split("")
-          .map((char) => char.charCodeAt(0))
+          atob(b64)
+              .split("")
+              .map((char) => char.charCodeAt(0))
       );
       var str = [].slice
-        .call(ui8)
-        .map((i) => i.toString(16).padStart("2", "0"))
-        .join("")
-        .match(/.{1,2}/g)
-        .join(" ")
-        .match(/.{1,48}/g)
-        .map(function (str) {
-          while (str.length < 48) {
-            str += " ";
-          }
-          var ascii = str
-            .replace(/ /g, "")
-            .match(/.{1,2}/g)
-            .map(function (ch) {
-              var c = String.fromCharCode(parseInt(ch, 16));
-              if (!/[ -~]/.test(c)) {
-                c = ".";
-              }
-              return c;
-            })
-            .join("");
-          while (ascii.length < 16) {
-            ascii += " ";
-          }
-          return str + " |" + ascii + "|";
-        })
-        .join("\n");
+          .call(ui8)
+          .map((i) => i.toString(16).padStart(2, "0"))
+          .join("")
+          .match(/.{1,2}/g)
+          .join(" ")
+          .match(/.{1,48}/g)
+          .map(function (str) {
+            while (str.length < 48) {
+              str += " ";
+            }
+            var ascii = str
+                .replace(/ /g, "")
+                .match(/.{1,2}/g)
+                .map(function (ch) {
+                  var c = String.fromCharCode(parseInt(ch, 16));
+                  if (!/[ -~]/.test(c)) {
+                    c = ".";
+                  }
+                  return c;
+                })
+                .join("");
+            while (ascii.length < 16) {
+              ascii += " ";
+            }
+            return str + " |" + ascii + "|";
+          })
+          .join("\n");
       return str;
     },
   },
@@ -120,10 +107,42 @@ export default {
       required: true,
     },
   },
+  methods: {
+    classes(chunk) {
+      return {
+        chunk: true,
+        client: chunk.Direction === 0,
+        server: chunk.Direction === 1,
+      };
+    }
+  }
 };
 </script>
 <style scoped>
 .chunk {
   white-space: pre-line;
+  font-family: monospace, monospace;
+}
+
+.server {
+  color: #000080;
+  background-color: #eeedfc;
+  @media (prefers-color-scheme: dark) {
+    color: #ffffff;
+    background-color: #261858;
+  }
+
+  &.hexdump {
+    margin-left: 2em;
+  }
+}
+
+.client {
+  color: #800000;
+  background-color: #faeeed;
+  @media (prefers-color-scheme: dark) {
+    color: #ffffff;
+    background-color: #561919;
+  }
 }
 </style>
diff --git a/web/src/lib/darkmode.js b/web/src/lib/darkmode.js
new file mode 100644
index 00000000..4ec030e5
--- /dev/null
+++ b/web/src/lib/darkmode.js
@@ -0,0 +1,75 @@
+const STORAGE_KEY = "colorScheme";
+
+/**
+ * @type {Array<Function>}
+ */
+const colorSchemeChangeListeners = [];
+
+/** @type {import("vuetify").Framework|null} */
+let registeredVuetify = null;
+
+export function registerVuetifyTheme(vuetify) {
+  registeredVuetify = vuetify;
+  vuetify.theme.dark = getColorScheme() === "dark";
+  onSystemColorSchemeChange((colorScheme) => {
+    vuetify.theme.dark = colorScheme === "dark";
+  });
+}
+
+export function onSystemColorSchemeChange(callback) {
+  window.matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      callback(getColorScheme());
+    });
+}
+
+export function onColorSchemeChange(callback) {
+  colorSchemeChangeListeners.push(callback);
+  window.matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      callback(getColorScheme());
+    });
+}
+
+/**
+ * @returns {"dark"|"light"}
+ */
+export function getSystemColorScheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+}
+
+/**
+ * @returns {"dark"|"light"|"system"}
+ */
+export function getColorSchemeFromStorage() {
+  const scheme = localStorage.getItem(STORAGE_KEY);
+  if (!['dark', 'light', 'system'].includes(scheme)) {
+    return 'system';
+  }
+  return scheme;
+}
+
+/**
+ * @returns {"dark"|"light"}
+ */
+export function getColorScheme() {
+  const scheme = getColorSchemeFromStorage();
+  if (scheme === 'system') {
+    return getSystemColorScheme();
+  }
+  return scheme;
+}
+
+/**
+ * @param {"dark"|"light"|"system"} scheme
+ */
+export function setColorScheme(scheme) {
+  if (!['dark', 'light', 'system'].includes(scheme)) {
+    throw new Error(`Invalid color scheme: ${scheme}`);
+  }
+  localStorage.setItem(STORAGE_KEY, scheme);
+  colorSchemeChangeListeners.forEach((callback) => callback(scheme));
+  if (null !== registeredVuetify) {
+    registeredVuetify.theme.dark = getColorScheme() === "dark";
+  }
+}
diff --git a/web/src/main.js b/web/src/main.js
index 33d9c484..0d3831a9 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,10 +1,12 @@
+import { getColorScheme } from "@/lib/darkmode";
 import Vue from "vue";
+import VueApexCharts from "vue-apexcharts";
+import vueFilterPrettyBytes from "vue-filter-pretty-bytes";
 import Vuetify from "vuetify";
 import App from "./App.vue";
-import store from "./store";
+import { registerVuetifyTheme } from "./lib/darkmode";
 import router from "./routes";
-import VueApexCharts from "vue-apexcharts";
-import vueFilterPrettyBytes from "vue-filter-pretty-bytes";
+import store from "./store";
 
 Vue.config.productionTip = process.env.NODE_ENV == "production";
 
@@ -16,12 +18,14 @@ Vue.use(vueFilterPrettyBytes);
 Vue.component("Apexchart", VueApexCharts);
 
 const vue = new Vue({
-  vuetify: new Vuetify(),
+  vuetify: new Vuetify({theme: {dark: getColorScheme(),},}),
   store,
   router,
   render: (h) => h(App),
 });
 
+registerVuetifyTheme(vue.$vuetify);
+
 Vue.filter("capitalize", function (value) {
   if (!value) return "";
   value = value.toString();