From f0fdac944902675d27777c8400d7afbed2498e49 Mon Sep 17 00:00:00 2001
From: szewczyw <wojtekszewczyk2000@gmail.com>
Date: Thu, 19 Dec 2024 10:18:40 +0100
Subject: [PATCH 1/2] created new theme for light mode

---
 .../components/common/CodeEditorComponent.vue  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/common/CodeEditorComponent.vue b/Frontend/src/components/common/CodeEditorComponent.vue
index bc233b7..54e8bd7 100644
--- a/Frontend/src/components/common/CodeEditorComponent.vue
+++ b/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(){
-- 
2.51.0


From e9edf92f331d816548b69cfec8d10f7c20976c0a Mon Sep 17 00:00:00 2001
From: szewczyw <wojtekszewczyk2000@gmail.com>
Date: Fri, 20 Dec 2024 12:51:02 +0100
Subject: [PATCH 2/2] fixed current theme instead of adding new

---
 .../components/common/CodeEditorComponent.vue | 62 ++++++++++++++-----
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/Frontend/src/components/common/CodeEditorComponent.vue b/Frontend/src/components/common/CodeEditorComponent.vue
index 54e8bd7..5087942 100644
--- a/Frontend/src/components/common/CodeEditorComponent.vue
+++ b/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({
-  ".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 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'
@@ -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>
\ No newline at end of file
-- 
2.51.0