style: fix btn-primary and xterm theming for dark/light mode
CI / Build & Test (push) Successful in 3m1s
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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user