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/+workloads-pods/pods.store.ts

@@ -25,6 +25,7 @@ export class PodsStore extends KubeObjectStore<Pod> {
   async loadKubeMetrics(namespace?: string) {
     try {
       const metrics = await podMetricsApi.list({ namespace });
+
       this.kubeMetrics.replace(metrics);
     } catch (error) {
       console.error("loadKubeMetrics failed", error);

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;
+    color: #a0a0a0;
-    background-color: $mainBackground;
+    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 { observer } from "mobx-react";
-import { disposeOnUnmount, 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);
 

src/renderer/components/dock/pod-log-list.scss

@@ -7,8 +7,8 @@
   overflow: auto;
 
   position: relative;
-  color: $textColorAccent;
+  color: var(--logsForeground);
-  background: $logsBackground;
+  background: var(--logsBackground);
   flex-grow: 1;
 
   .VirtualList {
@@ -20,12 +20,12 @@
       .LogRow {
         padding: 2px 16px;
         height: 18px;  // Must be equal to lineHeight variable in pod-log-list.tsx
-        font-family: $font-monospace;
+        font-family: var(--font-monospace);
         font-size: smaller;
         white-space: pre;
 
         &:hover {
-          background: $logRowHoverBackground;
+          background: var(--logRowHoverBackground);
         }
 
         span {
@@ -66,13 +66,13 @@
   .JumpToBottom {
     position: absolute;
     right: 30px;
-    padding: $unit / 2 $unit * 1.5;
+    padding: 4px 9px;
-    border-radius: $unit * 2;
+    border-radius: 20px;
     z-index: 2;
     top: 20px;
 
     .Icon {
-      --size: $unit * 2;
+      --size: calc(var(--unit) * 2);
     }
   }
 }

src/renderer/themes/lens-dark.json

@@ -60,7 +60,13 @@
     "dockHeadBackground": "#2e3136",
     "dockInfoBackground": "#1e2125",
     "dockInfoBorderColor": "#303136",
+    "dockEditorBackground": "#000000",
+    "dockEditorTag": "#8e97a3",
+    "dockEditorKeyword": "#ffffff",
+    "dockEditorComment": "#808080",
+    "dockEditorActiveLineBackground": "#3a3d41",
     "logsBackground": "#000000",
+    "logsForeground": "#ffffff",
     "logRowHoverBackground": "#35373a",
     "terminalBackground": "#000000",
     "terminalForeground": "#ffffff",

src/renderer/themes/lens-light.json

@@ -61,28 +61,34 @@
     "dockHeadBackground": "#e8e8e8",
     "dockInfoBackground": "#e8e8e8",
     "dockInfoBorderColor": "#c9cfd3",
-    "logsBackground": "#ffffff",
+    "dockEditorBackground": "#24292e",
-    "logRowHoverBackground": "#eeeeee",
+    "dockEditorTag": "#8e97a3",
-    "terminalBackground": "#ffffff",
+    "dockEditorKeyword": "#ffffff",
-    "terminalForeground": "#2d2d2d",
+    "dockEditorComment": "#808080",
-    "terminalCursor": "#2d2d2d",
+    "dockEditorActiveLineBackground": "#3a3d41",
-    "terminalCursorAccent": "#ffffff",
+    "logsBackground": "#24292e",
-    "terminalSelection": "#bfbfbf66",
+    "logsForeground": "#ffffff",
-    "terminalBlack": "#2d2d2d",
+    "logRowHoverBackground": "#35373a",
-    "terminalRed": "#cd3734 ",
+    "terminalBackground": "#24292e",
-    "terminalGreen": "#18cf12",
+    "terminalForeground": "#ffffff",
-    "terminalYellow": "#acb300",
+    "terminalCursor": "#ffffff",
-    "terminalBlue": "#3d90ce",
+    "terminalCursorAccent": "#000000",
-    "terminalMagenta": "#c100cd",
+    "terminalSelection": "#ffffff77",
-    "terminalCyan": "#07c4b9",
+    "terminalBlack": "#2e3436",
+    "terminalRed": "#cc0000",
+    "terminalGreen": "#4e9a06",
+    "terminalYellow": "#c4a000",
+    "terminalBlue": "#3465a4",
+    "terminalMagenta": "#75507b",
+    "terminalCyan": "#06989a",
     "terminalWhite": "#d3d7cf",
-    "terminalBrightBlack": "#a8a8a8",
+    "terminalBrightBlack": "#555753",
-    "terminalBrightRed": "#ff6259",
+    "terminalBrightRed": "#ef2929",
-    "terminalBrightGreen": "#5cdb59",
+    "terminalBrightGreen": "#8ae234",
-    "terminalBrightYellow": "#f8c000",
+    "terminalBrightYellow": "#fce94f",
-    "terminalBrightBlue": "#008db6",
+    "terminalBrightBlue": "#729fcf",
-    "terminalBrightMagenta": "#ee55f8",
+    "terminalBrightMagenta": "#ad7fa8",
-    "terminalBrightCyan": "#50e8df",
+    "terminalBrightCyan": "#34e2e2",
     "terminalBrightWhite": "#eeeeec",
     "dialogTextColor": "#87909c",
     "dialogBackground": "#ffffff",
@@ -109,6 +115,7 @@
     "lineProgressBackground": "#e8e8e8",
     "radioActiveBackground": "#f1f1f1",
     "menuActiveBackground": "#e8e8e8",
-    "scrollBarColor": "#bbbbbb"
+    "scrollBarColor": "#bbbbbb",
+    "canvasBackground": "#24292e"
   }
 }