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

feat(theme): allow forcing dark mode (#2974)

Browse Source
pull/2975/head
Divyansh Singh 2 years ago committed by GitHub
parent a18e5e48a4
commit 1fb5d228a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File

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

@ -426,7 +426,7 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-
### appearance ### appearance
- Type: `boolean | 'dark' | import('@vueuse/core').UseDarkOptions` - Type: `boolean | 'dark' | 'force-dark' | 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).

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

@ -69,16 +69,16 @@ export function initData(route: Route): VitePressData {
resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath) resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath)
) )
const isDark = site.value.appearance const appearance = site.value.appearance // fine with reactivity being lost here, config change triggers a restart
const isDark =
appearance === 'force-dark'
? ref(true)
: appearance
? useDark({ ? useDark({
storageKey: APPEARANCE_KEY, storageKey: APPEARANCE_KEY,
initialValue: () => initialValue: () =>
typeof site.value.appearance === 'string' typeof appearance === 'string' ? appearance : 'auto',
? site.value.appearance ...(typeof appearance === 'object' ? appearance : {})
: 'auto',
...(typeof site.value.appearance === 'object'
? site.value.appearance
: {})
}) })
: ref(false) : ref(false)

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

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

19
src/node/config.ts
Unescape View File

@ -255,24 +255,25 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] {
? userConfig.appearance.initialValue ?? 'auto' ? userConfig.appearance.initialValue ?? 'auto'
: 'auto' : 'auto'
head.push( head.push([
[
'script', 'script',
{ id: 'check-dark-light' }, { id: 'check-dark-mode' },
`;(() => { fallbackPreference === 'force-dark'
? `document.documentElement.classList.add('dark')`
: `;(() => {
const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}' const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (!preference || preference === 'auto' ? prefersDark : preference === 'dark') if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
})()` })()`
], ])
[ }
head.push([
'script', 'script',
{ id: 'check-mac-os' }, { id: 'check-mac-os' },
`document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))` `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`
] ])
)
}
return head return head
} }

1
src/node/siteConfig.ts
Unescape View File

@ -72,6 +72,7 @@ export interface UserConfig<ThemeConfig = any>
appearance?: appearance?:
| boolean | boolean
| 'dark' | 'dark'
| 'force-dark'
| (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

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

Write Preview
Loading…
Cancel
Save