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(() => {
+  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,7 +17,8 @@
     return [{data: Array.from(notificationHistory.value)}]
   })
 
-  const chartOptions = {
+  const chartOptions = computed(() => {
+    return {
       chart: {
         type: 'bar',
         width: '100%',
@@ -29,9 +31,9 @@
             enabledOnSeries: undefined,
             top: 2,
             left: 1,
-        blur: 3,
+            blur: 2,
             color: '#000',
-        opacity: 0.45
+            opacity: darkModeEnabled.value ? 0.35 : 0.15
         },
         animations: {
             enabled: false,
@@ -39,6 +41,7 @@
             speed: 200,
         },
       },
+      colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
       plotOptions: {
         bar: {
           columnWidth: '80%'
@@ -46,18 +49,22 @@
       },
       yaxis: {
         min: 0,
+        labels: {
+          show: false,
+        }
       },
       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,10 +2,12 @@
   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')
     } else {

src/settings.js

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