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

Allow to customize terminal theme, fix #2224

(cherry picked from commit a5e89b79d6)

src/renderer/components/+preferences/application.tsx

@@ -41,24 +41,38 @@ export const Application = observer(() => {
   const [customUrl, setCustomUrl] = React.useState(userStore.extensionRegistryUrl.customUrl || "");
   const [shell, setShell] = React.useState(userStore.shell || "");
   const extensionSettings = AppPreferenceRegistry.getInstance().getItems().filter((preference) => preference.showInPreferencesTab === "application");
+  const themeStore = ThemeStore.getInstance();
 
   return (
     <section id="application">
       <h2 data-testid="application-header">Application</h2>
       <section id="appearance">
-        <SubTitle title="Theme"/>
+        <SubTitle title="Theme" />
         <Select
-          options={ThemeStore.getInstance().themeOptions}
+          options={themeStore.themeOptions}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"
         />
       </section>
 
-      <hr/>
+      <hr />
+
+      <section id="terminalTheme">
+        <SubTitle title="Terminal theme" />
+        <Select
+          themeName="lens"
+          options={[
+            { label: "Match theme", value: "" },
+            ...themeStore.themeOptions,
+          ]}
+          value={userStore.terminalTheme}
+          onChange={({ value }) => userStore.terminalTheme = value}
+        />
+      </section>
 
       <section id="shell">
-        <SubTitle title="Terminal Shell Path"/>
+        <SubTitle title="Terminal Shell Path" />
         <Input
           theme="round-black"
           placeholder={defaultShell}
@@ -78,7 +92,7 @@ export const Application = observer(() => {
         </Switch>
       </section>
 
-      <hr/>
+      <hr />
 
       <section id="extensionRegistryUrl">
         <SubTitle title="Extension Install Registry" />

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),