console/frontend: rename "darkMode" injected dependency to "theme"

console/frontend/src/components/DarkModeSwitcher.vue

@@ -2,15 +2,15 @@
   <button
     type="button"
     class="rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-    @click="toggle()"
+    @click="toggleDark()"
   >
-    <MoonIcon v-if="!isDark()" class="h-5 w-5" />
-    <SunIcon v-if="isDark()" class="h-5 w-5" />
+    <MoonIcon v-if="!isDark" class="h-5 w-5" />
+    <SunIcon v-if="isDark" class="h-5 w-5" />
   </button>
 </template>
 
 <script setup>
 import { inject } from "vue";
 import { SunIcon, MoonIcon } from "@heroicons/vue/solid";
-const { isDark, toggle } = inject("darkMode");
+const { isDark, toggleDark } = inject("theme");
 </script>

console/frontend/src/components/ThemeProvider.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script setup>
-import { ref, provide, watch } from "vue";
+import { ref, provide, watch, readonly } from "vue";
 
 const isDark = ref(false);
-const toggleDarkMode = () => {
+const toggleDark = () => {
   isDark.value = !isDark.value;
   localStorage.setItem("color-theme", isDark.value ? "dark" : "light");
 };
@@ -31,10 +31,8 @@ watch(
   { immediate: true }
 );
 
-provide("darkMode", {
-  isDark() {
-    return isDark.value;
-  },
-  toggle: toggleDarkMode,
+provide("theme", {
+  isDark: readonly(isDark),
+  toggleDark,
 });
 </script>

console/frontend/src/views/HomePage/WidgetGraph.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="h-[300px]">
-      <v-chart :option="option" :theme="isDark() ? 'dark' : null" autoresize />
+      <v-chart :option="option" :theme="isDark ? 'dark' : null" autoresize />
     </div>
   </div>
 </template>
@@ -21,7 +21,7 @@ import { LineChart } from "echarts/charts";
 import { TooltipComponent, GridComponent } from "echarts/components";
 import VChart from "vue-echarts";
 import { dataColor, formatBps } from "../../utils";
-const { isDark } = inject("darkMode");
+const { isDark } = inject("theme");
 
 use([CanvasRenderer, LineChart, TooltipComponent, GridComponent]);
 

console/frontend/src/views/HomePage/WidgetTop.vue

@@ -2,7 +2,7 @@
   <div>
     <h1 class="font-semibold leading-relaxed">{{ title }}</h1>
     <div class="h-[200px]">
-      <v-chart :option="option" :theme="isDark() ? 'dark' : null" autoresize />
+      <v-chart :option="option" :theme="isDark ? 'dark' : null" autoresize />
     </div>
   </div>
 </template>
@@ -30,7 +30,7 @@ import { PieChart } from "echarts/charts";
 import { TooltipComponent, LegendComponent } from "echarts/components";
 import VChart from "vue-echarts";
 import { dataColor, dataColorGrey } from "../../utils";
-const { isDark } = inject("darkMode");
+const { isDark } = inject("theme");
 
 use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);
 

console/frontend/src/views/VisualizePage/DataGraph.vue

@@ -4,8 +4,8 @@
     :option="echartsOptions"
     :update-options="{ notMerge: true }"
     :loading="props.loading"
-    :loading-options="{ maskColor: isDark() ? '#000d' : '#fffd', text: '' }"
-    :theme="isDark() ? 'dark' : null"
+    :loading-options="{ maskColor: isDark ? '#000d' : '#fffd', text: '' }"
+    :theme="isDark ? 'dark' : null"
     autoresize
     @brush-end="updateTimeRange"
   />
@@ -34,7 +34,7 @@ const emit = defineEmits(["updateTimeRange"]);
 
 import { ref, watch, inject, computed, onMounted, nextTick } from "vue";
 import { formatBps, dataColor, dataColorGrey } from "@/utils";
-const { isDark } = inject("darkMode");
+const { isDark } = inject("theme");
 import { graphTypes } from "./constants";
 
 import { use, graphic } from "echarts/core";
@@ -102,7 +102,7 @@ const updateTimeRange = (evt) => {
 };
 
 watch(
-  () => [props.data, props.graphType, isDark()],
+  () => [props.data, props.graphType, isDark.value],
   ([data, graphType, isDark]) => {
     if (data.t === undefined) {
       return;

console/frontend/src/views/VisualizePage/DataTable.vue

@@ -68,7 +68,7 @@ defineEmits(["highlighted"]);
 
 import { ref, watch, inject } from "vue";
 import { formatBps, dataColor, dataColorGrey } from "@/utils";
-const { isDark } = inject("darkMode");
+const { isDark } = inject("theme");
 
 const table = ref({
   columns: [],
@@ -76,7 +76,7 @@ const table = ref({
 });
 
 watch(
-  () => [props.data, isDark()],
+  () => [props.data, isDark.value],
   ([data, isDark]) => {
     if (data.t === undefined) {
       return;