Allow to customize terminal theme (#4666) (#4690)

Allow to customize terminal theme, fix #2224

(cherry picked from commit a5e89b79d6)

src/renderer/components/dock/dock.scss

@@ -60,11 +60,14 @@
 
   .tab-content {
     position: relative;
-    background: var(--terminalBackground);
     flex: 1;
     overflow: hidden;
     transition: flex-basis 25ms ease-in;
 
+    &.terminal {
+      background: var(--terminalBackground);
+    }
+
     > *:not(.Spinner) {
       position: absolute;
       left: 0;

src/renderer/components/dock/dock.tsx

@@ -97,7 +97,7 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
     if (!isOpen || !selectedTab) return null;
 
     return (
-      <div className="tab-content" style={{ flexBasis: height }}>
+      <div className={`tab-content ${selectedTab.kind}`} style={{ flexBasis: height }}>
         {this.renderTab(selectedTab)}
       </div>
     );

src/renderer/components/dock/terminal/terminal.ts

@@ -10,9 +10,9 @@ import { FitAddon } from "xterm-addon-fit";
 import type { DockStore, TabId } from "../dock-store/dock.store";
 import { TerminalApi, TerminalChannels } from "../../../api/terminal-api";
 import { ThemeStore } from "../../../theme.store";
-import { boundMethod, disposer } from "../../../utils";
+import { disposer } from "../../../utils";
 import { isMac } from "../../../../common/vars";
-import { camelCase, once } from "lodash";
+import { once } from "lodash";
 import { UserStore } from "../../../../common/user-store";
 import { clipboard } from "electron";
 import logger from "../../../../common/logger";
@@ -44,23 +44,6 @@ export class Terminal {
   private scrollPos = 0;
   private disposer = disposer();
 
-  @boundMethod
-  protected setTheme(colors: Record<string, string>) {
-    if (!this.xterm) {
-      return;
-    }
-
-    // Replacing keys stored in styles to format accepted by terminal
-    // E.g. terminalBrightBlack -> brightBlack
-    const colorPrefix = "terminal";
-    const terminalColorEntries = Object.entries(colors)
-      .filter(([name]) => name.startsWith(colorPrefix))
-      .map(([name, color]) => [camelCase(name.slice(colorPrefix.length)), color]);
-    const terminalColors = Object.fromEntries(terminalColorEntries);
-
-    this.xterm.setOption("theme", terminalColors);
-  }
-
   get elem() {
     return this.xterm?.element;
   }
@@ -109,7 +92,9 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposer.push(
-      reaction(() => ThemeStore.getInstance().activeTheme.colors, this.setTheme, {
+      reaction(() => ThemeStore.getInstance().xtermColors, colors => {
+        this.xterm?.setOption("theme", colors);
+      }, {
         fireImmediately: true,
       }),
       dependencies.dockStore.onResize(this.onResize),