19yuke2-project/19yuke2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: update dark mode

Browse Source
This commit is contained in:
thehrz 2023-07-21 18:07:21 +08:00
parent 0123abc3f0
commit fc32099b38
Signed by: thehrz
GPG Key ID: C84CBCE7D5F88855
3 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/auto-imports.d.ts vendored
View File

@ -43,7 +43,6 @@ declare global {
const h: typeof import('vue')['h']
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
const inject: typeof import('vue')['inject']
const isDark: typeof import('./composables/dark')['isDark']
const isDefined: typeof import('@vueuse/core')['isDefined']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
@ -72,7 +71,6 @@ declare global {
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
const preferredDark: typeof import('./composables/dark')['preferredDark']
const provide: typeof import('vue')['provide']
const reactify: typeof import('@vueuse/core')['reactify']
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
@ -88,7 +86,6 @@ declare global {
const refThrottled: typeof import('@vueuse/core')['refThrottled']
const refWithControl: typeof import('@vueuse/core')['refWithControl']
const resolveComponent: typeof import('vue')['resolveComponent']
const resolveDirective: typeof import('vue')['resolveDirective']
const resolveRef: typeof import('@vueuse/core')['resolveRef']
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
const shallowReactive: typeof import('vue')['shallowReactive']
@ -104,8 +101,6 @@ declare global {
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const toggleDark: typeof import('./composables/dark')['toggleDark']
const toggleTheme: typeof import('./composables/dark')['toggleTheme']
const triggerRef: typeof import('vue')['triggerRef']
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@ -149,7 +144,8 @@ declare global {
const useCssVars: typeof import('vue')['useCssVars']
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
const useCycleList: typeof import('@vueuse/core')['useCycleList']
const useDark: typeof import('./composables/dark')['useDark']
const useDark: typeof import('@vueuse/core')['useDark']
const useDarkMode: typeof import('./composables/dark')['useDarkMode']
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
const useDebounce: typeof import('@vueuse/core')['useDebounce']
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
@ -444,7 +440,8 @@ declare module 'vue' {
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
readonly useDark: UnwrapRef<typeof import('./composables/dark')['useDark']>
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
readonly useDarkMode: UnwrapRef<typeof import('./composables/dark')['useDarkMode']>
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
@ -733,7 +730,8 @@ declare module '@vue/runtime-core' {
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
readonly useDark: UnwrapRef<typeof import('./composables/dark')['useDark']>
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
readonly useDarkMode: UnwrapRef<typeof import('./composables/dark')['useDarkMode']>
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>

4
src/components/Nav.vue
View File

@ -20,7 +20,7 @@ const pages = [
const { t } = useI18n()
const { isDark, toggleDark } = useDark()
const { isDark, toggleDark } = useDarkMode()
</script>
<template>
@ -42,7 +42,7 @@ const { isDark, toggleDark } = useDark()
<v-spacer />
<v-btn
class="mx-2" :title="t('button.toggle_dark')" :icon="isDark ? 'mdi-weather-night' : 'mdi-weather-sunny'"
class="mx-2" :title="t('button.toggle_dark')" :icon="isDark() ? 'mdi-weather-night' : 'mdi-weather-sunny'"
@click="toggleDark()"
/>

4
src/composables/dark.ts
View File

@ -1,9 +1,9 @@
import { useTheme } from 'vuetify'
export function useDark() {
export function useDarkMode() {
const theme = useTheme()
const isDark = theme.global.current.value.dark
const isDark = () => theme.global.current.value.dark
const toggleDark = () => theme.global.name.value = theme.global.current.value.dark
? 'light'