fixed current theme instead of adding new

Frontend/src/components/common/CodeEditorComponent.vue

@@ -2,7 +2,8 @@
 import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
-import {EditorView} from "@codemirror/view"
+import { createTheme} from 'thememirror';
+import {tags as t} from '@lezer/highlight';
 import {xml} from '@codemirror/lang-xml'
 import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
@@ -18,20 +19,47 @@ const props= defineProps({
     },
 })
 
-let baseTheme = EditorView.baseTheme({
+const lightTheme = createTheme({
-  ".cm-o-replacement": {
+	variant: 'light',
-    display: "inline-block",
+	settings: {
-    width: ".5em",
+		background: '#FFFFFF',
-    height: ".5em",
+		foreground: '#000000',
-    borderRadius: ".25em"
+		caret: '#000000',
-  },
+		selection: '#80C7FF',
-  "&light .cm-o-replacement": {
+		gutterBackground: '#FFFFFF',
-    backgroundColor: "#04c"
+		gutterForeground: '#00000070',
-  },
+		lineHighlight: '#C1E2F840',
-  "&dark .cm-o-replacement": {
+	},
-    backgroundColor: "#5bf"
+	styles: [
-  }
+		{
-})
+			tag: t.comment,
+			color: '#AAAAAA',
+		},
+		{
+			tag: [t.keyword, t.operator, t.typeName, t.tagName, t.propertyName],
+			color: '#2F6F9F',
+			fontWeight: 'bold',
+		},
+		{
+			tag: [t.attributeName, t.definition(t.propertyName)],
+			color: '#4F9FD0',
+		},
+		{
+			tag: [t.className, t.string, t.special(t.brace)],
+			color: '#CF4F5F',
+		},
+		{
+			tag: t.number,
+			color: '#CF4F5F',
+			fontWeight: 'bold',
+		},
+		{
+			tag: t.variableName,
+			fontWeight: 'bold',
+		},
+	],
+});
+
 const emit = defineEmits(
   [
     'update:updatedCode'
@@ -51,7 +79,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return baseTheme;
+    return lightTheme;
 }
 
 function isDarkModeSet(){
@@ -97,4 +125,4 @@ function parseLanguage(name: String){
       />
     
   </div>
-</template>
+</template>