@jacksontian/mwt 1.0.0 → 1.2.0

package/public/js/layout-manager.js

@@ -2,16 +2,24 @@ export class LayoutManager {
   constructor(container, tabBar) {
     this.container = container;
     this.tabBar = tabBar;
-    this.currentLayout = 'side-by-side';
+    this.currentLayout = 'columns';
     this.activeTabId = null;
+    /** @type {((id: string) => void) | null} Called after tab becomes active (focus PTY). */
+    this.onTabActivate = null;
+    /** @type {((layout: string) => void) | null} After refit when layout mode changes (focus PTY). */
+    this.onLayoutApplied = null;
     // These will be set by app.js after construction
     this.fitAll = () => {};
     this.closeTerminal = () => {};
+    this.swapTerminals = null;
   }
 
   setLayout(mode) {
+    // Clear maximized state before switching — layout takes priority
+    this._clearMaximizedState();
+
     // Remove all layout classes
-    this.container.classList.remove('layout-side-by-side', 'layout-grid', 'layout-tabs');
+    this.container.classList.remove('layout-columns', 'layout-rows', 'layout-grid', 'layout-tabs');
     this.container.classList.add(`layout-${mode}`);
     this.currentLayout = mode;
 
@@ -37,8 +45,15 @@ export class LayoutManager {
       }
     }
 
-    // Refit after layout change
-    requestAnimationFrame(() => this.fitAll());
+    // Refit after layout change, then restore keyboard focus to the active terminal
+    requestAnimationFrame(() => {
+      this.fitAll();
+      requestAnimationFrame(() => {
+        if (this.onLayoutApplied) {
+          this.onLayoutApplied(this.currentLayout);
+        }
+      });
+    });
   }
 
   onTerminalAdded(id) {
@@ -53,14 +68,29 @@ export class LayoutManager {
 
   onTerminalRemoved(id) {
     if (this.currentLayout === 'tabs') {
+      let nextTabId = null;
+      if (this.activeTabId === id) {
+        const tabs = [...this.tabBar.querySelectorAll('.tab')];
+        const tidx = tabs.findIndex(t => t.dataset.id === id);
+        if (tidx >= 0) {
+          if (tidx < tabs.length - 1) {
+            nextTabId = tabs[tidx + 1].dataset.id;
+          } else if (tidx > 0) {
+            nextTabId = tabs[tidx - 1].dataset.id;
+          }
+        }
+      }
       this._removeTab(id);
       if (this.activeTabId === id) {
-        // Activate another tab
-        const firstTab = this.tabBar.querySelector('.tab');
-        if (firstTab) {
-          this.activateTab(firstTab.dataset.id);
+        if (nextTabId) {
+          this.activateTab(nextTabId);
         } else {
-          this.activeTabId = null;
+          const firstTab = this.tabBar.querySelector('.tab');
+          if (firstTab) {
+            this.activateTab(firstTab.dataset.id);
+          } else {
+            this.activeTabId = null;
+          }
         }
       }
     } else if (this.currentLayout === 'grid') {
@@ -85,21 +115,25 @@ export class LayoutManager {
     // Clear activity indicator for the activated tab
     this.clearActivity(id);
 
+    if (this.onTabActivate) {
+      this.onTabActivate(id);
+    }
+
     requestAnimationFrame(() => this.fitAll());
   }
 
   markActivity(id) {
     const tab = this.tabBar.querySelector(`.tab[data-id="${id}"]`);
-    if (tab) tab.classList.add('has-activity');
+    if (tab) {tab.classList.add('has-activity');}
     const pane = this.container.querySelector(`.terminal-pane[data-id="${id}"]`);
-    if (pane) pane.classList.add('has-activity');
+    if (pane) {pane.classList.add('has-activity');}
   }
 
   clearActivity(id) {
     const tab = this.tabBar.querySelector(`.tab[data-id="${id}"]`);
-    if (tab) tab.classList.remove('has-activity');
+    if (tab) {tab.classList.remove('has-activity');}
     const pane = this.container.querySelector(`.terminal-pane[data-id="${id}"]`);
-    if (pane) pane.classList.remove('has-activity');
+    if (pane) {pane.classList.remove('has-activity');}
   }
 
   _rebuildTabBar() {
@@ -115,6 +149,7 @@ export class LayoutManager {
     const tab = document.createElement('div');
     tab.className = 'tab';
     tab.dataset.id = id;
+    tab.draggable = true;
 
     const title = document.createElement('span');
     title.className = 'tab-title';
@@ -136,6 +171,35 @@ export class LayoutManager {
       this.activateTab(id);
     });
 
+    tab.addEventListener('dragstart', (e) => {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', id);
+    });
+    tab.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      tab.classList.add('drag-over');
+    });
+    tab.addEventListener('dragleave', () => {
+      tab.classList.remove('drag-over');
+    });
+    tab.addEventListener('drop', (e) => {
+      e.preventDefault();
+      tab.classList.remove('drag-over');
+      const sourceId = e.dataTransfer.getData('text/plain');
+      if (sourceId && sourceId !== id && this.swapTerminals) {
+        this.swapTerminals(sourceId, id);
+        // Reorder tab DOM to match
+        const sourceTab = this.tabBar.querySelector(`.tab[data-id="${sourceId}"]`);
+        if (sourceTab) {
+          const placeholder = document.createComment('tab-swap');
+          sourceTab.replaceWith(placeholder);
+          tab.replaceWith(sourceTab);
+          placeholder.replaceWith(tab);
+        }
+      }
+    });
+
     this.tabBar.appendChild(tab);
   }
 
@@ -149,12 +213,32 @@ export class LayoutManager {
 
   _removeTab(id) {
     const tab = this.tabBar.querySelector(`.tab[data-id="${id}"]`);
-    if (tab) tab.remove();
+    if (tab) {tab.remove();}
+  }
+
+  _clearMaximizedState() {
+    this.container.querySelectorAll('.terminal-pane.maximized').forEach(el => el.classList.remove('maximized'));
+    this.container.querySelectorAll('.terminal-pane.hidden-by-maximize').forEach(el => el.classList.remove('hidden-by-maximize'));
+  }
+
+  onTerminalMaximized() {
+    if (this.currentLayout === 'grid') {
+      this.container.style.gridTemplateColumns = '1fr';
+      this.container.style.gridTemplateRows = '1fr';
+    }
+  }
+
+  onTerminalRestored() {
+    if (this.currentLayout === 'grid') {
+      this._updateGridColumns();
+    }
   }
 
   _updateGridColumns() {
     const count = this.container.querySelectorAll('.terminal-pane').length;
-    const cols = count <= 1 ? 1 : count <= 4 ? 2 : count <= 9 ? 3 : 4;
+    const cols = Math.ceil(Math.sqrt(count));
+    const rows = Math.ceil(count / cols);
     this.container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+    this.container.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
   }
 }

package/public/js/shortcut-manager.js

@@ -0,0 +1,102 @@
+export class ShortcutManager {
+  /**
+   * @param {{ terminalManager, layoutManager, cmdKey: string }} opts
+   */
+  constructor({ terminalManager, layoutManager, cmdKey }) {
+    this._tm = terminalManager;
+    this._lm = layoutManager;
+    this._cmdKey = cmdKey;
+    this._handler = this._onKeyDown.bind(this);
+    document.addEventListener('keydown', this._handler, true);
+    terminalManager.setShortcutManager(this);
+  }
+
+  // Called from document capture phase
+  _onKeyDown(e) {
+    if (this.matchKeyDown(e)) {
+      e._shortcutHandled = true;
+    }
+  }
+
+  // Returns true if the event matched a shortcut (used by xterm handler to block key)
+  matchKeyDown(e) {
+    const ctrl = e.ctrlKey;
+    const alt = e.altKey;
+    const tm = this._tm;
+    const lm = this._lm;
+
+    // Ctrl+Alt+N: new terminal
+    if (ctrl && alt && e.code === 'KeyN') {
+      e.preventDefault();
+      tm.createTerminal();
+      return true;
+    }
+
+    // Ctrl+Alt+W: close active terminal
+    if (ctrl && alt && e.code === 'KeyW') {
+      e.preventDefault();
+      tm.closeActiveTerminal();
+      return true;
+    }
+
+    // Ctrl+Alt+ArrowRight: next terminal
+    if (ctrl && alt && e.code === 'ArrowRight') {
+      e.preventDefault();
+      const nextId = tm.focusNext();
+      if (nextId) {
+        tm.clearActivity(nextId);
+        if (lm.currentLayout === 'tabs') { lm.activateTab(nextId); }
+      }
+      return true;
+    }
+
+    // Ctrl+Alt+ArrowLeft: previous terminal
+    if (ctrl && alt && e.code === 'ArrowLeft') {
+      e.preventDefault();
+      const prevId = tm.focusPrev();
+      if (prevId) {
+        tm.clearActivity(prevId);
+        if (lm.currentLayout === 'tabs') { lm.activateTab(prevId); }
+      }
+      return true;
+    }
+
+    // Alt+1~9: switch to terminal N
+    if (alt && !ctrl && e.code >= 'Digit1' && e.code <= 'Digit9') {
+      e.preventDefault();
+      const ids = tm.getIds();
+      const idx = parseInt(e.code[5], 10) - 1;
+      if (idx < ids.length) {
+        const targetId = ids[idx];
+        tm.focusTerminal(targetId);
+        tm.clearActivity(targetId);
+        if (lm.currentLayout === 'tabs') { lm.activateTab(targetId); }
+      }
+      return true;
+    }
+
+    // Ctrl+Alt+M: maximize/restore active terminal
+    if (ctrl && alt && e.code === 'KeyM') {
+      e.preventDefault();
+      tm.toggleMaximizeActive();
+      return true;
+    }
+
+    // F11: toggle fullscreen
+    if (e.key === 'F11') {
+      e.preventDefault();
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+      return true;
+    }
+
+    return false;
+  }
+
+  destroy() {
+    document.removeEventListener('keydown', this._handler, true);
+  }
+}

package/public/js/terminal-manager.js

@@ -1,20 +1,26 @@
 import { FitAddon } from '/vendor/xterm/addon-fit.mjs';
 import { WebLinksAddon } from '/vendor/xterm/addon-web-links.mjs';
+import { DragManager } from './drag-manager.js';
 
 // xterm.js is loaded as UMD via <script> tag, access from global
 const { Terminal } = globalThis;
 
 export class TerminalManager {
-  constructor(wsClient, container, themeManager) {
+  constructor(wsClient, container, themeManager, cmdKey = 'Ctrl', fontManager = null, i18n = null) {
     this.wsClient = wsClient;
     this.container = container;
     this.themeManager = themeManager;
+    this.fontManager = fontManager;
+    this.cmdKey = cmdKey;
+    this.i18n = i18n;
     this.terminals = new Map(); // id -> { term, fitAddon, element, resizeObserver }
     this.counter = 0;
     this.activeId = null;
     this.changeCallbacks = [];
     this.activityCallbacks = [];
+    this._dragManager = new DragManager((id1, id2) => this.swapTerminals(id1, id2));
     this.activitySet = new Set(); // terminal IDs with unread activity
+    this._shortcutManager = null;
 
     // Update all terminals when theme changes
     if (themeManager) {
@@ -25,6 +31,17 @@ export class TerminalManager {
         }
       });
     }
+
+    // Update all terminals when font changes
+    if (fontManager) {
+      fontManager.onChange(({ fontSize, fontFamily }) => {
+        for (const [, entry] of this.terminals) {
+          entry.term.options.fontSize = fontSize;
+          entry.term.options.fontFamily = fontFamily;
+          entry.fitAddon.fit();
+        }
+      });
+    }
   }
 
   _buildTerminal(id) {
@@ -40,14 +57,17 @@ export class TerminalManager {
 
     const title = document.createElement('span');
     title.className = 'pane-title';
-    title.textContent = `Terminal ${num}`;
+    title.textContent = this.i18n ? this.i18n.t('terminalTitle', num) : `Terminal ${num}`;
+
+    // Drag to swap
+    this._dragManager.attach(pane, header, id);
 
     const headerActions = document.createElement('div');
     headerActions.className = 'pane-actions';
 
     const maximizeBtn = document.createElement('button');
     maximizeBtn.className = 'pane-maximize';
-    maximizeBtn.title = 'Maximize terminal';
+    maximizeBtn.title = this.i18n ? this.i18n.t('maximizeTerminal', this.cmdKey) : `Maximize terminal (${this.cmdKey}+Shift+M)`;
     maximizeBtn.innerHTML = '<svg class="icon-maximize" width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>'
       + '<svg class="icon-restore" width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="4" y="1" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M4 5H2.5A1.5 1.5 0 001 6.5v8A1.5 1.5 0 002.5 16h8a1.5 1.5 0 001.5-1.5V13" stroke="currentColor" stroke-width="1.5"/></svg>';
     maximizeBtn.addEventListener('click', (e) => {
@@ -58,7 +78,7 @@ export class TerminalManager {
     const closeBtn = document.createElement('button');
     closeBtn.className = 'pane-close';
     closeBtn.textContent = '\u00d7';
-    closeBtn.title = 'Close terminal';
+    closeBtn.title = this.i18n ? this.i18n.t('closeTerminalBtn', this.cmdKey) : `Close terminal (${this.cmdKey}+Shift+\`)`;
     closeBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       this.closeTerminal(id);
@@ -80,9 +100,10 @@ export class TerminalManager {
     // Create xterm instance
     const term = new Terminal({
       cursorBlink: true,
-      fontSize: 14,
-      fontFamily: "'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace",
+      fontSize: this.fontManager ? this.fontManager.fontSize : 14,
+      fontFamily: this.fontManager ? this.fontManager.fontFamily : "'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace",
       lineHeight: 1.15,
+      minimumContrastRatio: 4.5,
       theme: this.themeManager ? this.themeManager.getTerminalTheme() : {},
       allowProposedApi: true,
     });
@@ -93,6 +114,19 @@ export class TerminalManager {
     term.loadAddon(webLinksAddon);
     term.open(body);
 
+    // Block xterm from sending app shortcut keys to the terminal process
+    term.attachCustomKeyEventHandler((e) => {
+      if (e.type !== 'keydown') return true;
+      // Already handled by document capture phase — block xterm
+      if (e._shortcutHandled) return false;
+      // Focus is in xterm and capture phase didn't fire — try shortcut manager directly
+      if (this._shortcutManager) {
+        e._shortcutHandled = true;
+        if (this._shortcutManager.matchKeyDown(e)) return false;
+      }
+      return true;
+    });
+
     // Fit after layout settles
     requestAnimationFrame(() => {
       try { fitAddon.fit(); term.scrollToBottom(); } catch { /* ignore if not visible */ }
@@ -111,7 +145,7 @@ export class TerminalManager {
     // Wire xterm -> server (muted during buffer replay to suppress escape sequence responses)
     let muted = false;
     term.onData((data) => {
-      if (!muted) this.wsClient.sendData(id, data);
+      if (!muted) {this.wsClient.sendData(id, data);}
     });
 
     term.onResize(({ cols, rows }) => {
@@ -139,18 +173,22 @@ export class TerminalManager {
     });
 
     // Track active terminal on focus and clear activity
-    pane.addEventListener('mousedown', () => { this.activeId = id; this.clearActivity(id); });
-    term.textarea?.addEventListener('focus', () => { this.activeId = id; this.clearActivity(id); });
+    pane.addEventListener('mousedown', () => { this.setActiveTerminal(id); this.clearActivity(id); });
+    term.textarea?.addEventListener('focus', () => { this.setActiveTerminal(id); this.clearActivity(id); });
 
     const setMuted = (v) => { muted = v; };
     this.terminals.set(id, { term, fitAddon, element: pane, resizeObserver, setMuted });
     this._notifyChange({ type: 'add', id });
-    this.activeId = id;
+    this.setActiveTerminal(id);
     term.focus();
 
     return { term, fitAddon, element: pane, resizeObserver, setMuted };
   }
 
+  setShortcutManager(sm) {
+    this._shortcutManager = sm;
+  }
+
   createTerminal() {
     const id = `term-${++this.counter}`;
     const { fitAddon } = this._buildTerminal(id);
@@ -165,7 +203,7 @@ export class TerminalManager {
   restoreTerminal(id) {
     // Update counter to avoid future ID collisions
     const num = parseInt(id.replace('term-', ''), 10);
-    if (num > this.counter) this.counter = num;
+    if (num > this.counter) {this.counter = num;}
 
     const { fitAddon, setMuted } = this._buildTerminal(id);
 
@@ -183,7 +221,7 @@ export class TerminalManager {
 
   unmuteTerminal(id) {
     const entry = this.terminals.get(id);
-    if (entry) entry.setMuted(false);
+    if (entry) {entry.setMuted(false);}
   }
 
   unmuteAll() {
@@ -201,11 +239,15 @@ export class TerminalManager {
     }
     this.terminals.clear();
     this.counter = 0;
+    this.activeId = null;
   }
 
   closeTerminal(id) {
     const entry = this.terminals.get(id);
-    if (!entry) return;
+    if (!entry) {return;}
+
+    const idsBefore = this.getIds();
+    const idx = idsBefore.indexOf(id);
 
     // If closing a maximized terminal, restore others first
     if (entry.element.classList.contains('maximized')) {
@@ -221,12 +263,51 @@ export class TerminalManager {
     entry.element.remove();
     this.terminals.delete(id);
 
+    if (this.activeId === id) {
+      let nextId = null;
+      if (idx >= 0) {
+        if (idx < idsBefore.length - 1) {
+          nextId = idsBefore[idx + 1];
+        } else if (idx > 0) {
+          nextId = idsBefore[idx - 1];
+        }
+      }
+      this.activeId = nextId;
+    }
+    this._syncPaneFocus();
+
+    const focusId = this.activeId;
+    if (focusId) {
+      requestAnimationFrame(() => {
+        if (this.terminals.has(focusId)) {
+          this.focusTerminal(focusId);
+        }
+      });
+    }
+
     this._notifyChange({ type: 'remove', id });
   }
 
+  /** Updates active terminal state and pane-focused styling (call before focus when switching programmatically). */
+  setActiveTerminal(id) {
+    if (!this.terminals.has(id)) {return;}
+    this.activeId = id;
+    this._syncPaneFocus();
+  }
+
+  _syncPaneFocus() {
+    const active = this.activeId;
+    for (const [tid, entry] of this.terminals) {
+      entry.element.classList.toggle('pane-focused', tid === active);
+    }
+  }
+
   focusTerminal(id) {
     const entry = this.terminals.get(id);
-    if (entry) entry.term.focus();
+    if (entry) {
+      this.setActiveTerminal(id);
+      entry.term.focus();
+    }
   }
 
   fitAll() {
@@ -248,7 +329,7 @@ export class TerminalManager {
 
   toggleMaximize(id) {
     const entry = this.terminals.get(id);
-    if (!entry) return;
+    if (!entry) {return;}
 
     const pane = entry.element;
     const isMaximized = pane.classList.contains('maximized');
@@ -276,7 +357,7 @@ export class TerminalManager {
 
   getMaximizedId() {
     for (const [id, entry] of this.terminals) {
-      if (entry.element.classList.contains('maximized')) return id;
+      if (entry.element.classList.contains('maximized')) {return id;}
     }
     return null;
   }
@@ -289,44 +370,60 @@ export class TerminalManager {
     return [...this.terminals.keys()];
   }
 
+  updateI18n(i18n, cmdKey) {
+    this.i18n = i18n;
+    if (cmdKey) this.cmdKey = cmdKey;
+    for (const [id, entry] of this.terminals) {
+      const pane = entry.element;
+      const maximizeBtn = pane.querySelector('.pane-maximize');
+      const closeBtn = pane.querySelector('.pane-close');
+      if (maximizeBtn) maximizeBtn.title = i18n.t('maximizeTerminal', this.cmdKey);
+      if (closeBtn) closeBtn.title = i18n.t('closeTerminalBtn', this.cmdKey);
+      // Only update title if it hasn't been overridden by the shell (OSC)
+      const titleEl = pane.querySelector('.pane-title');
+      if (titleEl && !titleEl.title) {
+        const num = id.replace('term-', '');
+        titleEl.textContent = i18n.t('terminalTitle', num);
+      }
+    }
+  }
+
   getTitle(id) {
     const entry = this.terminals.get(id);
     if (entry) {
       const paneTitle = entry.element.querySelector('.pane-title');
-      if (paneTitle) return paneTitle.textContent;
+      if (paneTitle) {return paneTitle.textContent;}
     }
     const idx = id.replace('term-', '');
-    return `Terminal ${idx}`;
+    return this.i18n ? this.i18n.t('terminalTitle', idx) : `Terminal ${idx}`;
   }
 
   focusNext() {
     const ids = this.getIds();
-    if (ids.length <= 1) return;
+    if (ids.length <= 1) {return;}
     const idx = ids.indexOf(this.activeId);
     const nextId = ids[(idx + 1) % ids.length];
-    this.activeId = nextId;
     this.focusTerminal(nextId);
     return nextId;
   }
 
   focusPrev() {
     const ids = this.getIds();
-    if (ids.length <= 1) return;
+    if (ids.length <= 1) {return;}
     const idx = ids.indexOf(this.activeId);
     const prevId = ids[(idx - 1 + ids.length) % ids.length];
-    this.activeId = prevId;
     this.focusTerminal(prevId);
     return prevId;
   }
 
   closeActiveTerminal() {
     const id = this.activeId || this.getIds()[0];
-    if (id) this.closeTerminal(id);
+    if (id) {this.closeTerminal(id);}
   }
 
   toggleMaximizeActive() {
     const id = this.activeId || this.getIds()[0];
-    if (id) this.toggleMaximize(id);
+    if (id) {this.toggleMaximize(id);}
   }
 
   onChange(callback) {
@@ -344,10 +441,36 @@ export class TerminalManager {
   }
 
   _notifyChange(event) {
-    for (const cb of this.changeCallbacks) cb(event);
+    for (const cb of this.changeCallbacks) {cb(event);}
   }
 
   _notifyActivity(id, cleared = false) {
-    for (const cb of this.activityCallbacks) cb(id, cleared);
+    for (const cb of this.activityCallbacks) {cb(id, cleared);}
+  }
+
+  swapTerminals(id1, id2) {
+    const entry1 = this.terminals.get(id1);
+    const entry2 = this.terminals.get(id2);
+    if (!entry1 || !entry2) {return;}
+
+    const el1 = entry1.element;
+    const el2 = entry2.element;
+
+    // Swap DOM positions using a placeholder
+    const placeholder = document.createComment('swap');
+    el1.replaceWith(placeholder);
+    el2.replaceWith(el1);
+    placeholder.replaceWith(el2);
+
+    // Swap Map entries to keep iteration order consistent
+    const keys = [...this.terminals.keys()];
+    const idx1 = keys.indexOf(id1);
+    const idx2 = keys.indexOf(id2);
+    const entries = [...this.terminals.entries()];
+    [entries[idx1], entries[idx2]] = [entries[idx2], entries[idx1]];
+    this.terminals = new Map(entries);
+
+    this._notifyChange({ type: 'swap', id1, id2 });
+    requestAnimationFrame(() => this.fitAll());
   }
 }

package/public/js/theme-manager.js

@@ -1,21 +1,21 @@
-const STORAGE_KEY = 'myterminal-theme';
+const STORAGE_KEY = 'mwt-theme';
 
 const DARK_TERMINAL_THEME = {
   background: '#0a0c12',
-  foreground: '#d4d8e8',
+  foreground: '#e4e7f2',
   cursor: '#6c8cff',
   cursorAccent: '#0a0c12',
   selectionBackground: '#264f78',
   selectionForeground: '#ffffff',
-  black: '#1c2035',
+  black: '#5c657c',
   red: '#e05560',
   green: '#7ec699',
   yellow: '#e6c07b',
   blue: '#6c8cff',
   magenta: '#c678dd',
   cyan: '#56b6c2',
-  white: '#d4d8e8',
-  brightBlack: '#555b72',
+  white: '#e4e7f2',
+  brightBlack: '#9aa4ba',
   brightRed: '#ff6b76',
   brightGreen: '#98e6b3',
   brightYellow: '#ffd68a',
@@ -91,6 +91,6 @@ export class ThemeManager {
 
   _apply(theme) {
     document.documentElement.dataset.theme = theme;
-    for (const cb of this._listeners) cb(theme);
+    for (const cb of this._listeners) {cb(theme);}
   }
 }