From cb0f8411525131c8de5b8aa750d7fa2c044c1b16 Mon Sep 17 00:00:00 2001 From: "Alisa | Side.one" Date: Thu, 4 May 2023 23:24:07 +0800 Subject: [PATCH] feat: add plugin theme change --- package.json | 1 + src/App.vue | 7 +- src/assets/images/heart.svg | 2 +- src/components/ThemeSwitcher.vue | 57 + .../components/NavbarThemeSwitcher.vue | 7 +- tailwind.config.js | 18 +- yarn.lock | 4788 +---------------- 7 files changed, 264 insertions(+), 4616 deletions(-) create mode 100644 src/components/ThemeSwitcher.vue diff --git a/package.json b/package.json index 0eed31f1..ef876196 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 2f4374dd..b7c44406 100644 --- a/src/App.vue +++ b/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) +})