feat: allow user to force colorSchema in frontmatter

Author: antfu

docs/custom/index.md

@@ -18,6 +18,8 @@ download: true
 highlighter: 'prism'
 # enable monaco editor, default to dev only
 monaco: 'dev'
+# force color schema for the slides (could be 'auto', 'light', or 'dark')
+colorSchema: 'auto'
 # information for your slides, can be a markdown string
 info: |
   ## Slidev

packages/client/internals/NavControls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, defineProps, ref } from 'vue'
-import { isDark, toggleDark } from '../logic/dark'
+import { isDark, toggleDark, isColorSchemaAuto } from '../logic/dark'
 import { hasNext, hasPrev, prev, next, total, isPresenter, currentPage, downloadPDF } from '../logic/nav'
 import { toggleOverview, showEditor, showInfoDialog, fullscreen, breakpoints, activeElement } from '../state'
 import { configs } from '../env'
@@ -46,7 +46,7 @@ const onMouseLeave = () => {
       <carbon:apps />
     </button>
 
-    <button class="icon-btn" title="Toggle dark mode" @click="toggleDark">
+    <button v-if="isColorSchemaAuto" class="icon-btn" title="Toggle dark mode" @click="toggleDark">
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </button>

packages/client/logic/dark.ts

@@ -1,7 +1,31 @@
-import { useDark, useToggle } from '@vueuse/core'
+import { isClient, useStorage, useToggle } from '@vueuse/core'
+import { computed, watch } from 'vue'
+import { configs } from '../env'
 
-export const isDark = useDark({
-  valueDark: 'dark',
-  valueLight: 'light',
+const _isDark = useStorage('slidev-color-schema', false)
+
+export const isColorSchemaAuto = computed(() => configs.colorSchema === 'auto')
+export const isDark = computed<boolean>({
+  get() {
+    return isColorSchemaAuto.value
+      ? _isDark.value
+      : configs.colorSchema === 'dark'
+  },
+  set(v) {
+    if (isColorSchemaAuto.value)
+      _isDark.value = v
+  },
 })
 export const toggleDark = useToggle(isDark)
+
+if (isClient) {
+  watch(
+    isDark,
+    (v) => {
+      const html = document.querySelector('html')!
+      html.classList.toggle('dark', v)
+      html.classList.toggle('light', !v)
+    },
+    { immediate: true },
+  )
+}

packages/parser/src/core.ts

@@ -143,12 +143,15 @@ export function parse(
     download: false,
     info: false,
     highlighter: 'prism',
+    colorSchema: 'auto',
   }
   const config: SlidevConfig = Object.assign(
     defaultConfig,
     headmatter.config || {},
     objectPick(headmatter, Object.keys(defaultConfig)),
   )
+  if (config.colorSchema !== 'dark' && config.colorSchema !== 'light')
+    config.colorSchema = 'auto'
 
   return {
     raw: markdown,

packages/types/src/types.ts

@@ -45,6 +45,10 @@ export interface SlidevConfig {
    * @default prism
    */
   highlighter: 'prism' | 'shiki'
+  /**
+   * @default 'auto'
+   */
+  colorSchema: 'dark' | 'light' | 'all' | 'auto'
 }
 
 export interface SlidevFeatureFlags {