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

feat: add useDark

Browse Source
This commit is contained in:
thehrz 2023-07-15 17:18:52 +08:00
parent 83ae5fdfb5
commit d73ab2d0ef
No known key found for this signature in database
GPG Key ID: 683658B4CAC43158
11 changed files with 100 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -6,16 +6,6 @@
<link rel="apple-touch-icon" href="/pwa-192x192.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9" />
<meta name="msapplication-TileColor" content="#00aba9" />
<script>
(function () {
const prefersDark
= window.matchMedia
&& window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light'))
document.documentElement.classList.toggle('dark', true)
})()
</script>
</head>
<body class="font-sans">

4
src/App.vue
View File

@ -1,11 +1,13 @@
<script setup lang="ts">
const { isDark } = useDark()
useHead({
title: '合肥市南园学校19预科2班',
meta: [
{ name: 'description', content: '合肥市南园学校19预科2班纪念项目' },
{
name: 'theme-color',
content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
content: computed(() => isDark ? '#00aba9' : '#ffffff'),
},
],
link: [

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

@ -105,6 +105,7 @@ declare global {
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']
@ -148,7 +149,7 @@ 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('@vueuse/core')['useDark']
const useDark: typeof import('./composables/dark')['useDark']
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
const useDebounce: typeof import('@vueuse/core')['useDebounce']
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
@ -342,7 +343,6 @@ declare module 'vue' {
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@ -371,7 +371,6 @@ declare module 'vue' {
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@ -402,7 +401,6 @@ declare module 'vue' {
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
readonly toggleDark: UnwrapRef<typeof import('./composables/dark')['toggleDark']>
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@ -446,7 +444,7 @@ 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('@vueuse/core')['useDark']>
readonly useDark: UnwrapRef<typeof import('./composables/dark')['useDark']>
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
@ -634,7 +632,6 @@ declare module '@vue/runtime-core' {
readonly h: UnwrapRef<typeof import('vue')['h']>
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
readonly inject: UnwrapRef<typeof import('vue')['inject']>
readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@ -663,7 +660,6 @@ declare module '@vue/runtime-core' {
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
readonly provide: UnwrapRef<typeof import('vue')['provide']>
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@ -694,7 +690,6 @@ declare module '@vue/runtime-core' {
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
readonly toggleDark: UnwrapRef<typeof import('./composables/dark')['toggleDark']>
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@ -738,7 +733,7 @@ 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('@vueuse/core')['useDark']>
readonly useDark: UnwrapRef<typeof import('./composables/dark')['useDark']>
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>

1
src/components.d.ts vendored
View File

@ -8,7 +8,6 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ChangeLog: typeof import('./components/ChangeLog.vue')['default']
Footer: typeof import('./components/Footer.vue')['default']
Nav: typeof import('./components/Nav.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

6
src/components/Nav.vue
View File

@ -19,10 +19,12 @@ const pages = [
]
const { t } = useI18n()
const { isDark, toggleDark } = useDark()
</script>
<template>
<v-app-bar class="!static">
<v-app-bar app class="!static">
<img class="mx-3 w-40px" src="/favicon.svg">
<router-link to="/">
@ -50,7 +52,7 @@ const { t } = useI18n()
</template>
<v-list :lines="false" density="compact" nav>
<v-list-item v-for="(page, index) in pages" :key="index" color="primary" :value="index" :to="page.page">
<v-list-item v-for="(page, index) in pages" :key="index" :value="index" :to="page.page">
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>

17
src/composables/dark.ts
View File

@ -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 }
}

2
src/layouts/404.vue
View File

@ -4,7 +4,7 @@ const { t } = useI18n()
</script>
<template>
<main class="p-x4 p-y10 text-center text-teal-700 dark:text-gray-200">
<main class="p-x4 p-y10 text-center">
<div class="text-4xl">
<div class="i-carbon-warning inline-block" />
</div>

26
src/layouts/default.vue
View File

@ -1,17 +1,15 @@
<template>
<v-theme-provider :theme="isDark ? 'dark' : 'light'">
<v-layout class="text-gray-700 dark:text-gray-200 flex flex-col">
<Nav />
<v-app class="flex flex-col">
<Nav />
<v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
<router-view v-slot="{ Component }">
<transition name="fade">
<div class="prose max-w-110ch m-auto p-3">
<component :is="Component" />
</div>
</transition>
</router-view>
</v-main>
</v-layout>
</v-theme-provider>
<v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
<router-view v-slot="{ Component }">
<transition name="fade">
<div class="prose max-w-110ch m-auto p-3">
<component :is="Component" />
</div>
</transition>
</router-view>
</v-main>
</v-app>
</template>

26
src/layouts/index.vue
View File

@ -1,17 +1,15 @@
<template>
<v-theme-provider :theme="isDark ? 'dark' : 'light'">
<v-app class="text-gray-700 dark:text-gray-200 flex flex-col">
<Nav />
<v-app class="flex flex-col">
<Nav />
<div style="--v-layout-top: 25px" class="m-auto">
<router-view v-slot="{ Component }">
<transition name="fade">
<div class="prose max-w-110ch m-auto">
<component :is="Component" />
</div>
</transition>
</router-view>
</div>
</v-app>
</v-theme-provider>
<div style="--v-layout-top: 25px" class="m-auto">
<router-view v-slot="{ Component }">
<transition name="fade">
<div class="prose max-w-110ch m-auto">
<component :is="Component" />
</div>
</transition>
</router-view>
</div>
</v-app>
</template>

51
src/plugins/vuetify.ts
View File

@ -4,7 +4,58 @@ import { aliases, mdi } from 'vuetify/iconsets/mdi'
import '@mdi/font/css/materialdesignicons.css'
const light = {
dark: false,
colors: {
'primary': '#9155FD',
'secondary': '#8A8D93',
'surface': '#F4F5FA',
'background': '#F4F5FA',
'success': '#56CA00',
'info': '#16B1FF',
'warning': '#FFB400',
'error': '#FF4C51',
'on-primary': '#FFFFFF',
'on-success': '#FFFFFF',
'on-warning': '#FFFFFF',
'on-secondary': '#FFFFFF',
'on-background': '#3A3541',
'on-surface': '#3A3541',
},
}
const dark = {
dark: true,
colors: {
'primary': '#9155FD',
'secondary': '#8A8D93',
'surface': '#212121',
'background': '#121212',
'success': '#56CA00',
'info': '#16B1FF',
'warning': '#FFB400',
'error': '#FF4C51',
'on-primary': '#FFFFFF',
'on-success': '#FFFFFF',
'on-warning': '#FFFFFF',
'on-secondary': '#FFFFFF',
'on-background': '#FFFFFF',
'on-surface': '#FFFFFF',
},
}
export default createVuetify({
theme: {
defaultTheme: 'light',
themes: {
light,
dark,
},
},
icons: {
defaultSet: 'mdi',
aliases,

5
src/styles/main.css
View File

@ -11,11 +11,6 @@ body,
font-family: "LXGW WenKai Mono", sans-serif;
}
html.dark {
background: #121212;
color-scheme: dark;
}
#nprogress {
pointer-events: none;
}