From 1e8bb48bc2891ea388bf0b9edd2f5b612bb1e85d Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sun, 9 Jun 2024 09:48:48 +0530 Subject: [PATCH] feat: support `force-auto` as an option for appearance closes #3946 --- docs/reference/site-config.md | 4 +++- src/client/app/data.ts | 3 +-- .../components/VPNavBarAppearance.vue | 9 ++++++++- .../components/VPNavBarExtra.vue | 20 ++++++++++++++++--- .../components/VPNavScreenAppearance.vue | 9 ++++++++- src/node/config.ts | 17 ++++++++++------ src/node/siteConfig.ts | 1 + types/shared.d.ts | 1 + 8 files changed, 50 insertions(+), 14 deletions(-) diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md index e11f42b9..64dee2a0 100644 --- a/docs/reference/site-config.md +++ b/docs/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' | import('@vueuse/core').UseDarkOptions` +- Type: `boolean | 'dark' | 'force-dark' | 'force-auto' | import('@vueuse/core').UseDarkOptions` - Default: `true` Whether to enable dark mode (by adding the `.dark` class to the `` element). @@ -497,6 +497,8 @@ Whether to enable dark mode (by adding the `.dark` class to the `` 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 `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-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 20fb1281..67fc0942 100644 --- a/src/client/app/data.ts +++ b/src/client/app/data.ts @@ -82,8 +82,7 @@ export function initData(route: Route): VitePressData { : appearance ? useDark({ storageKey: APPEARANCE_KEY, - initialValue: () => - typeof appearance === 'string' ? appearance : 'auto', + initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'), ...(typeof appearance === 'object' ? appearance : {}) }) : ref(false) diff --git a/src/client/theme-default/components/VPNavBarAppearance.vue b/src/client/theme-default/components/VPNavBarAppearance.vue index b538eb8a..523e5b6b 100644 --- a/src/client/theme-default/components/VPNavBarAppearance.vue +++ b/src/client/theme-default/components/VPNavBarAppearance.vue @@ -6,7 +6,14 @@ const { site } = useData() diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue index 0513d62b..988a814a 100644 --- a/src/client/theme-default/components/VPNavBarExtra.vue +++ b/src/client/theme-default/components/VPNavBarExtra.vue @@ -19,8 +19,15 @@ const hasExtraContent = computed(