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(){

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -4,7 +4,6 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
 import { ref } from 'vue'
-import TabComponent from "@components/xml/TabComponent.vue";
 
 const props = defineProps(
     {
@@ -38,10 +37,6 @@ function canBeFormatted() {
            props.stylizedName.toLowerCase() == 'xslt'
 }
 
-function addParameters() {
-  return props.stylizedName?.toLowerCase() == "xslt"
-}
-
 function readFile(file : any) {
     
     const reader = new FileReader()
@@ -54,52 +49,22 @@ function readFile(file: any) {
     reader.readAsText(file.target.files[0])
 }
 
-
 </script>
 
 <template>
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
-    <div class="flex justify-between mb-2"></div>
-
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-auto">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-      <div class="flex space-x-2 pb-2 overflow-x-auto">
+                
                 <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-
+        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
-    <div class="flex place-content-between w-full items-center">
-      <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
-        <select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
-          <option> ---Choose tutorial--- </option>
-          <option> w3schools </option>
-          <option> Javatpoint </option>
-          <option> tutorialspoint </option>
-          <option> geeksforgeeks </option>
-        </select>
-        <input
-            id="textInput1"
-            class="text-input px-2 py-1 border rounded-3xl w-1/3"
-            type="text"
-            placeholder="Input 1"
-        />
-        <input
-            id="textInput2"
-            class="text-input px-2 py-1 border rounded-3xl w-1/3"
-            type="text"
-            placeholder="Input 2"
-        />
-        <button class="tool-button" @click="clear">Add Variable</button>
     </div>
-    </div>
-
-    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
-                :config="{disabled:false, language:stylizedName}"></CodeEditor>
-  </div>
-
 </template>