chg: [front:theme] Better support of theme choice

src/App.vue

@@ -5,10 +5,13 @@ import TheAdminPanel from './components/TheAdminPanel.vue'
 import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
 import TheDahboard from './TheDahboard.vue'
 import { socketConnected } from "@/socket";
+import { darkModeEnabled } from "@/settings.js"
 
 
 onMounted(() => {
-  document.getElementsByTagName('body')[0].classList.add('dark')
+  if (darkModeEnabled.value) {
+    document.getElementsByTagName('body')[0].classList.add('dark')
+  }
 })
 
 </script>

src/components/TheLiveLogsActivityGraph.vue

@@ -1,6 +1,7 @@
 <script setup>
   import { ref, watch, computed } from "vue"
   import { notificationHistory, notificationHistoryConfig } from "@/socket";
+  import { darkModeEnabled } from "@/settings.js"
 
   const theChart = ref(null)
   const chartInitSeries = [
@@ -16,48 +17,54 @@
     return [{data: Array.from(notificationHistory.value)}]
   })
 
-  const chartOptions = {
+  const chartOptions = computed(() => {
-    chart: {
+    return {
-      type: 'bar',
+      chart: {
-      width: '100%',
+        type: 'bar',
-      height: 32,
+        width: '100%',
-      sparkline: {
+        height: 32,
-        enabled: true
+        sparkline: {
+          enabled: true
+        },
+        dropShadow: {
+            enabled: true,
+            enabledOnSeries: undefined,
+            top: 2,
+            left: 1,
+            blur: 2,
+            color: '#000',
+            opacity: darkModeEnabled.value ? 0.35 : 0.15
+        },
+        animations: {
+            enabled: false,
+            easing: 'easeinout',
+            speed: 200,
+        },
       },
-      dropShadow: {
+      colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
-        enabled: true,
+      plotOptions: {
-        enabledOnSeries: undefined,
+        bar: {
-        top: 2,
+          columnWidth: '80%'
-        left: 1,
+        }
-        blur: 3,
-        color: '#000',
-        opacity: 0.45
       },
-      animations: {
+      yaxis: {
+        min: 0,
+        labels: {
+          show: false,
+        }
+      },
+      tooltip: {
         enabled: false,
-        easing: 'easeinout',
-        speed: 200,
       },
-    },
+    }
-    plotOptions: {
+  })
-      bar: {
-        columnWidth: '80%'
-      }
-    },
-    yaxis: {
-      min: 0,
-    },
-    tooltip: {
-      enabled: false,
-    },
-  }
 
 </script>
 
 <template>
-  <div class="my-2 --ml-1 bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
+  <div class="my-2 --ml-1 bg-slate-50 dark:bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
     <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`">
-      <div class="text-xxs flex justify-between h-full items-center">
+      <div class="text-xxs flex justify-between h-full items-center text-slate-500 dark:text-slate-300">
         <span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
         <span class="-rotate-90 w-8 text-xs">–</span>
         <span class="-rotate-90 w-8 text-lg">–</span>

src/components/TheThemeButton.vue

@@ -2,14 +2,16 @@
   import { ref, watch } from 'vue'
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+  import { darkModeOn } from "@/settings.js"
 
-  const darkMode = ref(true)
+  const darkMode = ref(darkModeOn.value)
 
   watch(darkMode, (newValue) => {
+    darkModeOn.value = newValue
     if (newValue) {
-        document.getElementsByTagName('body')[0].classList.add('dark')
+      document.getElementsByTagName('body')[0].classList.add('dark')
-      } else {
+    } else {
-        document.getElementsByTagName('body')[0].classList.remove('dark')
+      document.getElementsByTagName('body')[0].classList.remove('dark')
     }
   })
 </script>

src/settings.js

@@ -0,0 +1,4 @@
+import { ref, computed } from 'vue'
+
+export const darkModeOn = ref(true)
+export const darkModeEnabled = computed(() => darkModeOn.value)