fix: export in dark mode

slidevjs · May 21, 2021 · 3015e67 · 3015e67
1 parent d1216e1
commit 3015e67
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, defineProps, ref, shallowRef } from 'vue'
-import { isDark, toggleDark, isColorSchemaAuto } from '../logic/dark'
+import { isDark, toggleDark, isColorSchemaConfigured } from '../logic/dark'
 import { hasNext, hasPrev, prev, next, total, isPresenter, currentPage, downloadPDF, isEmbedded } from '../logic/nav'
 import { toggleOverview, showEditor, showInfoDialog, fullscreen, breakpoints, activeElement } from '../state'
 import { configs } from '../env'
@@ -49,7 +49,7 @@ if (__DEV__)
       <carbon:apps />
     </button>
 
-    <button v-if="isColorSchemaAuto" class="icon-btn" title="Toggle dark mode" @click="toggleDark">
+    <button v-if="!isColorSchemaConfigured" class="icon-btn" title="Toggle dark mode" @click="toggleDark">
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </button>

diff --git a/packages/client/logic/dark.ts b/packages/client/logic/dark.ts
@@ -1,21 +1,28 @@
-import { isClient, useStorage, useToggle } from '@vueuse/core'
+import { isClient, usePreferredDark, useStorage, useToggle } from '@vueuse/core'
 import { computed, watch } from 'vue'
 import { configs } from '../env'
 
-const _isDark = useStorage('slidev-color-schema', false)
+const preferredDark = usePreferredDark()
+const store = useStorage('slidev-color-schema', 'auto')
 
-export const isColorSchemaAuto = computed(() => configs.colorSchema === 'auto')
+export const isColorSchemaConfigured = computed(() => configs.colorSchema !== 'auto')
 export const isDark = computed<boolean>({
   get() {
-    return isColorSchemaAuto.value
-      ? _isDark.value
-      : configs.colorSchema === 'dark'
+    if (isColorSchemaConfigured.value)
+      return configs.colorSchema === 'dark'
+    return store.value === 'auto'
+      ? preferredDark.value
+      : store.value === 'dark'
   },
   set(v) {
-    if (isColorSchemaAuto.value)
-      _isDark.value = v
+    if (isColorSchemaConfigured.value)
+      return
+    store.value = v === preferredDark.value
+      ? 'auto'
+      : v ? 'dark' : 'light'
   },
 })
+
 export const toggleDark = useToggle(isDark)
 
 if (isClient) {

diff --git a/packages/slidev/node/export.ts b/packages/slidev/node/export.ts
@@ -87,8 +87,6 @@ export async function exportSlides({
   async function go(no: number) {
     progress.update(no)
 
-    if (dark)
-      await page.emulateMedia({ colorScheme: 'dark' })
     const url = routerMode === 'hash'
       ? `http://localhost:${port}/#${base}${no}?print`
       : `http://localhost:${port}${base}${no}?print`
@@ -97,7 +95,7 @@ export async function exportSlides({
     })
     await page.waitForTimeout(timeout)
     await page.waitForLoadState('networkidle')
-    await page.emulateMedia({ media: 'screen' })
+    await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
   }
 
   const pages = parseRangeString(total, range)

diff --git a/packages/slidev/node/plugins/config.ts b/packages/slidev/node/plugins/config.ts
@@ -38,6 +38,8 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
             'mermaid/dist/mermaid.min',
           ],
           exclude: [
+            '@vueuse/core',
+            '@vueuse/shared',
             'vue-demi',
             'mermaid',
           ],