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

This reverts commit a5e89b79d6.

src/common/user-store/preferences-helpers.ts

@@ -83,15 +83,6 @@ const colorTheme: PreferenceDescription<string> = {
   },
 };
 
-const terminalTheme: PreferenceDescription<string | undefined> = {
-  fromStore(val) {
-    return val || "";
-  },
-  toStore(val) {
-    return val || undefined;
-  },
-};
-
 const localeTimezone: PreferenceDescription<string> = {
   fromStore(val) {
     return val || moment.tz.guess(true) || "UTC";
@@ -360,7 +351,6 @@ export const DESCRIPTORS = {
   httpsProxy,
   shell,
   colorTheme,
-  terminalTheme,
   localeTimezone,
   allowUntrustedCAs,
   allowTelemetry,

src/common/user-store/user-store.ts

@@ -67,7 +67,6 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable allowErrorReporting: boolean;
   @observable allowUntrustedCAs: boolean;
   @observable colorTheme: string;
-  @observable terminalTheme: string;
   @observable localeTimezone: string;
   @observable downloadMirror: string;
   @observable httpsProxy?: string;
@@ -189,7 +188,6 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     this.httpsProxy = DESCRIPTORS.httpsProxy.fromStore(preferences?.httpsProxy);
     this.shell = DESCRIPTORS.shell.fromStore(preferences?.shell);
     this.colorTheme = DESCRIPTORS.colorTheme.fromStore(preferences?.colorTheme);
-    this.terminalTheme = DESCRIPTORS.terminalTheme.fromStore(preferences?.terminalTheme);
     this.localeTimezone = DESCRIPTORS.localeTimezone.fromStore(preferences?.localeTimezone);
     this.allowUntrustedCAs = DESCRIPTORS.allowUntrustedCAs.fromStore(preferences?.allowUntrustedCAs);
     this.allowTelemetry = DESCRIPTORS.allowTelemetry.fromStore(preferences?.allowTelemetry);
@@ -214,7 +212,6 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
         httpsProxy: DESCRIPTORS.httpsProxy.toStore(this.httpsProxy),
         shell: DESCRIPTORS.shell.toStore(this.shell),
         colorTheme: DESCRIPTORS.colorTheme.toStore(this.colorTheme),
-        terminalTheme: DESCRIPTORS.terminalTheme.toStore(this.terminalTheme),
         localeTimezone: DESCRIPTORS.localeTimezone.toStore(this.localeTimezone),
         allowUntrustedCAs: DESCRIPTORS.allowUntrustedCAs.toStore(this.allowUntrustedCAs),
         allowTelemetry: DESCRIPTORS.allowTelemetry.toStore(this.allowTelemetry),

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 />
+      <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}
@@ -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 => {
+      reaction(() => ThemeStore.getInstance().activeTheme.colors, this.setTheme, {
-        this.xterm?.setOption("theme", colors);
-      }, {
         fireImmediately: true,
       }),
       dockStore.onResize(this.onResize),

src/renderer/theme.store.ts

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { comparer, computed, makeObservable, observable, reaction } from "mobx";
+import { computed, makeObservable, observable, reaction } from "mobx";
 import { autoBind, Singleton } from "./utils";
 import { UserStore } from "../common/user-store";
 import logger from "../main/logger";
@@ -28,7 +28,6 @@ import lensLightThemeJson from "./themes/lens-light.json";
 import type { SelectOption } from "./components/select";
 import type { MonacoEditorProps } from "./components/monaco-editor";
 import { defaultTheme } from "../common/vars";
-import { camelCase } from "lodash";
 
 export type ThemeId = string;
 
@@ -42,7 +41,7 @@ export interface Theme {
 }
 
 export class ThemeStore extends Singleton {
-  private terminalColorPrefix = "terminal";
+  protected styles: HTMLStyleElement;
 
   // bundled themes from `themes/${themeId}.json`
   private themes = observable.map<ThemeId, Theme>({
@@ -50,37 +49,14 @@ export class ThemeStore extends Singleton {
     "lens-light": lensLightThemeJson as Theme,
   });
 
-  @computed get activeThemeId(): ThemeId {
+  @computed get activeThemeId(): string {
     return UserStore.getInstance().colorTheme;
   }
 
-  @computed get terminalThemeId(): ThemeId {
-    return UserStore.getInstance().terminalTheme;
-  }
-
   @computed get activeTheme(): Theme {
     return this.themes.get(this.activeThemeId) ?? this.themes.get(defaultTheme);
   }
 
-  @computed get terminalColors(): [string, string][] {
-    const theme = this.themes.get(this.terminalThemeId) ?? this.activeTheme;
-
-    return Object
-      .entries(theme.colors)
-      .filter(([name]) => name.startsWith(this.terminalColorPrefix));
-  }
-
-  // Replacing keys stored in styles to format accepted by terminal
-  // E.g. terminalBrightBlack -> brightBlack
-  @computed get xtermColors(): Record<string, string> {
-    return Object.fromEntries(
-      this.terminalColors.map(([name, color]) => [
-        camelCase(name.replace(this.terminalColorPrefix, "")),
-        color,
-      ]),
-    );
-  }
-
   @computed get themeOptions(): SelectOption<string>[] {
     return Array.from(this.themes).map(([themeId, theme]) => ({
       label: theme.name,
@@ -95,19 +71,15 @@ export class ThemeStore extends Singleton {
     autoBind(this);
 
     // auto-apply active theme
-    reaction(() => ({
+    reaction(() => this.activeThemeId, themeId => {
-      themeId: this.activeThemeId,
-      terminalThemeId: this.terminalThemeId,
-    }), ({ themeId }) => {
       try {
-        this.applyTheme(themeId);
+        this.applyTheme(this.getThemeById(themeId));
       } catch (err) {
         logger.error(err);
         UserStore.getInstance().resetTheme();
       }
     }, {
       fireImmediately: true,
-      equals: comparer.shallow,
     });
   }
 
@@ -115,18 +87,20 @@ export class ThemeStore extends Singleton {
     return this.themes.get(themeId);
   }
 
-  protected applyTheme(themeId: ThemeId) {
+  protected applyTheme(theme: Theme) {
-    const theme = this.getThemeById(themeId);
+    if (!this.styles) {
-    const colors = Object.entries({
+      this.styles = document.createElement("style");
-      ...theme.colors,
+      this.styles.id = "lens-theme";
-      ...Object.fromEntries(this.terminalColors),
+      document.head.append(this.styles);
-    });
+    }
-
+    const cssVars = Object.entries(theme.colors).map(([cssName, color]) => {
-    colors.forEach(([name, value]) => {
+      return `--${cssName}: ${color};`;
-      document.documentElement.style.setProperty(`--${name}`, value);
     });
 
+    this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
     // Adding universal theme flag which can be used in component styles
-    document.body.classList.toggle("theme-light", theme.type === "light");
+    const body = document.querySelector("body");
+
+    body.classList.toggle("theme-light", theme.type === "light");
   }
 }

src/renderer/themes/lens-dark.json

@@ -1,5 +1,5 @@
 {
-  "name": "Dark",
+  "name": "Dark (Lens)",
   "type": "dark",
   "description": "Original Lens dark theme",
   "author": "Mirantis",

src/renderer/themes/lens-light.json

@@ -1,5 +1,5 @@
 {
-  "name": "Light",
+  "name": "Light (Lens)",
   "type": "light",
   "description": "Original Lens light theme",
   "author": "Mirantis",
@@ -76,26 +76,26 @@
     "logsBackground": "#24292e",
     "logsForeground": "#ffffff",
     "logRowHoverBackground": "#35373a",
-    "terminalBackground": "#ffffff",
+    "terminalBackground": "#24292e",
-    "terminalForeground": "#2d2d2d",
+    "terminalForeground": "#ffffff",
-    "terminalCursor": "#2d2d2d",
+    "terminalCursor": "#ffffff",
-    "terminalCursorAccent": "#ffffff",
+    "terminalCursorAccent": "#000000",
-    "terminalSelection": "#bfbfbf",
+    "terminalSelection": "#ffffff77",
-    "terminalBlack": "#2d2d2d",
+    "terminalBlack": "#2e3436",
-    "terminalRed": "#cd3734 ",
+    "terminalRed": "#cc0000",
-    "terminalGreen": "#18cf12",
+    "terminalGreen": "#4e9a06",
-    "terminalYellow": "#acb300",
+    "terminalYellow": "#c4a000",
-    "terminalBlue": "#3d90ce",
+    "terminalBlue": "#3465a4",
-    "terminalMagenta": "#c100cd",
+    "terminalMagenta": "#75507b",
-    "terminalCyan": "#07c4b9",
+    "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",