set the monaco editor theme globally

It is impossible, by the feature of monaco editor, to set different themes for different instances of monaco editor.
simonsobs · Sep 5, 2023 · 838bbbe · 838bbbe
1 parent fd82fbb
commit 838bbbe
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 40 deletions.
diff --git a/src/components/History/RunCard.vue b/src/components/History/RunCard.vue
@@ -2,8 +2,6 @@
 import { ref, toRefs, watch } from "vue";
 import * as monaco from "monaco-editor";
 
-import { useDarkMode } from "@/utils/color-theme";
-
 type Run = {
   runNo: number;
   state?: string | null | undefined;
@@ -19,8 +17,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const { isDark } = useDarkMode();
-
 const { run } = toRefs(props);
 
 const stateChipColor = ref({
@@ -85,21 +81,11 @@ watch(
       selectionHighlight: false,
       occurrencesHighlight: false,
       renderLineHighlight: "none",
-      theme: isDark.value ? "nextline-dark" : "nextline-light",
     });
     val.style.height = `${editor.getContentHeight()}px`;
   },
   { immediate: true }
 );
-watch(
-  isDark,
-  (val) => {
-    monaco.editor.setTheme(
-      val ? "nextline-dark" : "nextline-light"
-    );
-  },
-  { immediate: true }
-);
 </script>
 
 <template>

diff --git a/src/components/main/trace-frame/code-col/monaco-editor.ts b/src/components/main/trace-frame/code-col/monaco-editor.ts
@@ -9,18 +9,13 @@ import {
 import type { Ref, MaybeRefOrGetter } from "vue";
 import * as monaco from "monaco-editor";
 
-import { useDarkMode } from "@/utils/color-theme";
-
 export function useMonacoEditor(
   element: MaybeRefOrGetter<HTMLElement | undefined>,
   source: Ref<string>
 ) {
-  const { isDark } = useDarkMode();
+  // const { isDark } = useDarkMode();
   const model = monaco.editor.createModel(toValue(source), "python");
   const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>();
-  const theme = computed(() =>
-    toValue(isDark) ? "nextline-dark" : "nextline-light"
-  );
 
   onMounted(() => {
     const ele = toValue(element);
@@ -46,17 +41,8 @@ export function useMonacoEditor(
       selectionHighlight: false,
       occurrencesHighlight: false,
       renderLineHighlight: "none",
-      theme: toValue(theme),
     });
   });
-
-  // Note: All instances of Monaco Editor share the same theme.
-  //       It is not possible to have different themes for different instances.
-  //       https://github.com/Microsoft/monaco-editor/issues/338
-
-  watchEffect(() => {
-    monaco.editor.setTheme(toValue(theme));
-  });
 
   return { editor, model };
 }

diff --git a/src/components/main/trace-frame/script-editor/monaco-editor.ts b/src/components/main/trace-frame/script-editor/monaco-editor.ts
@@ -1,11 +1,9 @@
-import { ref, watch, watchEffect, toValue, onMounted } from "vue";
+import { ref, watch, toValue, onMounted } from "vue";
 import type { Ref, MaybeRefOrGetter } from "vue";
 import { watchDebounced } from "@vueuse/core";
 
 import * as monaco from "monaco-editor";
 
-import { useDarkMode } from "@/utils/color-theme";
-
 export function useMonacoEditor(
   element: MaybeRefOrGetter<HTMLElement | undefined>,
   source: Ref<string>
@@ -14,7 +12,6 @@ export function useMonacoEditor(
   useUpdateSource(model, source);
 
   const editor = ref<monaco.editor.IStandaloneCodeEditor>();
-  const { isDark } = useDarkMode();
 
   onMounted(() => {
     const ele = toValue(element);
@@ -37,16 +34,9 @@ export function useMonacoEditor(
       selectionHighlight: true,
       occurrencesHighlight: true,
       renderLineHighlight: "line",
-      theme: isDark.value ? "nextline-dark" : "nextline-light",
     });
   });
 
-  watchEffect(() => {
-    monaco.editor.setTheme(
-      toValue(isDark) ? "nextline-dark" : "nextline-light"
-    );
-  });
-
   return { editor, model };
 }
 

diff --git a/src/utils/color-theme/color-theme.ts b/src/utils/color-theme/color-theme.ts
@@ -2,6 +2,7 @@ import { ref, computed, watchEffect, toValue } from "vue";
 import type { MaybeRefOrGetter, UnwrapRef } from "vue";
 import { useTheme } from "vuetify";
 import type { ThemeDefinition } from "vuetify";
+import * as monaco from "monaco-editor";
 import type { OmitIndexSignature } from "type-fest";
 
 import { useDynamicColors } from "@/utils/dynamic-color";
@@ -37,6 +38,7 @@ export function useColorTheme() {
 
   useDarkModeOnVuetify();
   useMonacoEditorTheme();
+  useDarkModeOnMonacoEditor();
 }
 
 function useDarkModeOnVuetify() {
@@ -48,6 +50,19 @@ function useDarkModeOnVuetify() {
   });
 }
 
+function useDarkModeOnMonacoEditor() {
+  // Note: All instances of Monaco Editor share the same theme.
+  //       It is not possible to have different themes for different instances.
+  //       https://github.com/Microsoft/monaco-editor/issues/338
+  const { isDark } = useDarkMode();
+  const themeName = computed(() =>
+    isDark.value ? "nextline-dark" : "nextline-light"
+  );
+  watchEffect(() => {
+    monaco.editor.setTheme(themeName.value);
+  });
+}
+
 function useDynamicColorsOnVuetify(
   dynamicColors: MaybeRefOrGetter<DynamicColors>,
   isDark: MaybeRefOrGetter<boolean>