Applying dark colors to dock regardless of active theme (#1873)

* Appliying dark colors on dock contents

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix lint error

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/ace-editor/ace-editor.scss

@@ -18,33 +18,41 @@
 
   // --Theme customization
 
+  .ace-terminal-theme {
+    background: var(--dockEditorBackground) !important;
+  }
+
   .ace_gutter {
-    color: $textColorSecondary;
-    background-color: $mainBackground;
+    color: #a0a0a0;
+    background-color: var(--dockEditorBackground);
+  }
+
+  .ace_line {
+    color: var(--dockEditorKeyword);
   }
 
   .ace_active-line,
   .ace_gutter-active-line {
-    background: $mainBackground !important;
+    background: var(--dockEditorActiveLineBackground) !important;
   }
 
   .ace_meta.ace_tag {
-    color: $textColorPrimary;
+    color: var(--dockEditorTag);
   }
 
   .ace_constant {
-    color: $lensBlue !important;
+    color: var(--lensBlue) !important;
   }
 
   .ace_keyword {
-    color: $textColorAccent;
+    color: var(--dockEditorKeyword);
   }
 
   .ace_string {
-    color: $colorOk;
+    color: var(--colorOk);
   }
 
   .ace_comment {
-    color: #808080;
+    color: var(--dockEditorComment);
   }
 }

src/renderer/components/ace-editor/ace-editor.tsx

@@ -3,11 +3,9 @@
 import "./ace-editor.scss";
 
 import React from "react";
-import { reaction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds";
 import { autobind, cssNames, noop } from "../../utils";
-import { themeStore } from "../../theme.store";
 
 interface Props extends Partial<Ace.EditorOptions> {
   className?: string;
@@ -46,25 +44,10 @@ export class AceEditor extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     require("ace-builds/src-noconflict/mode-yaml");
-    require("ace-builds/src-noconflict/theme-dreamweaver");
     require("ace-builds/src-noconflict/theme-terminal");
     require("ace-builds/src-noconflict/ext-searchbox");
   }
 
-  @disposeOnUnmount
-  themeSwitcher = reaction(() => themeStore.activeTheme, () => {
-    this.setTheme(this.theme);
-  });
-
-  get theme() {
-    switch (themeStore.activeTheme.type) {
-      case "light":
-        return "dreamweaver";
-      case "dark":
-        return "terminal";
-    }
-  }
-
   async componentDidMount() {
     const {
       mode, autoFocus, className, hidden, cursorPos,
@@ -74,7 +57,7 @@ export class AceEditor extends React.Component<Props, State> {
 
     // setup editor
     this.editor = AceBuild.edit(this.elem, options);
-    this.setTheme(this.theme);
+    this.setTheme("terminal");
     this.setMode(mode);
     this.setCursorPos(cursorPos);