diff --git a/package.json b/package.json
index b4ca60c7..3b1936f4 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "monaco-editor-core": "^0.38.0",
     "monaco-editor-textmate": "^4.0.0",
     "monaco-textmate": "^3.0.1",
-    "monaco-volar": "^0.3.1",
+    "monaco-volar": "^0.4.0",
     "onigasm": "^2.2.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ce4d4e2..d2a6a61f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,8 +54,8 @@ devDependencies:
     specifier: ^3.0.1
     version: 3.0.1(onigasm@2.2.5)
   monaco-volar:
-    specifier: ^0.3.1
-    version: 0.3.1(monaco-editor-core@0.38.0)(monaco-editor@0.39.0)
+    specifier: ^0.4.0
+    version: 0.4.0
   onigasm:
     specifier: ^2.2.5
     version: 2.2.5
@@ -1381,21 +1381,10 @@ packages:
       onigasm: 2.2.5
     dev: true
 
-  /monaco-volar@0.3.1(monaco-editor-core@0.38.0)(monaco-editor@0.39.0):
-    resolution: {integrity: sha512-ixUVyMUlEaay7vIcxL0sAdAiYCHjB3MwLxcvsnMzxz+5ettNpG+vxv54719Z8/yb2qA+W9ngNKAvF6K8d3nUIg==}
-    peerDependencies:
-      monaco-editor: '*'
-      monaco-editor-core: '*'
-    peerDependenciesMeta:
-      monaco-editor:
-        optional: true
-      monaco-editor-core:
-        optional: true
+  /monaco-volar@0.4.0:
+    resolution: {integrity: sha512-QnUg8cs17BOLacmuIki0Zri0tPQOHOw14LcQFKWigyIo2ChRJnO7grhxQsHOdyOL7vkHxSkMno84wIT8+sEv/A==}
     dependencies:
-      monaco-editor: 0.39.0
-      monaco-editor-core: 0.38.0
       onigasm: 2.2.5
-      vscode-uri: 3.0.7
     dev: true
 
   /mri@1.2.0:
diff --git a/src/Repl.vue b/src/Repl.vue
index dc17f941..221070aa 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -7,6 +7,7 @@ import type { EditorComponentType } from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
 
 export interface Props {
+  theme?: 'dark' | 'light'
   editor: EditorComponentType
   store?: Store
   autoResize?: boolean
@@ -28,6 +29,7 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  theme: 'light',
   store: () => new ReplStore(),
   autoResize: true,
   showCompileOutput: true,
@@ -75,7 +77,7 @@ provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
-
+provide('theme', toRef(props, 'theme'))
 /**
  * Reload the preview iframe
  */
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 2b0e75c1..677e8c2f 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -8,6 +8,7 @@ import {
   inject,
   watch,
   computed,
+  type Ref,
 } from 'vue'
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
@@ -41,6 +42,7 @@ initMonaco(store)
 
 const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
+const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
 onMounted(async () => {
   const theme = await loadTheme(monaco.editor)
   ready.value = true
@@ -55,7 +57,7 @@ onMounted(async () => {
       ? { value: props.value, language: lang.value }
       : { model: null }),
     fontSize: 13,
-    theme,
+    theme: replTheme.value === 'light' ? theme.light : theme.dark,
     readOnly: props.readonly,
     automaticLayout: true,
     scrollBeyondLastLine: false,
@@ -140,6 +142,13 @@ onMounted(async () => {
       file.selection = selection
     }
   })
+
+  // update theme
+  watch(replTheme, (n) => {
+    editorInstance.updateOptions({
+      theme: n === 'light' ? theme.light : theme.dark,
+    })
+  })
 })
 
 onBeforeUnmount(() => {
diff --git a/test/main.ts b/test/main.ts
index 2426a77c..c9215cab 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -42,6 +42,7 @@ const App = {
     return () =>
       h(Repl, {
         store,
+        theme: 'dark',
         editor: MonacoEditor as any as EditorComponentType,
         // layout: 'vertical',
         ssr: true,