diasbling colorScheme

[Mister-Hope]

Is there a way to force colorScheme to light/dark?

This means the colorScheme is always applied correctly, shortcut D won't change color scheme and there is no color scheme UI in the bottom left corner.

I tried searching the docs but found nothing?

[stanleys12]

Yes. Set colorSchema to light or dark in the headmatter of your first slide:

---
colorSchema: dark
---

The default is auto. Any other valid value locks the mode.

When it is locked:

• isDark reads straight from the config and ignores the user's OS preference and the saved browser choice:

  slidev/packages/client/logic/dark.ts

  Lines 8 to 16 in 73053ab

  	export const isColorSchemaConfigured = computed(() => configs.colorSchema !== 'auto')
  	export const isDark = computed<boolean>({
  	get() {
  	if (isColorSchemaConfigured.value)
  	return configs.colorSchema === 'dark'
  	return store.value === 'auto'
  	? preferredDark.value
  	: store.value === 'dark'
  	},

• The setter returns early, so the D shortcut (which calls toggleDark) does nothing:

  slidev/packages/client/logic/dark.ts

  Lines 17 to 19 in 73053ab

  	set(v) {
  	if (isColorSchemaConfigured.value)
  	return

• The toggle button in the bottom left nav controls is only rendered when the schema is not configured:

  slidev/packages/client/internals/NavControls.vue

  Line 80 in 73053ab

  v-if="!isColorSchemaConfigured"

• The same applies to the toggle on the overview page, and the dark option in the export dialog is disabled.

It is listed in the headmatter example in the docs:

slidev/docs/custom/index.md

Line 76 in 73053ab

colorSchema: auto

One caveat: if your theme declares a single colorSchema in its package.json and you leave yours as auto, the theme's value is used. That also locks the mode. If you set a different value than the theme supports, you get a warning (

slidev/packages/parser/src/config.ts

Lines 139 to 144 in 73053ab

	const themeColorSchema = ['light', 'dark'].includes(themeMeta.colorSchema || '')
	? themeMeta.colorSchema as 'light' | 'dark'
	: undefined
	if (themeColorSchema && config.colorSchema !== themeColorSchema)
	warn(`Color schema "${config.colorSchema}" does not supported by the theme`)

).

(I looked this up in the code with help from an AI assistant; the links are to the lines I checked.)