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,60 +2,72 @@
 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 : {
-    code : {
+      type: String,
-        type: String,
+      required: true
-        required: true
+  },
+  config: {
+      type: Object,
+      required: true
     },
-    config: {
+})
-        type: Object,
-        required: true
-      },
-  })
 
-  const emit = defineEmits(
+const emit = defineEmits(
-    [
+  [
-      'update:updatedCode'
+    'update:updatedCode'
-    ]
+  ]
-  )
+)
 
-  function dataUpdated(newData:String, viewUpdate : any){
+function dataUpdated(newData:String, viewUpdate : any){
-    emit('update:updatedCode',newData)
+  emit('update:updatedCode',newData)
+}
+
+function selectTheme() {
+  if (isDarkModeSet()) {
+    return oneDark;
   }
+  else {
+    return espresso;
+  }
+}
 
-  const extensions = computed( ()=> {
+const extensions = computed( ()=> {
-    return  [
+  return  [
-        oneDark,
+      selectTheme(),
-        parseLanguage(props.config.language),
+      parseLanguage(props.config.language),
-    ]
+  ]
 
-  } )
+} )
 
-  function parseLanguage(name: String){
+function parseLanguage(name: String){
-    switch(name.toUpperCase()){
+  switch(name.toUpperCase()){
-      case "JSON": {
+    case "JSON": {
-        return json();
+      return json();
-      }
+    }
-      case "HTML": {
+    case "HTML": {
-        return html();
+      return html();
-      }
+    }
-      default: {
+    default: {
-        return xml();
+      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;"