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

Allow to customize terminal theme, fix #2224

(cherry picked from commit a5e89b79d6)

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

@@ -67,6 +67,15 @@ 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";
@@ -335,6 +344,7 @@ export const DESCRIPTORS = {
   httpsProxy,
   shell,
   colorTheme,
+  terminalTheme,
   localeTimezone,
   allowUntrustedCAs,
   allowTelemetry,

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

@@ -49,6 +49,7 @@ 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;
@@ -170,6 +171,7 @@ 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);
@@ -194,6 +196,7 @@ 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

@@ -41,6 +41,7 @@ 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">
@@ -48,7 +49,7 @@ export const Application = observer(() => {
       <section id="appearance">
         <SubTitle title="Theme" />
         <Select
-          options={ThemeStore.getInstance().themeOptions}
+          options={themeStore.themeOptions}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"
@@ -57,6 +58,19 @@ export const Application = observer(() => {
 
       <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" />
         <Input

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

src/renderer/theme.store.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { computed, makeObservable, observable, reaction } from "mobx";
+import { comparer, computed, makeObservable, observable, reaction } from "mobx";
 import { autoBind, Singleton } from "./utils";
 import { UserStore } from "../common/user-store";
 import logger from "../main/logger";
@@ -12,6 +12,7 @@ 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;
 
@@ -25,7 +26,7 @@ export interface Theme {
 }
 
 export class ThemeStore extends Singleton {
-  protected styles: HTMLStyleElement;
+  private terminalColorPrefix = "terminal";
 
   // bundled themes from `themes/${themeId}.json`
   private themes = observable.map<ThemeId, Theme>({
@@ -33,14 +34,37 @@ export class ThemeStore extends Singleton {
     "lens-light": lensLightThemeJson as Theme,
   });
 
-  @computed get activeThemeId(): string {
+  @computed get activeThemeId(): ThemeId {
     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,
@@ -55,15 +79,19 @@ export class ThemeStore extends Singleton {
     autoBind(this);
 
     // auto-apply active theme
-    reaction(() => this.activeThemeId, themeId => {
+    reaction(() => ({
+      themeId: this.activeThemeId,
+      terminalThemeId: this.terminalThemeId,
+    }), ({ themeId }) => {
       try {
-        this.applyTheme(this.getThemeById(themeId));
+        this.applyTheme(themeId);
       } catch (err) {
         logger.error(err);
         UserStore.getInstance().resetTheme();
       }
     }, {
       fireImmediately: true,
+      equals: comparer.shallow,
     });
   }
 
@@ -71,20 +99,18 @@ export class ThemeStore extends Singleton {
     return this.themes.get(themeId);
   }
 
-  protected applyTheme(theme: Theme) {
+  protected applyTheme(themeId: ThemeId) {
-    if (!this.styles) {
+    const theme = this.getThemeById(themeId);
-      this.styles = document.createElement("style");
+    const colors = Object.entries({
-      this.styles.id = "lens-theme";
+      ...theme.colors,
-      document.head.append(this.styles);
+      ...Object.fromEntries(this.terminalColors),
-    }
-    const cssVars = Object.entries(theme.colors).map(([cssName, color]) => {
-      return `--${cssName}: ${color};`;
     });
 
-    this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
+    colors.forEach(([name, value]) => {
-    // Adding universal theme flag which can be used in component styles
+      document.documentElement.style.setProperty(`--${name}`, value);
-    const body = document.querySelector("body");
+    });
 
-    body.classList.toggle("theme-light", theme.type === "light");
+    // Adding universal theme flag which can be used in component styles
+    document.body.classList.toggle("theme-light", theme.type === "light");
   }
 }

src/renderer/themes/lens-dark.json

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

src/renderer/themes/lens-light.json

@@ -1,5 +1,5 @@
 {
-  "name": "Light (Lens)",
+  "name": "Light",
   "type": "light",
   "description": "Original Lens light theme",
   "author": "Mirantis",
@@ -76,26 +76,26 @@
     "logsBackground": "#24292e",
     "logsForeground": "#ffffff",
     "logRowHoverBackground": "#35373a",
-    "terminalBackground": "#24292e",
+    "terminalBackground": "#ffffff",
-    "terminalForeground": "#ffffff",
+    "terminalForeground": "#2d2d2d",
-    "terminalCursor": "#ffffff",
+    "terminalCursor": "#2d2d2d",
-    "terminalCursorAccent": "#000000",
+    "terminalCursorAccent": "#ffffff",
-    "terminalSelection": "#ffffff77",
+    "terminalSelection": "#bfbfbf",
-    "terminalBlack": "#2e3436",
+    "terminalBlack": "#2d2d2d",
-    "terminalRed": "#cc0000",
+    "terminalRed": "#cd3734 ",
-    "terminalGreen": "#4e9a06",
+    "terminalGreen": "#18cf12",
-    "terminalYellow": "#c4a000",
+    "terminalYellow": "#acb300",
-    "terminalBlue": "#3465a4",
+    "terminalBlue": "#3d90ce",
-    "terminalMagenta": "#75507b",
+    "terminalMagenta": "#c100cd",
-    "terminalCyan": "#06989a",
+    "terminalCyan": "#07c4b9",
     "terminalWhite": "#d3d7cf",
-    "terminalBrightBlack": "#555753",
+    "terminalBrightBlack": "#a8a8a8",
-    "terminalBrightRed": "#ef2929",
+    "terminalBrightRed": "#ff6259",
-    "terminalBrightGreen": "#8ae234",
+    "terminalBrightGreen": "#5cdb59",
-    "terminalBrightYellow": "#fce94f",
+    "terminalBrightYellow": "#f8c000",
-    "terminalBrightBlue": "#729fcf",
+    "terminalBrightBlue": "#008db6",
-    "terminalBrightMagenta": "#ad7fa8",
+    "terminalBrightMagenta": "#ee55f8",
-    "terminalBrightCyan": "#34e2e2",
+    "terminalBrightCyan": "#50e8df",
     "terminalBrightWhite": "#eeeeec",
     "dialogTextColor": "#87909c",
     "dialogBackground": "#ffffff",