Revert "Allow to customize terminal theme (#4666)" (#4682)

This reverts commit a5e89b79d6.

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

@@ -57,38 +57,24 @@ 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.themeOptions}
+          options={ThemeStore.getInstance().themeOptions}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"
         />
       </section>
 
-      <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>
+      <hr/>
 
       <section id="shell">
-        <SubTitle title="Terminal Shell Path" />
+        <SubTitle title="Terminal Shell Path"/>
         <Input
           theme="round-black"
           placeholder={defaultShell}
@@ -108,7 +94,7 @@ export const Application = observer(() => {
         </Switch>
       </section>
 
-      <hr />
+      <hr/>
 
       <section id="extensionRegistryUrl">
         <SubTitle title="Extension Install Registry" />

src/renderer/components/dock/dock.scss

@@ -76,14 +76,11 @@
 
   .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

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

src/renderer/components/dock/terminal.ts

@@ -26,9 +26,9 @@ import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import { TerminalApi, TerminalChannels } from "../../api/terminal-api";
 import { ThemeStore } from "../../theme.store";
-import { disposer } from "../../utils";
+import { boundMethod, disposer } from "../../utils";
 import { isMac } from "../../../common/vars";
-import { once } from "lodash";
+import { camelCase, once } from "lodash";
 import { UserStore } from "../../../common/user-store";
 import { clipboard } from "electron";
 import logger from "../../../common/logger";
@@ -56,6 +56,23 @@ 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;
   }
@@ -104,9 +121,7 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposer.push(
-      reaction(() => ThemeStore.getInstance().xtermColors, colors => {
-        this.xterm?.setOption("theme", colors);
-      }, {
+      reaction(() => ThemeStore.getInstance().activeTheme.colors, this.setTheme, {
         fireImmediately: true,
       }),
       dockStore.onResize(this.onResize),