feat: add monaco light theme (vuejs#121)

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>

Author: baiwusanyu-c

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",

pnpm-lock.yaml

@@ -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
  */

src/Repl.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(() => {

src/monaco/Monaco.vue

@@ -42,6 +42,7 @@ const App = {
     return () =>
       h(Repl, {
         store,
+        theme: 'dark',
         editor: MonacoEditor as any as EditorComponentType,
         // layout: 'vertical',
         ssr: true,