Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,7 +2,7 @@
 import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
-import { espresso } from 'thememirror';
+import {EditorView} from "@codemirror/view"
 import {xml} from '@codemirror/lang-xml'
 import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
@@ -18,6 +18,20 @@ const props= defineProps({
     },
 })
 
+let baseTheme = EditorView.baseTheme({
+  ".cm-o-replacement": {
+    display: "inline-block",
+    width: ".5em",
+    height: ".5em",
+    borderRadius: ".25em"
+  },
+  "&light .cm-o-replacement": {
+    backgroundColor: "#04c"
+  },
+  "&dark .cm-o-replacement": {
+    backgroundColor: "#5bf"
+  }
+})
 const emit = defineEmits(
   [
     'update:updatedCode'
@@ -37,7 +51,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return espresso;
+    return baseTheme;
 }
 
 function isDarkModeSet(){