✨ add colorScheme prop to force VS Code color theme

Author: mickaelalvs

README.md

@@ -46,6 +46,17 @@ Both absolute and relative paths are supported. Relative paths are resolved from
 <Editor session="demo" defaultFolder=".." />
 ```
 
+## 🌗 Color scheme
+
+Force VS Code to use a specific color theme:
+
+```md
+<Editor session="demo" colorScheme="dark" />
+<Editor session="demo" colorScheme="light" />
+```
+
+If omitted, the color scheme automatically follows your Slidev presentation's `colorSchema` setting.
+
 ## 🔍 Zoom
 
 VS Code can appear too large inside a slide. Use the `zoom` prop to scale it down:
@@ -93,13 +104,14 @@ Per-component props override these values.
 
 | Prop            | Type      | Default      | Description                                                             |
 | --------------- | --------- | ------------ | ----------------------------------------------------------------------- |
-| `session`       | `string`  | auto         | Unique session identifier. Auto-generated from slide number if omitted. |
-| `defaultFolder` | `string`  | project root | Workspace folder to open. Absolute or relative to the Slidev root.      |
-| `height`        | `string`  | `100%`       | CSS height of the editor container.                                     |
-| `persist`       | `boolean` | `false`      | Keep the session alive when navigating away.                            |
-| `port`          | `number`  | auto         | Force a specific port for this session.                                 |
-| `startTimeout`  | `number`  | `30000`      | Max startup time in ms before the session is marked as failed.          |
-| `zoom`          | `number`  | `1`          | Scale factor for the VS Code UI (e.g. `0.8` for 80%).                   |
+| `session`       | `string`            | auto         | Unique session identifier. Auto-generated from slide number if omitted.          |
+| `defaultFolder` | `string`            | project root | Workspace folder to open. Absolute or relative to the Slidev root.               |
+| `colorScheme`   | `'dark' \| 'light'` | auto         | VS Code color theme. Defaults to Slidev's `colorSchema` if set, otherwise none.  |
+| `height`        | `string`            | `100%`       | CSS height of the editor container.                                               |
+| `persist`       | `boolean`           | `false`      | Keep the session alive when navigating away.                                      |
+| `port`          | `number`            | auto         | Force a specific port for this session.                                           |
+| `startTimeout`  | `number`            | `30000`      | Max startup time in ms before the session is marked as failed.                    |
+| `zoom`          | `number`            | `1`          | Scale factor for the VS Code UI (e.g. `0.8` for 80%).                            |
 
 ## ⚠️ Static exports
 

components/Editor.vue

@@ -8,6 +8,7 @@ import { REGISTRY_KEY } from '../setup/main'
 import type { EditorDeckConfig, EditorProps, SessionEntry } from '../types'
 
 const props = withDefaults(defineProps<EditorProps>(), {
+  colorScheme: undefined,
   defaultFolder: undefined,
   height: '100%',
   persist: false,
@@ -41,6 +42,12 @@ const isStarting = computed(
 const hasFailed = computed(() => session.value?.state === 'ERROR')
 
 const resolvedFolder = computed(() => props.defaultFolder ?? deckConfig.value?.defaultFolder ?? '')
+
+const slidevColorSchema = computed(() => {
+  const schema = ($slidev.configs as { colorSchema?: string }).colorSchema
+  return schema === 'light' || schema === 'dark' ? schema : undefined
+})
+const resolvedColorScheme = computed(() => props.colorScheme ?? slidevColorSchema.value)
 const resolvedZoom = computed(() => props.zoom ?? deckConfig.value?.zoom ?? 1)
 
 const resolvedTimeout = computed(() => props.startTimeout ?? deckConfig.value?.startTimeout)
@@ -53,6 +60,7 @@ async function start(): Promise<void> {
   try {
     const url = await requestStart(
       {
+        colorScheme: resolvedColorScheme.value,
         defaultFolder: resolvedFolder.value,
         defaultPort: deckConfig.value?.defaultPort,
         port: props.port,