feat: add darkMode

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>

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: [],
-}
-
+};