- fix: reverting handling padding as previous since buggy xterm.fit() plugin

- fix: override/use own terminal css-vars

Signed-off-by: Roman <ixrock@gmail.com>

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

@@ -79,8 +79,13 @@ export const Application = observer(() => {
         <Select
           themeName="lens"
           options={[
-            { label: "Use global theme settings", value: "" },
-            ...themeStore.themeOptions,
+            { label: "Match current theme", value: "" },
+            ...themeStore.themeOptions.map((option) => {
+              return {
+                ...option,
+                label: <span>Match theme <em>{option.label}</em></span>,
+              };
+            }),
           ]}
           value={userStore.terminalTheme}
           onChange={({ value }) => userStore.terminalTheme = value}

src/renderer/components/dock/dock.scss

@@ -80,6 +80,10 @@
     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" style={{ flexBasis: height }}>
+      <div className={`tab-content ${selectedTab.kind}`} style={{ flexBasis: height }}>
         {this.renderTab(selectedTab)}
       </div>
     );

src/renderer/components/dock/terminal-window.scss

@@ -26,16 +26,7 @@
 
   flex: 1;
   overflow: hidden;
-
-  .xterm {
-    padding: var(--spacing);
-
-    &, &-viewport {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
+  left: var(--spacing) !important;
+  top: var(--spacing) !important;
+  bottom: var(--spacing) !important;
 }

src/renderer/components/dock/terminal.ts

@@ -104,8 +104,8 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposer.push(
-      reaction(() => ThemeStore.getInstance().terminalColors, themeColors => {
-        this.xterm?.setOption("theme", themeColors);
+      reaction(() => ThemeStore.getInstance().xtermColors, colors => {
+        this.xterm?.setOption("theme", colors);
       }, {
         fireImmediately: true,
       }),

src/renderer/theme.store.ts

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-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";
@@ -42,7 +42,6 @@ export interface Theme {
 }
 
 export class ThemeStore extends Singleton {
-  private styles: HTMLStyleElement;
   private terminalColorPrefix = "terminal";
 
   // bundled themes from `themes/${themeId}.json`
@@ -51,30 +50,35 @@ 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(): Record<string, string> {
-    const { terminalTheme } = UserStore.getInstance();
-    const theme = this.themes.get(terminalTheme) ?? this.activeTheme;
-    const xtermColors: Record<string, string> = {}; // see also "terminal.ts"
+  @computed get terminalColors(): [string, string][] {
+    const theme = this.themes.get(this.terminalThemeId) ?? this.activeTheme;
 
-    // Replacing keys stored in styles to format accepted by terminal
-    // E.g. terminalBrightBlack -> brightBlack
-    for (const [name, color] of Object.entries(theme.colors)) {
-      if (!name.startsWith(this.terminalColorPrefix)) continue; // skip
+    return Object
+      .entries(theme.colors)
+      .filter(([name]) => name.startsWith(this.terminalColorPrefix));
+  }
 
-      const xtermColorName = camelCase(name.replace(this.terminalColorPrefix, ""));
-
-      xtermColors[xtermColorName] = color;
-    }
-
-    return xtermColors;
+  // 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>[] {
@@ -91,15 +95,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,
     });
   }
 
@@ -107,20 +115,18 @@ export class ThemeStore extends Singleton {
     return this.themes.get(themeId);
   }
 
-  protected applyTheme(theme: Theme) {
-    if (!this.styles) {
-      this.styles = document.createElement("style");
-      this.styles.id = "lens-theme";
-      document.head.append(this.styles);
-    }
-    const cssVars = Object.entries(theme.colors).map(([cssName, color]) => {
-      return `--${cssName}: ${color};`;
+  protected applyTheme(themeId: ThemeId) {
+    const theme = this.getThemeById(themeId);
+    const colors = Object.entries({
+      ...theme.colors,
+      ...Object.fromEntries(this.terminalColors),
     });
 
-    this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
-    // Adding universal theme flag which can be used in component styles
-    const body = document.querySelector("body");
+    colors.forEach(([name, value]) => {
+      document.documentElement.style.setProperty(`--${name}`, value);
+    });
 
-    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");
   }
 }