From ab0fb2252ea1012b414c8143c0ff83886f069249 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 01:02:59 +0800
Subject: [PATCH] feat: add darkMode

---
 .../@core/components/ThemeSwitcher.vue        | 51 +++++++++++++------
 tailwind.config.js                            |  9 ++--
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/plugins/vuetify/@core/components/ThemeSwitcher.vue b/src/plugins/vuetify/@core/components/ThemeSwitcher.vue
index 41e7a677..8ed88a65 100644
--- a/src/plugins/vuetify/@core/components/ThemeSwitcher.vue
+++ b/src/plugins/vuetify/@core/components/ThemeSwitcher.vue
@@ -1,31 +1,52 @@
 <script setup lang="ts">
-import { useThemeConfig } from '@core/composable/useThemeConfig'
-import type { ThemeSwitcherTheme } from '@layouts/types'
+import { useThemeConfig } from '@core/composable/useThemeConfig';
+import type { ThemeSwitcherTheme } from '@layouts/types';
+import { onMounted } from 'vue';
 
 const props = defineProps<{
-  themes: ThemeSwitcherTheme[]
-}>()
+  themes: ThemeSwitcherTheme[];
+}>();
 
-const { theme } = useThemeConfig()
-const { state: currentThemeName, next: getNextThemeName, index: currentThemeIndex } = useCycleList(props.themes.map(t => t.name), { initialValue: theme.value })
+const { theme } = useThemeConfig();
+const {
+  state: currentThemeName,
+  next: getNextThemeName,
+  index: currentThemeIndex,
+} = useCycleList(
+  props.themes.map(t => t.name),
+  { initialValue: theme.value }
+);
 
 const changeTheme = () => {
-  theme.value = getNextThemeName()
-}
+  theme.value = getNextThemeName();
+};
 
+const changeMode = (val: 'dark' | 'light') => {
+  if (val === 'dark') {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+  } else {
+    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
+  }
+};
 // Update icon if theme is changed from other sources
-watch(theme, val => {
-  currentThemeName.value = val
-})
+watch(theme, (val: 'dark' | 'light') => {
+  currentThemeName.value = val;
+  changeMode(val);
+});
+
+onMounted(() => {
+  if (currentThemeName.value) {
+    changeMode(currentThemeName.value);
+  }
+});
 </script>
 
 <template>
   <IconBtn @click="changeTheme">
     <VIcon :icon="props.themes[currentThemeIndex].icon" />
-    <VTooltip
-      activator="parent"
-      open-delay="1000"
-    >
+    <VTooltip activator="parent" open-delay="1000">
       <span class="text-capitalize">{{ currentThemeName }}</span>
     </VTooltip>
   </IconBtn>
diff --git a/tailwind.config.js b/tailwind.config.js
index 454ca6ae..2ebbd11c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {
       colors: {
@@ -15,5 +13,4 @@ module.exports = {
     },
   },
   plugins: [],
-}
-
+};