diff --git a/src/renderer/components/ace-editor/ace-editor.tsx b/src/renderer/components/ace-editor/ace-editor.tsx
index d7ae56ebb5..10fecbce75 100644
--- a/src/renderer/components/ace-editor/ace-editor.tsx
+++ b/src/renderer/components/ace-editor/ace-editor.tsx
@@ -3,10 +3,11 @@
 import "./ace-editor.scss"
 
 import React from "react"
-import { observer } from "mobx-react";
+import { observer, disposeOnUnmount } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds"
 import { autobind, cssNames } from "../../utils";
 import { themeStore } from "../../theme.store";
+import { reaction } from "mobx";
 
 interface Props extends Partial<Ace.EditorOptions> {
   className?: string;
@@ -46,6 +47,11 @@ export class AceEditor extends React.Component<Props, State> {
     require("ace-builds/src-noconflict/ext-searchbox")
   }
 
+  @disposeOnUnmount
+  themeSwitcher = reaction(() => themeStore.activeTheme, () => {
+    this.setTheme(this.theme);
+  });
+
   get theme() {
     switch (themeStore.activeTheme.type) {
     case "light":