msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat: support `force-auto` as an option for appearance

Browse Source 
closes #3946
pull/3291/head
Divyansh Singh 5 months ago
parent e24899a073
commit 1e8bb48bc2
8 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File

4
docs/reference/site-config.md
Unescape View File

@ -489,7 +489,7 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-
### appearance ### appearance
- Type: `boolean | 'dark' | 'force-dark' | import('@vueuse/core').UseDarkOptions` - Type: `boolean | 'dark' | 'force-dark' | 'force-auto' | import('@vueuse/core').UseDarkOptions`
- Default: `true` - Default: `true`
Whether to enable dark mode (by adding the `.dark` class to the `<html>` element). Whether to enable dark mode (by adding the `.dark` class to the `<html>` element).
@ -497,6 +497,8 @@ Whether to enable dark mode (by adding the `.dark` class to the `<html>` element
- If the option is set to `true`, the default theme will be determined by the user's preferred color scheme. - If the option is set to `true`, the default theme will be determined by the user's preferred color scheme.
- If the option is set to `dark`, the theme will be dark by default, unless the user manually toggles it. - If the option is set to `dark`, the theme will be dark by default, unless the user manually toggles it.
- If the option is set to `false`, users will not be able to toggle the theme. - If the option is set to `false`, users will not be able to toggle the theme.
- If the option is set to `'force-dark'`, the theme will always be dark and users will not be able to toggle it.
- If the option is set to `'force-auto'`, the theme will always be determined by the user's preferred color scheme and users will not be able to toggle it.
This option injects an inline script that restores users settings from local storage using the `vitepress-theme-appearance` key. This ensures the `.dark` class is applied before the page is rendered to avoid flickering. This option injects an inline script that restores users settings from local storage using the `vitepress-theme-appearance` key. This ensures the `.dark` class is applied before the page is rendered to avoid flickering.

3
src/client/app/data.ts
Unescape View File

@ -82,8 +82,7 @@ export function initData(route: Route): VitePressData {
: appearance : appearance
? useDark({ ? useDark({
storageKey: APPEARANCE_KEY, storageKey: APPEARANCE_KEY,
initialValue: () => initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
typeof appearance === 'string' ? appearance : 'auto',
...(typeof appearance === 'object' ? appearance : {}) ...(typeof appearance === 'object' ? appearance : {})
}) })
: ref(false) : ref(false)

9
src/client/theme-default/components/VPNavBarAppearance.vue
Unescape View File

@ -6,7 +6,14 @@ const { site } = useData()
</script> </script>
<template> <template>
<div v-if="site.appearance && site.appearance !== 'force-dark'" class="VPNavBarAppearance"> <div
v-if="
site.appearance &&
site.appearance !== 'force-dark' &&
site.appearance !== 'force-auto'
"
class="VPNavBarAppearance"
>
<VPSwitchAppearance /> <VPSwitchAppearance />
</div> </div>
</template> </template>

20
src/client/theme-default/components/VPNavBarExtra.vue
Unescape View File

@ -19,8 +19,15 @@ const hasExtraContent = computed(
</script> </script>
<template> <template>
<VPFlyout v-if="hasExtraContent" class="VPNavBarExtra" label="extra navigation"> <VPFlyout
<div v-if="localeLinks.length && currentLang.label" class="group translations"> v-if="hasExtraContent"
class="VPNavBarExtra"
label="extra navigation"
>
<div
v-if="localeLinks.length && currentLang.label"
class="group translations"
>
<p class="trans-title">{{ currentLang.label }}</p> <p class="trans-title">{{ currentLang.label }}</p>
<template v-for="locale in localeLinks" :key="locale.link"> <template v-for="locale in localeLinks" :key="locale.link">
@ -28,7 +35,14 @@ const hasExtraContent = computed(
</template> </template>
</div> </div>
<div v-if="site.appearance && site.appearance !== 'force-dark'" class="group"> <div
v-if="
site.appearance &&
site.appearance !== 'force-dark' &&
site.appearance !== 'force-auto'
"
class="group"
>
<div class="item appearance"> <div class="item appearance">
<p class="label"> <p class="label">
{{ theme.darkModeSwitchLabel || 'Appearance' }} {{ theme.darkModeSwitchLabel || 'Appearance' }}

9
src/client/theme-default/components/VPNavScreenAppearance.vue
Unescape View File

@ -6,7 +6,14 @@ const { site, theme } = useData()
</script> </script>
<template> <template>
<div v-if="site.appearance && site.appearance !== 'force-dark'" class="VPNavScreenAppearance"> <div
v-if="
site.appearance &&
site.appearance !== 'force-dark' &&
site.appearance !== 'force-auto'
"
class="VPNavScreenAppearance"
>
<p class="text"> <p class="text">
{{ theme.darkModeSwitchLabel || 'Appearance' }} {{ theme.darkModeSwitchLabel || 'Appearance' }}
</p> </p>

17
src/node/config.ts
Unescape View File

@ -278,12 +278,17 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
{ id: 'check-dark-mode' }, { id: 'check-dark-mode' },
fallbackPreference === 'force-dark' fallbackPreference === 'force-dark'
? `document.documentElement.classList.add('dark')` ? `document.documentElement.classList.add('dark')`
: `;(() => { : fallbackPreference === 'force-auto'
const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}' ? `;(() => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches if (window.matchMedia('(prefers-color-scheme: dark)').matches)
if (!preference || preference === 'auto' ? prefersDark : preference === 'dark') document.documentElement.classList.add('dark')
document.documentElement.classList.add('dark') })()`
})()` : `;(() => {
const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
document.documentElement.classList.add('dark')
})()`
]) ])
} }

1
src/node/siteConfig.ts
Unescape View File

@ -77,6 +77,7 @@ export interface UserConfig<ThemeConfig = any>
| boolean | boolean
| 'dark' | 'dark'
| 'force-dark' | 'force-dark'
| 'force-auto'
| (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' }) | (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' })
lastUpdated?: boolean lastUpdated?: boolean
contentProps?: Record<string, any> contentProps?: Record<string, any>

1
types/shared.d.ts vendored
Unescape View File

@ -120,6 +120,7 @@ export interface SiteData<ThemeConfig = any> {
| boolean | boolean
| 'dark' | 'dark'
| 'force-dark' | 'force-dark'
| 'force-auto'
| (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' }) | (Omit<UseDarkOptions, 'initialValue'> & { initialValue?: 'dark' })
themeConfig: ThemeConfig themeConfig: ThemeConfig
scrollOffset: scrollOffset:

Write Preview
Loading…
Cancel
Save