feat: chart theme switch

src/components/ThemeSwitcher.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { onMounted, ref } from 'vue';
-
-const props = defineProps<{
-  themes: {
-    name: string;
-    icon: string;
-  }[];
-}>();
-
-const themeMap = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
-
-const theme = ref(window.localStorage.getItem('theme') || 'dark');
-
-const changeMode = () => {
-  let value = 'dark';
-  if (theme.value === 'dark') {
-    value = 'light';
-  }
-  if (
-    theme.value === 'system' &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    value = 'dark';
-  }
-  if (value === 'light') {
-    document.documentElement.classList.add('light');
-    document.documentElement.classList.remove('dark');
-  } else {
-    document.documentElement.classList.add('dark');
-    document.documentElement.classList.remove('light');
-  }
-  document.documentElement.setAttribute('data-theme', value);
-  window.localStorage.setItem('theme', value);
-};
-
-
-onMounted(() => {
-
-});
-</script>
-
-<template>
-  <div class="tooltip tooltip-bottom delay-1000">
-    <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode">
-      <Icon :icon="props.themes[theme].icon" class="text-2xl" />
-    </button>
-  </div>
-</template>

src/components/charts/DonutChart.vue

@@ -1,21 +1,30 @@
 <script lang="ts" setup>
 import ApexCharts from 'vue3-apexcharts';
 import { computed } from 'vue';
+import { useBaseStore } from '@/stores';
 import { getDonutChartConfig } from './apexChartConfig';
 
 const props = defineProps(['series', 'labels']);
 
-const expenseRationChartConfig = computed(() =>
-  getDonutChartConfig(window.localStorage.getItem('theme') || 'dark', props.labels)
-);
+const baseStore = useBaseStore();
+
+const expenseRationChartConfig = computed(() => {
+    const theme = baseStore.theme;
+    getDonutChartConfig(theme, props.labels);
+});
 </script>
 
 <template>
-  <ApexCharts type="donut" height="410" :options="expenseRationChartConfig" :series="series" />
+    <ApexCharts
+        type="donut"
+        height="410"
+        :options="expenseRationChartConfig"
+        :series="series"
+    />
 </template>
 
 <script lang="ts">
 export default {
-  name: 'DonetChart',
+    name: 'DonetChart',
 };
 </script>

src/components/charts/PriceMarketChart.vue

@@ -3,40 +3,56 @@ import ApexCharts from 'vue3-apexcharts';
 import { getMarketPriceChartConfig } from './apexChartConfig';
 import { useIndexModule } from '@/modules/[chain]/indexStore';
 import { computed, ref } from '@vue/reactivity';
+import { useBaseStore } from '@/stores';
 
 const store = useIndexModule();
+const baseStore = useBaseStore();
 const chartConfig = computed(() => {
-  const labels = store.marketData.prices.map((item: any) => item[0]);
-  return getMarketPriceChartConfig(window.localStorage.getItem('theme') || 'dark', labels);
+    const theme = baseStore.theme;
+    const labels = store.marketData.prices.map((item: any) => item[0]);
+    return getMarketPriceChartConfig(theme, labels);
 });
 const kind = ref('price');
 const series = computed(() => {
-  return [
-    {
-      name: 'Price',
-      data:
-        kind.value === 'price'
-          ? store.marketData.prices.map((item: any) => item[1])
-          : store.marketData.total_volumes.map((item: any) => item[1]),
-    },
-  ];
+    return [
+        {
+            name: 'Price',
+            data:
+                kind.value === 'price'
+                    ? store.marketData.prices.map((item: any) => item[1])
+                    : store.marketData.total_volumes.map(
+                          (item: any) => item[1]
+                      ),
+        },
+    ];
 });
 
 function changeChart(type: string) {
-  kind.value = type;
+    kind.value = type;
 }
 </script>
 
 <template>
-  <div class="tabs tabs-boxed bg-transparent justify-end">
-    <a class="tab text-xs mr-2 text-gray-400 uppercase" :class="{ 'tab-active': kind === 'price' }"
-      @click="changeChart('price')">
-      Price
-    </a>
-    <a class="tab text-xs text-gray-400 uppercase" :class="{ 'tab-active': kind === 'volume' }"
-      @click="changeChart('volume')">
-      Volume
-    </a>
-  </div>
-  <ApexCharts type="area" height="230" :options="chartConfig" :series="series" />
+    <div class="tabs tabs-boxed bg-transparent justify-end">
+        <a
+            class="tab text-xs mr-2 text-gray-400 uppercase"
+            :class="{ 'tab-active': kind === 'price' }"
+            @click="changeChart('price')"
+        >
+            Price
+        </a>
+        <a
+            class="tab text-xs text-gray-400 uppercase"
+            :class="{ 'tab-active': kind === 'volume' }"
+            @click="changeChart('volume')"
+        >
+            Volume
+        </a>
+    </div>
+    <ApexCharts
+        type="area"
+        height="230"
+        :options="chartConfig"
+        :series="series"
+    />
 </template>