diff --git a/docs/en/reference/site-config.md b/docs/en/reference/site-config.md index 70df8a31..1cfd273c 100644 --- a/docs/en/reference/site-config.md +++ b/docs/en/reference/site-config.md @@ -489,7 +489,7 @@ When set to `true`, the production app will be built in [MPA Mode](../guide/mpa- ### appearance -- Type: `boolean | 'dark' | 'force-dark' | 'force-auto' | import('@vueuse/core').UseDarkOptions` +- Type: `boolean | 'dark' | 'force-dark' | 'force-light' | 'force-auto' | import('@vueuse/core').UseDarkOptions` - Default: `true` Whether to enable dark mode (by adding the `.dark` class to the `` element). @@ -498,6 +498,7 @@ Whether to enable dark mode (by adding the `.dark` class to the `` element - 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 `'force-dark'`, the theme will always be dark and users will not be able to toggle it. +- If the option is set to `'force-light'`, the theme will always be light 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. diff --git a/src/client/app/data.ts b/src/client/app/data.ts index 72fb7831..1e4f304e 100644 --- a/src/client/app/data.ts +++ b/src/client/app/data.ts @@ -70,15 +70,17 @@ export function initData(route: Route): VitePressData { const isDark = appearance === 'force-dark' ? ref(true) - : appearance === 'force-auto' - ? usePreferredDark() - : appearance - ? useDark({ - storageKey: APPEARANCE_KEY, - initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'), - ...(typeof appearance === 'object' ? appearance : {}) - }) - : ref(false) + : appearance === 'force-light' + ? ref(false) + : appearance === 'force-auto' + ? usePreferredDark() + : appearance + ? useDark({ + storageKey: APPEARANCE_KEY, + initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'), + ...(typeof appearance === 'object' ? appearance : {}) + }) + : ref(false) const hashRef = ref(inBrowser ? location.hash : '') diff --git a/src/client/theme-default/components/VPNavBarAppearance.vue b/src/client/theme-default/components/VPNavBarAppearance.vue index 523e5b6b..351e50ba 100644 --- a/src/client/theme-default/components/VPNavBarAppearance.vue +++ b/src/client/theme-default/components/VPNavBarAppearance.vue @@ -10,6 +10,7 @@ const { site } = useData() v-if=" site.appearance && site.appearance !== 'force-dark' && + site.appearance !== 'force-light' && site.appearance !== 'force-auto' " class="VPNavBarAppearance" diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue index 3bc788bc..ab4dd6d7 100644 --- a/src/client/theme-default/components/VPNavBarExtra.vue +++ b/src/client/theme-default/components/VPNavBarExtra.vue @@ -45,6 +45,7 @@ const hasExtraContent = computed( v-if=" site.appearance && site.appearance !== 'force-dark' && + site.appearance !== 'force-light' && site.appearance !== 'force-auto' " class="group" diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue index 4f7d2640..0b4111d2 100644 --- a/src/client/theme-default/components/VPNavScreenAppearance.vue +++ b/src/client/theme-default/components/VPNavScreenAppearance.vue @@ -10,6 +10,7 @@ const { site, theme } = useData() v-if=" site.appearance && site.appearance !== 'force-dark' && + site.appearance !== 'force-light' && site.appearance !== 'force-auto' " class="VPNavScreenAppearance" diff --git a/src/node/config.ts b/src/node/config.ts index 49649590..8187d9ba 100644 --- a/src/node/config.ts +++ b/src/node/config.ts @@ -363,17 +363,19 @@ function resolveSiteDataHead(userConfig?: UserConfig): HeadConfig[] { { id: 'check-dark-mode' }, fallbackPreference === 'force-dark' ? `document.documentElement.classList.add('dark')` - : fallbackPreference === 'force-auto' - ? `;(() => { - if (window.matchMedia('(prefers-color-scheme: dark)').matches) - 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') - })()` + : fallbackPreference === 'force-light' + ? `` + : fallbackPreference === 'force-auto' + ? `;(() => { + if (window.matchMedia('(prefers-color-scheme: dark)').matches) + 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') + })()` ]) } diff --git a/src/node/siteConfig.ts b/src/node/siteConfig.ts index 210bc3d0..bd3ca74a 100644 --- a/src/node/siteConfig.ts +++ b/src/node/siteConfig.ts @@ -63,6 +63,7 @@ export interface UserConfig< | boolean | 'dark' | 'force-dark' + | 'force-light' | 'force-auto' | (Omit & { initialValue?: 'dark' }) lastUpdated?: boolean diff --git a/types/shared.d.ts b/types/shared.d.ts index bc8d28d4..bc606ba1 100644 --- a/types/shared.d.ts +++ b/types/shared.d.ts @@ -133,6 +133,7 @@ export interface SiteData { | boolean | 'dark' | 'force-dark' + | 'force-light' | 'force-auto' | (Omit & { initialValue?: 'dark' }) themeConfig: ThemeConfig