feat: add plugin theme change

package.json

@@ -43,6 +43,7 @@
     "postcss": "^8.4.23",
     "prismjs": "^1.29.0",
     "tailwindcss": "^3.3.1",
+    "theme-change": "^2.5.0",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.45",

src/App.vue

@@ -2,7 +2,8 @@
 import { useTheme } from 'vuetify'
 import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig'
 import { hexToRgb } from '@/plugins/vuetify/@layouts/utils'
-
+import { themeChange } from 'theme-change'
+import { onMounted } from 'vue'
 const { syncInitialLoaderTheme, syncVuetifyThemeWithTheme: syncConfigThemeWithVuetifyTheme, isAppRtl } = useThemeConfig()
 
 const { global } = useTheme()
@@ -10,6 +11,10 @@ const { global } = useTheme()
 // ℹ️ Sync current theme with initial loader theme
 syncInitialLoaderTheme()
 syncConfigThemeWithVuetifyTheme()
+
+onMounted(()=> {
+  themeChange(false)
+})
 </script>
 
 <template>

src/assets/images/heart.svg

@@ -1 +1 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50" fill="red"><path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"/></svg>
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50" fill="red"><path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"/></svg>

src/components/ThemeSwitcher.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useThemeConfig } from '@core/composable/useThemeConfig';
+import type { ThemeSwitcherTheme } from '@layouts/types';
+import { onMounted, watch } from 'vue';
+
+const props = defineProps<{
+  themes: ThemeSwitcherTheme[];
+}>();
+
+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();  
+};
+
+const changeMode = (val: 'dark' | 'light' | 'system') => {
+  let value = val;
+  if (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    value = 'dark';
+  }
+  if (value === '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: 'dark' | 'light' | 'system') => {
+  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">
+      <span class="text-capitalize">{{ currentThemeName }}</span>
+    </VTooltip>
+  </IconBtn>
+</template>

src/layouts/components/NavbarThemeSwitcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ThemeSwitcherTheme } from '@layouts/types'
-
+import NewThemeSwitcher from '@/components/ThemeSwitcher.vue'
 const themes: ThemeSwitcherTheme[] = [
   {
     name: 'system',
@@ -18,5 +18,8 @@ const themes: ThemeSwitcherTheme[] = [
 </script>
 
 <template>
-  <ThemeSwitcher :themes="themes" />
+  <div>
+    <NewThemeSwitcher :themes="themes"/>
+    <ThemeSwitcher :themes="themes" />
+  </div>
 </template>

tailwind.config.js

@@ -23,14 +23,22 @@ module.exports = {
   daisyui: {
     themes: [
       {
-        light: {
-          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
-          // primary: "blue",
+        myTheme: {
+          info: "#666CFF",
+        }
+      },
+      {
+        light: {
+          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
+          info: "#666CFF",
+        }
+      },
+      {
+        dark: {
+          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
           info: "#666CFF",
         }
       },
-      // "light", 
-      "dark"
     ],
   }
 };