Change ace-editor theme by PW theme changing.

components/ace-editor.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+const DEFAULT_THEME = 'dracula';
+
 import ace from 'ace-builds';
 import "ace-builds/webpack-resolver";
 
@@ -15,27 +17,15 @@ export default {
     },
     theme: {
       type: String,
-      default: 'dracula'
+      required: false
     },
     lang: {
       type: String,
-      default: 'json'
+      default: 'json',
     },
-    rows: {
-      type: Number,
-      default: 16
-    },
-    fontSize: {
-      type: String,
-      default: '16px'
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    checkSyntax: {
-      type: Boolean,
-      default: false
+    options: {
+      type: Object,
+      default: {}
     }
   },
 
@@ -47,33 +37,45 @@ export default {
   },
 
   watch: {
-    value(val) {
-      if(val !== this.cacheValue) {
-        this.editor.session.setValue(val,1);
-        this.cacheValue = val;
+    value(value) {
+      if(value !== this.cacheValue) {
+        this.editor.session.setValue(value,1);
+        this.cacheValue = value;
       }
 
+    },
+    theme() {
+      this.editor.setTheme('ace/theme/' + this.defineTheme())
+    },
+    lang(value) {
+      this.editor.getSession().setMode('ace/mode/' + value);
+    },
+    options(value) {
+      this.editor.setOptions(value);
     }
   },
 
   mounted() {
     const editor = ace.edit(this.$refs.editor, {
-      theme: 'ace/theme/'+ this.theme,
+      theme: 'ace/theme/'+ this.defineTheme(),
       mode: "ace/mode/" + this.lang,
-      maxLines: this.rows,
-      minLines: this.rows,
-      fontSize: this.fontSize,
-      autoScrollEditorIntoView: true,
-      readOnly: true,
-      showPrintMargin: false,
-    })
+      ...this.options
+      })
 
     editor.setValue(this.value);
-    this.cacheValue = this.value;
-
-    editor.session.setUseWorker(this.checkSyntax)
 
     this.editor = editor;
+    this.cacheValue = this.value;
+  },
+
+  methods: {
+    defineTheme() {
+      if(this.theme) {
+        return this.theme;
+      } else {
+        return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+      }
+    }
   },
 
   beforeDestroy() {

pages/index.vue

@@ -570,11 +570,17 @@
           <div id="response-details-wrapper">
             <ResponseBody
               :value="responseBodyText"
-              theme="dracula"
               lang="json"
-              :rows="16"
-              fontSize="16px"
-              placeholder="(waiting to send request)" />
+              :options="{
+                maxLines: '16',
+                minLines: '16',
+                fontSize: '16px',
+                autoScrollEditorIntoView: true,
+                readOnly: true,
+                showPrintMargin: false,
+                useWorker: false
+                }"
+            />
             <iframe
               :class="{hidden: !previewEnabled}"
               class="covers-response"

pages/settings.vue

@@ -7,7 +7,7 @@
           <div class="backgrounds">
             <span
               :key="theme.class"
-              @click="applyTheme(theme.class, theme.color)"
+              @click="applyTheme(theme)"
               v-for="theme in themes"
             >
               <swatch
@@ -128,24 +128,28 @@ export default {
         {
           color: "#252628",
           name: "Kinda Dark",
-          class: ""
+          class: "",
+          aceEditor: "dracula"
         },
         {
           color: "#ffffff",
           name: "Clearly White",
           vibrant: true,
-          class: "light"
+          class: "light",
+          aceEditor: "xcode"
         },
         {
           color: "#000000",
           name: "Just Black",
-          class: "black"
+          class: "black",
+          aceEditor: "tomorrow_night_blue"
         },
         {
           color: "var(--bg-color)",
           name: "Auto (system)",
           vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
-          class: "auto"
+          class: "auto",
+          aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches ? 'xcode' : 'dracula'
         }
       ],
       // You can define a new color here! It will simply store the color value.
@@ -220,8 +224,9 @@ export default {
   },
 
   methods: {
-    applyTheme(name, color) {
+    applyTheme({class:name, color, aceEditor}) {
       this.applySetting("THEME_CLASS", name);
+      this.applySetting("THEME_ACE_EDITOR", aceEditor);
       document
         .querySelector("meta[name=theme-color]")
         .setAttribute("content", color);

store/postwoman.js

@@ -26,6 +26,11 @@ export const SETTINGS_KEYS = [
    */
   "THEME_COLOR_VIBRANT",
 
+  /**
+   * The Ace editor theme
+   */
+  "THEME_ACE_EDITOR",
+
   /**
    * Normally, section frames are multicolored in the UI
    * to emphasise the different sections.