diff --git a/components/ace-editor.vue b/components/ace-editor.vue
index d38b94f4e..47553b7d7 100644
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -81,6 +81,13 @@ export default {
       ...this.options,
     })
 
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true;
+      });
+    });
+
     if (this.value) editor.setValue(this.value, 1);
 
     this.editor = editor
@@ -102,9 +109,8 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  destroyed() {
     this.editor.destroy();
-    this.editor.container.remove();
   }
 };
 </script>
diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index bc58ceddd..c76ba02d7 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -97,6 +97,13 @@ export default {
       });
     });
 
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true;
+      });
+    });
+
     const completer = {
       getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
         if (this.validationSchema) {