Frontend/package-lock.json

@@ -13,6 +13,7 @@
         "@codemirror/lang-xml": "^6.0.2",
         "@codemirror/theme-one-dark": "^6.1.2",
         "codemirror": "^6.0.1",
+        "thememirror": "^2.0.1",
         "vue": "^3.3.4",
         "vue-codemirror": "^6.1.1",
         "vue-router": "^4.2.2"
@@ -4305,6 +4306,16 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thememirror": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/thememirror/-/thememirror-2.0.1.tgz",
+      "integrity": "sha512-d5i6FVvWWPkwrm4cHLI3t9AT1OrkAt7Ig8dtdYSofgF7C/eiyNuq6zQzSTusWTde3jpW9WLvA9J/fzNKMUsd0w==",
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -7756,6 +7767,12 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "thememirror": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/thememirror/-/thememirror-2.0.1.tgz",
+      "integrity": "sha512-d5i6FVvWWPkwrm4cHLI3t9AT1OrkAt7Ig8dtdYSofgF7C/eiyNuq6zQzSTusWTde3jpW9WLvA9J/fzNKMUsd0w==",
+      "requires": {}
+    },
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",

Frontend/package.json

@@ -17,6 +17,7 @@
     "@codemirror/lang-xml": "^6.0.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "codemirror": "^6.0.1",
+    "thememirror": "^2.0.1",
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.2"

Frontend/src/components/CodeEditorComponent.vue

@@ -2,13 +2,16 @@
 import { computed, ref } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
+import { espresso } from 'thememirror';
 import {xml} from '@codemirror/lang-xml'
 import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
 
+function isDarkModeSet(){
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
 
-
+const props= defineProps({
-  const props= defineProps({
   code : {
       type: String,
       required: true
@@ -17,27 +20,36 @@ import {html} from '@codemirror/lang-html'
       type: Object,
       required: true
     },
-  })
+})
 
-  const emit = defineEmits(
+const emit = defineEmits(
   [
     'update:updatedCode'
   ]
-  )
+)
 
-  function dataUpdated(newData:String, viewUpdate : any){
+function dataUpdated(newData:String, viewUpdate : any){
   emit('update:updatedCode',newData)
-  }
+}
 
-  const extensions = computed( ()=> {
+function selectTheme() {
+  if (isDarkModeSet()) {
+    return oneDark;
+  }
+  else {
+    return espresso;
+  }
+}
+
+const extensions = computed( ()=> {
   return  [
-        oneDark,
+      selectTheme(),
       parseLanguage(props.config.language),
   ]
 
-  } )
+} )
 
-  function parseLanguage(name: String){
+function parseLanguage(name: String){
   switch(name.toUpperCase()){
     case "JSON": {
       return json();
@@ -49,13 +61,13 @@ import {html} from '@codemirror/lang-html'
       return xml();
     }
   }
-  }
+}
 
 
 </script>
 
 <template>
-  <div class="editor w-full h-full bg-[#282C34] rounded-2xl overflow-x-auto">
+  <div class="editor w-full h-full rounded-2xl overflow-x-auto">
     
     <codemirror
       style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"