chore: version 2.7.3 (#120)
* fix: 用户输入也被渲染的问题 (#117) * fix: 用户输入不转换 * feat: 基础深色模式适配 * feat: 主题模式跟随系统 * feat: 深色适配补漏 * chore: version 2.7.3main
Redon
2 years ago
committed by
GitHub
parent
abbdcf9c51
commit
cc91e95eed
@ -0,0 +1,43 @@
|
|||||||
|
import type { GlobalThemeOverrides } from 'naive-ui'
|
||||||
|
import { computed, watch } from 'vue'
|
||||||
|
import { darkTheme, useOsTheme } from 'naive-ui'
|
||||||
|
import { useAppStore } from '@/store'
|
||||||
|
|
||||||
|
export function useTheme() {
|
||||||
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
const OsTheme = useOsTheme()
|
||||||
|
|
||||||
|
const isDark = computed(() => {
|
||||||
|
if (appStore.theme === 'auto')
|
||||||
|
return OsTheme.value === 'dark'
|
||||||
|
else
|
||||||
|
return appStore.theme === 'dark'
|
||||||
|
})
|
||||||
|
|
||||||
|
const theme = computed(() => {
|
||||||
|
return isDark.value ? darkTheme : undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
const themeOverrides = computed<GlobalThemeOverrides>(() => {
|
||||||
|
if (isDark.value) {
|
||||||
|
return {
|
||||||
|
common: {},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {}
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isDark.value,
|
||||||
|
(dark) => {
|
||||||
|
if (dark)
|
||||||
|
document.documentElement.classList.add('dark')
|
||||||
|
else
|
||||||
|
document.documentElement.classList.remove('dark')
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
)
|
||||||
|
|
||||||
|
return { theme, themeOverrides }
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,3 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#app {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue