feat(terminal): add dynamic bright/dark theming for terminal components and terminal preview

ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts

@@ -47,9 +47,6 @@ export class DeesWorkspaceTerminal extends DeesElement {
   @property()
   accessor environmentVariables: { [key: string]: string } = {};
 
-  @property()
-  accessor background: string = '#000000';
-
   /**
    * Promise that resolves when the environment is ready.
    * @deprecated Use executionEnvironment directly
@@ -57,6 +54,9 @@ export class DeesWorkspaceTerminal extends DeesElement {
   private environmentDeferred = new domtools.plugins.smartpromise.Deferred<IExecutionEnvironment>();
   public environmentPromise = this.environmentDeferred.promise;
 
+  // Theme subscription for dynamic theme updates
+  private terminalThemeSubscription: any = null;
+
   constructor() {
     super();
     this.resizeObserver = new ResizeObserver((entries) => {
@@ -72,10 +72,9 @@ export class DeesWorkspaceTerminal extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         padding: 20px;
-        background: var(--dees-terminal-background, #000000);
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
         position: absolute;
         height: 100%;
         width: 100%;
@@ -170,8 +169,8 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
       .xterm .composition-view {
         /* TODO: Composition position got messed up somewhere */
-        background: var(--dees-terminal-background, #000000);
-        color: #fff;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#333333', '#ffffff')};
         display: none;
         position: absolute;
         white-space: nowrap;
@@ -184,7 +183,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
       .xterm .xterm-viewport {
         /* On OS X this is required in order for the scroll bar to appear fully opaque */
-        background-color: var(--dees-terminal-background, #000000);
+        background-color: ${cssManager.bdTheme('#ffffff', '#000000')};
         overflow-y: scroll;
         cursor: default;
         position: absolute;
@@ -275,25 +274,51 @@ export class DeesWorkspaceTerminal extends DeesElement {
   private fitAddon: FitAddon;
   private terminal: Terminal | null = null;
 
+  /**
+   * Get terminal theme colors based on bright/dark mode
+   */
+  private getTerminalTheme(isBright: boolean) {
+    return isBright
+      ? {
+          background: '#ffffff',
+          foreground: '#333333',
+          cursor: '#333333',
+          cursorAccent: '#ffffff',
+          selectionBackground: 'rgba(0, 0, 0, 0.2)',
+        }
+      : {
+          background: '#000000',
+          foreground: '#cccccc',
+          cursor: '#cccccc',
+          cursorAccent: '#000000',
+          selectionBackground: 'rgba(255, 255, 255, 0.2)',
+        };
+  }
+
   public async firstUpdated(
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
-    const domtools = await this.domtoolsPromise;
+    const domtoolsInstance = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
 
-    // Sync CSS variable with background property
-    this.style.setProperty('--dees-terminal-background', this.background);
+    // Get current theme
+    const isBright = domtoolsInstance.themeManager.goBrightBoolean;
 
     const container = this.shadowRoot.getElementById('container');
 
     const term = new Terminal({
       convertEol: true,
       cursorBlink: true,
-      theme: {
-        background: this.background,
-      },
+      theme: this.getTerminalTheme(isBright),
     });
     this.terminal = term;
+
+    // Subscribe to theme changes
+    this.terminalThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+      if (this.terminal) {
+        this.terminal.options.theme = this.getTerminalTheme(goBright);
+      }
+    });
     this.fitAddon = new FitAddon();
     term.loadAddon(this.fitAddon);
 
@@ -383,6 +408,14 @@ export class DeesWorkspaceTerminal extends DeesElement {
 
   async disconnectedCallback(): Promise<void> {
     this.resizeObserver.unobserve(this);
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+      this.terminalThemeSubscription = null;
+    }
+    if (this.terminal) {
+      this.terminal.dispose();
+      this.terminal = null;
+    }
     await super.disconnectedCallback();
   }