Implement dark mode

spq · Feb 2, 2024 · 6943791 · 6943791
1 parent f526ab0
commit 6943791
Show file tree

Hide file tree

Showing 6 changed files with 228 additions and 73 deletions.
diff --git 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
@@ -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
@@ -189,18 +189,37 @@
           <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";
 
 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
@@ -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>