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 { espresso } from 'thememirror';
+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,6 +19,47 @@ const props= defineProps({
     },
 })
 
+const lightTheme = createTheme({
+	variant: 'light',
+	settings: {
+		background: '#FFFFFF',
+		foreground: '#000000',
+		caret: '#000000',
+		selection: '#80C7FF',
+		gutterBackground: '#FFFFFF',
+		gutterForeground: '#00000070',
+		lineHighlight: '#C1E2F840',
+	},
+	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'
@@ -37,7 +79,7 @@ function selectTheme() {
   if (isDarkModeSet())
     return oneDark;
   else
-    return espresso;
+    return lightTheme;
 }
 
 function isDarkModeSet(){