From 469b5a584fe80f34e34cc7ff0a89258dffaf2282 Mon Sep 17 00:00:00 2001
From: szewczyw <wojtekszewczyk2000@gmail.com>
Date: Wed, 5 Feb 2025 14:20:09 +0100
Subject: [PATCH] mark_text_doesnt_work (#291)

Updated existing theme so that line highlighting is transparent,  had to add new theme because ovewriting exisiting value was impossible.

Reviewed-on: https://gitea.release11.com/R11/release11-tools/pulls/291
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: szewczyw <wojtekszewczyk2000@gmail.com>
Co-committed-by: szewczyw <wojtekszewczyk2000@gmail.com>
---
 .../components/common/CodeEditorComponent.vue | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/Frontend/src/components/common/CodeEditorComponent.vue b/Frontend/src/components/common/CodeEditorComponent.vue
index bc233b7..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 { 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(){
@@ -83,4 +125,4 @@ function parseLanguage(name: String){
       />
     
   </div>
-</template>
+</template>
\ No newline at end of file