From d73ab2d0ef5b2c696ffb587498384d00b296c136 Mon Sep 17 00:00:00 2001 From: thehrz Date: Sat, 15 Jul 2023 17:18:52 +0800 Subject: [PATCH] feat: add useDark --- index.html | 10 -------- src/App.vue | 4 +++- src/auto-imports.d.ts | 13 ++++------- src/components.d.ts | 1 - src/components/Nav.vue | 6 +++-- src/composables/dark.ts | 17 ++++++++++---- src/layouts/404.vue | 2 +- src/layouts/default.vue | 26 ++++++++++----------- src/layouts/index.vue | 26 ++++++++++----------- src/plugins/vuetify.ts | 51 +++++++++++++++++++++++++++++++++++++++++ src/styles/main.css | 5 ---- 11 files changed, 100 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index f4696fe..8669991 100644 --- a/index.html +++ b/index.html @@ -6,16 +6,6 @@ - diff --git a/src/App.vue b/src/App.vue index 9c7d943..9594e7e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,13 @@ - + {{ page.title }} diff --git a/src/composables/dark.ts b/src/composables/dark.ts index 5ad5936..5be16ad 100644 --- a/src/composables/dark.ts +++ b/src/composables/dark.ts @@ -1,4 +1,13 @@ -// these APIs are auto-imported from @vueuse/core -export const isDark = useDark() -export const toggleDark = useToggle(isDark) -export const preferredDark = usePreferredDark() +import { useTheme } from 'vuetify' + +export function useDark() { + const theme = useTheme() + + const isDark = theme.global.current.value.dark + + const toggleDark = () => theme.global.name.value = theme.global.current.value.dark + ? 'light' + : 'dark' + + return { isDark, toggleDark } +} diff --git a/src/layouts/404.vue b/src/layouts/404.vue index e10cde5..2d7d059 100644 --- a/src/layouts/404.vue +++ b/src/layouts/404.vue @@ -4,7 +4,7 @@ const { t } = useI18n()