xuanchi/XCTerminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: apply continuous brightness to header and separator instead of binary dark/light mode

Browse Source
This commit is contained in:
ssdfasd
2026-03-21 22:16:04 +08:00
parent 7758138f9c
commit 5907fb74e4
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/frontend/index.html
View File

@@ -240,17 +240,16 @@
const bgValue = Math.round((brightness / 100) * 255); const bgValue = Math.round((brightness / 100) * 255);
const bgColor = `rgb(${bgValue}, ${bgValue}, ${bgValue})`; const bgColor = `rgb(${bgValue}, ${bgValue}, ${bgValue})`;
const headerBg = isDark ? 'rgb(10, 10, 10)' : 'rgb(245, 245, 245)'; const headerBg = `rgb(${Math.max(0, bgValue - 10)}, ${Math.max(0, bgValue - 10)}, ${Math.max(0, bgValue - 10)})`;
const statusBg = isDark ? 'rgb(10, 10, 10)' : 'rgb(240, 240, 240)'; const textColor = `rgb(${Math.min(255, bgValue + 136)}, ${Math.min(255, bgValue + 136)}, ${Math.min(255, bgValue + 136)})`;
const textColor = isDark ? 'rgb(136, 136, 136)' : 'rgb(80, 80, 80)'; const borderColor = `rgb(${Math.max(0, bgValue - 26)}, ${Math.max(0, bgValue - 26)}, ${Math.max(0, bgValue - 26)})`;
const borderColor = isDark ? 'rgb(26, 26, 26)' : 'rgb(220, 220, 220)';
document.documentElement.style.setProperty('--bg-primary', bgColor); document.documentElement.style.setProperty('--bg-primary', bgColor);
document.documentElement.style.setProperty('--bg-secondary', isDark ? 'rgb(10, 10, 10)' : 'rgb(245, 245, 245)'); document.documentElement.style.setProperty('--bg-secondary', headerBg);
document.documentElement.style.setProperty('--text-primary', isDark ? '#cccccc' : '#1a1a1a'); document.documentElement.style.setProperty('--text-primary', isDark ? '#cccccc' : '#1a1a1a');
document.documentElement.style.setProperty('--text-secondary', textColor); document.documentElement.style.setProperty('--text-secondary', textColor);
document.documentElement.style.setProperty('--border', borderColor); document.documentElement.style.setProperty('--border', borderColor);
document.documentElement.style.setProperty('--bg-tertiary', isDark ? 'rgb(30, 30, 30)' : 'rgb(230, 230, 230)'); document.documentElement.style.setProperty('--bg-tertiary', `rgb(${Math.max(0, bgValue - 30)}, ${Math.max(0, bgValue - 30)}, ${Math.max(0, bgValue - 30)})`);
document.documentElement.style.setProperty('--accent', isDark ? '#ff6b6b' : '#2980b9'); document.documentElement.style.setProperty('--accent', isDark ? '#ff6b6b' : '#2980b9');
const terminalTheme = isDark ? { const terminalTheme = isDark ? {
@@ -402,9 +401,7 @@
terminalsContainer.style.display = 'grid'; terminalsContainer.style.display = 'grid';
terminalsContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`; terminalsContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
terminalsContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`; terminalsContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
terminalsContainer.style.gap = '4px'; terminalsContainer.style.gap = '0px';
terminalsContainer.style.padding = '4px';
terminalsContainer.style.background = 'var(--bg-primary)';
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${wsProtocol}//${window.location.host}?shell=${encodeURIComponent(shell)}`; const wsUrl = `${wsProtocol}//${window.location.host}?shell=${encodeURIComponent(shell)}`;
@@ -413,9 +410,9 @@
for (let i = 0; i < totalTerminals; i++) { for (let i = 0; i < totalTerminals; i++) {
const pane = document.createElement('div'); const pane = document.createElement('div');
pane.className = 'terminal-pane'; pane.className = 'terminal-pane';
pane.style.background = 'var(--bg-primary)';
pane.style.padding = '4px';
pane.style.overflow = 'hidden'; pane.style.overflow = 'hidden';
pane.style.margin = '0';
pane.style.padding = '0';
terminalsContainer.appendChild(pane); terminalsContainer.appendChild(pane);
try { try {

11
src/frontend/styles.css
View File

@@ -84,17 +84,26 @@ html, body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-primary); background: var(--bg-primary);
gap: 0;
} }
.terminal-pane { .terminal-pane {
flex: 1; flex: 1;
padding: 4px;
background: var(--bg-primary); background: var(--bg-primary);
overflow: hidden; overflow: hidden;
margin: 0;
padding: 0;
} }
.terminal-pane .xterm { .terminal-pane .xterm {
height: 100%; height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.terminal-pane .xterm-viewport {
margin: 0 !important;
padding: 0 !important;
} }
.terminal-divider { .terminal-divider {