style: fix btn-primary and xterm theming for dark/light mode
CI / Build & Test (push) Successful in 3m1s

Use var(--bg) for btn-primary text color and color-mix for hover to
correctly adapt across themes. Add --terminal-bg CSS variable and
_getXtermTheme() helper so the SSH terminal picks up the correct
palette at connection time.
This commit is contained in:
Raven Scott
2026-03-01 23:27:06 -05:00
parent 21b01f1461
commit b0cb5c0647
2 changed files with 58 additions and 26 deletions
+5 -3
View File
@@ -26,6 +26,7 @@
--radius-lg: 14px;
--sidebar-w: 224px;
--transition: 0.15s ease;
--terminal-bg: #0d0d0f;
}
[data-theme="light"] {
@@ -49,6 +50,7 @@
--red: #e11d48;
--red-dim: rgba(225,29,72,.10);
--red-mid: rgba(225,29,72,.20);
--terminal-bg: #1a1a1e;
}
/* Light theme: white checkmark on the darker cyan */
@@ -294,8 +296,8 @@
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--cyan); color: #09090b; }
.btn-primary:hover { background: #06b6d4; }
.btn-primary { background: var(--cyan); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--cyan) 85%, black); }
.btn-secondary {
background: var(--elevated);
@@ -987,7 +989,7 @@
.terminal-statusbar span { color: var(--text3); }
#terminalContainer {
flex: 1;
background: #0d0d0f;
background: var(--terminal-bg);
overflow: hidden;
padding: 8px;
}
+53 -23
View File
@@ -156,6 +156,58 @@ function updateTermSizeDisplay(term) {
* @param {object} conn - SSH connection object with `hsUrl`, `username`, `password`, etc.
* @returns {Promise<void>}
*/
function _getXtermTheme() {
const isLight = document.documentElement.getAttribute('data-theme') === 'light';
if (isLight) {
return {
background: '#1a1a1e',
foreground: '#e4e4e7',
cursor: '#0891b2',
cursorAccent: '#1a1a1e',
selectionBackground: 'rgba(8,145,178,0.30)',
black: '#18181b',
red: '#e11d48',
green: '#16a34a',
yellow: '#d97706',
blue: '#2563eb',
magenta: '#9333ea',
cyan: '#0891b2',
white: '#e4e4e7',
brightBlack: '#3f3f46',
brightRed: '#fb7185',
brightGreen: '#86efac',
brightYellow: '#fde68a',
brightBlue: '#93c5fd',
brightMagenta: '#d8b4fe',
brightCyan: '#67e8f9',
brightWhite: '#fafafa',
};
}
return {
background: '#0d0d0f',
foreground: '#e4e4e7',
cursor: '#22d3ee',
cursorAccent: '#0d0d0f',
selectionBackground: 'rgba(34,211,238,0.25)',
black: '#18181b',
red: '#f43f5e',
green: '#4ade80',
yellow: '#fbbf24',
blue: '#60a5fa',
magenta: '#c084fc',
cyan: '#22d3ee',
white: '#e4e4e7',
brightBlack: '#3f3f46',
brightRed: '#fb7185',
brightGreen: '#86efac',
brightYellow: '#fde68a',
brightBlue: '#93c5fd',
brightMagenta: '#d8b4fe',
brightCyan: '#67e8f9',
brightWhite: '#fafafa',
};
}
async function connectSsh(conn) {
if (_sshConnecting) return;
_sshConnecting = true;
@@ -184,29 +236,7 @@ async function _connectSshImpl(conn) {
cursorBlink: true,
cursorStyle: 'block',
scrollback: 5000,
theme: {
background: '#0d0d0f',
foreground: '#e4e4e7',
cursor: '#22d3ee',
cursorAccent: '#0d0d0f',
selectionBackground: 'rgba(34,211,238,0.25)',
black: '#18181b',
red: '#f43f5e',
green: '#4ade80',
yellow: '#fbbf24',
blue: '#60a5fa',
magenta: '#c084fc',
cyan: '#22d3ee',
white: '#e4e4e7',
brightBlack: '#3f3f46',
brightRed: '#fb7185',
brightGreen: '#86efac',
brightYellow: '#fde68a',
brightBlue: '#93c5fd',
brightMagenta: '#d8b4fe',
brightCyan: '#67e8f9',
brightWhite: '#fafafa'
}
theme: _getXtermTheme()
});
const fitAddon = new FitAddon.FitAddon();