glad-web 1.0.43 → 1.0.45

package/lib/web/git.js

@@ -51,23 +51,23 @@
                         let addCount = 0;
                         let subCount = 0;
                         for (const line of block.lines) {
-                            let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
-                            if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; addCount++; }
-                            else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; subCount++; }
-                            else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
-                            else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('commit') || line.startsWith('Author') || line.startsWith('Date')) color = '#fff';
+                            let color = 'var(--git-diff-text)', bg = 'transparent', borderLeft = '2px solid transparent';
+                            if (line.startsWith('+') && !line.startsWith('+++')) { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; addCount++; }
+                            else if (line.startsWith('-') && !line.startsWith('---')) { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; subCount++; }
+                            else if (line.startsWith('@@')) { color = 'var(--git-hunk-text)'; bg = 'var(--git-hunk-bg)'; }
+                            else if (line.startsWith('diff') || line.startsWith('index') || line.startsWith('commit') || line.startsWith('Author') || line.startsWith('Date')) color = 'var(--text)';
 
                             blockContent += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding:2px 8px; white-space:pre-wrap; word-break:break-all;">${line.replace(/</g, '&lt;').replace(/>/g, '&gt;') || ' '}</div>`;
                         }
 
                         const isOpen = block.name === 'Commit Details';
-                        const statHTML = block.name !== 'Commit Details' ? `<span style="margin-left: 12px; font-family: monospace; font-size: 12px;"><span style="color:#4ade80;">+${addCount}</span> <span style="color:#f87171; margin-left:6px;">-${subCount}</span></span>` : '';
+                        const statHTML = block.name !== 'Commit Details' ? `<span style="margin-left: 12px; font-family: monospace; font-size: 12px;"><span style="color:var(--git-add-text);">+${addCount}</span> <span style="color:var(--git-del-text); margin-left:6px;">-${subCount}</span></span>` : '';
                         diffHTML += `
-                            <details ${isOpen ? 'open' : ''} style="margin-bottom: 8px; border: 1px solid #333; border-radius: 4px; overflow: hidden;">
-                                <summary style="background: #1e1e1e; padding: 6px 10px; cursor: pointer; color: #fff; font-weight: 500; font-size: 13px; outline: none; user-select: none;">
+                            <details ${isOpen ? 'open' : ''} class="git-diff-panel">
+                                <summary class="git-diff-summary">
                                     ${block.name === 'Commit Details' ? '📝 ' : '📄 '}${block.name.replace(/</g, '&lt;').replace(/>/g, '&gt;')}${statHTML}
                                 </summary>
-                                <div style="background: #0d0d0d; overflow-x: auto; font-family: monospace; font-size: 12px; line-height: 1.5; padding: 4px 0;">
+                                <div class="git-diff-body">
                                     ${blockContent}
                                 </div>
                             </details>
@@ -86,7 +86,7 @@
         function renderCommitDiffFullView() {
             const content = document.getElementById('git-content');
             let html = `
-            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10;">
+            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;">
                 <button class="icon-btn" onclick="switchGitTab('graph')" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center;">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> Back
                 </button>
@@ -150,11 +150,11 @@
                         let colorStyle = '';
                         let badgeHtml = '';
                         if (f.gitStatus) {
-                             let color = '#fff';
+                             let color = 'var(--text)';
                              let label = f.gitStatus.trim();
-                             if (label.includes('U') || label.includes('?')) { colorStyle = 'color: #4ade80;'; color = '#4ade80'; if(label === '??') label = 'U'; }
-                             else if (label.includes('M')) { colorStyle = 'color: #f59e0b;'; color = '#f59e0b'; }
-                             else if (label.includes('D')) { colorStyle = 'color: #f87171;'; color = '#f87171'; }
+                             if (label.includes('U') || label.includes('?')) { colorStyle = 'color: var(--git-add-text);'; color = 'var(--git-add-text)'; if(label === '??') label = 'U'; }
+                             else if (label.includes('M')) { colorStyle = 'color: var(--git-modified-text);'; color = 'var(--git-modified-text)'; }
+                             else if (label.includes('D')) { colorStyle = 'color: var(--git-del-text);'; color = 'var(--git-del-text)'; }
                              badgeHtml = `<span style="color:${color}; font-weight:700; font-size:10px; border:1px solid ${color}; padding:1px 4px; border-radius:3px; opacity:0.7; margin-left: auto;">${label}</span>`;
                         }
 
@@ -232,11 +232,10 @@
                 files.forEach((f, idx) => {
                     const encodedPath = encodePathValue(f.path);
                     const escapedPath = escapeHtml(f.path);
-                    let color = '#fff';
+                    let statusClass = 'modified';
                     let label = f.status;
-                    if (label.includes('M')) { color = '#f59e0b'; }
-                    else if (label.includes('A') || label === '??') { color = '#4ade80'; if(label === '??') label = 'U'; }
-                    else if (label.includes('D')) { color = '#f87171'; }
+                    if (label.includes('A') || label === '??') { statusClass = 'added'; if(label === '??') label = 'U'; }
+                    else if (label.includes('D')) { statusClass = 'deleted'; }
                     const isUntracked = f.status === '??';
                     const hasStaged = !isUntracked && f.status[0] && f.status[0] !== ' ';
                     const hasUnstaged = !isUntracked && f.status[1] && f.status[1] !== ' ';
@@ -245,14 +244,14 @@
                     if (statsMap[f.path]) {
                         const { added, removed } = statsMap[f.path];
                         if (added > 0 || removed > 0) {
-                            statHTML = `<span style="margin-left: 12px; font-family: monospace; font-size: 12px; white-space: nowrap;"><span style="color:#4ade80;">+${added}</span> <span style="color:#f87171; margin-left:6px;">-${removed}</span></span>`;
+                            statHTML = `<span style="margin-left: 12px; font-family: monospace; font-size: 12px; white-space: nowrap;"><span style="color:var(--git-add-text);">+${added}</span> <span style="color:var(--git-del-text); margin-left:6px;">-${removed}</span></span>`;
                         }
                     }
 
-                    html += `<div style="margin-bottom: 8px; border: 1px solid #333; border-radius: 4px; background: #1e1e1e; overflow: hidden;">
-                        <div onclick="toggleInlineDiff('${encodedPath}', 'inline-diff-${idx}', ${!!hasStaged}, ${!!hasUnstaged}, ${isUntracked})" style="padding: 6px 10px; cursor: pointer; color: #fff; font-weight: 500; font-size: 13px; outline: none; user-select: none; display: flex; align-items: center;">
-                            <div style="flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">📄 ${escapedPath}${statHTML}</div>
-                            <span style="color:${color}; font-weight:700; font-size:10px; border:1px solid ${color}; padding:1px 4px; border-radius:3px; opacity:0.8; flex-shrink: 0; margin-left: 8px;">${label}</span>
+                    html += `<div class="git-change-card">
+                        <div class="git-change-header" onclick="toggleInlineDiff('${encodedPath}', 'inline-diff-${idx}', ${!!hasStaged}, ${!!hasUnstaged}, ${isUntracked})">
+                            <div class="git-change-path">📄 ${escapedPath}${statHTML}</div>
+                            <span class="git-status-badge ${statusClass}">${label}</span>
                         </div>
                         <div id="inline-diff-${idx}" style="display: none;" data-loaded="false"></div>
                     </div>`;
@@ -335,26 +334,26 @@
                 });
 
                 if (!currentFileDiff && !currentFileContent) {
-                    container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">No diff available</div>`;
+                    container.innerHTML = `<div style="padding: 10px; color: var(--git-del-text); font-size: 12px; text-align:center;">No diff available</div>`;
                     return;
                 }
 
                 let blockContent = '';
                 currentFileDiff.split('\n').forEach(line => {
-                    let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
-                    if (line.startsWith('+') && !line.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
-                    else if (line.startsWith('-') && !line.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
-                    else if (line.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
+                    let color = 'var(--git-diff-text)', bg = 'transparent', borderLeft = '2px solid transparent';
+                    if (line.startsWith('+') && !line.startsWith('+++')) { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; }
+                    else if (line.startsWith('-') && !line.startsWith('---')) { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; }
+                    else if (line.startsWith('@@')) { color = 'var(--git-hunk-text)'; bg = 'var(--git-hunk-bg)'; }
 
                     blockContent += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding:2px 8px; white-space:pre-wrap; word-break:break-all;">${escapeHtml(line) || ' '}</div>`;
                 });
 
                 container.dataset.loaded = 'true';
                 container.innerHTML = `
-                    <div style="background: #0d0d0d; overflow-x: auto; font-family: monospace; font-size: 12px; line-height: 1.5; padding: 4px 0; border-top: 1px solid #333; max-height: 400px;">
+                    <div class="git-inline-diff git-inline-diff-body">
                         ${blockContent}
                     </div>
-                    <div style="padding: 8px; background: #1a1a1a; border-top: 1px solid #333; text-align: center;">
+                    <div class="git-inline-diff-footer">
                         <button onclick="showFileDetails(decodePathValue('${encodedPath}'), true, ${!!hasStaged}, ${!!hasUnstaged}, ${!!isUntracked})" style="background: var(--primary); border: none; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;">
                             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
                             View Full File
@@ -362,7 +361,7 @@
                     </div>
                 `;
             } catch (e) {
-                container.innerHTML = `<div style="padding: 10px; color: #f87171; font-size: 12px; text-align:center;">Error: ${e.message}</div>`;
+                container.innerHTML = `<div style="padding: 10px; color: var(--git-del-text); font-size: 12px; text-align:center;">Error: ${e.message}</div>`;
             }
         };
 
@@ -404,7 +403,7 @@
         function renderFileDetails() {
             const content = document.getElementById('git-content');
             let html = `
-            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10;">
+            <div style="display:flex; align-items:center; background: var(--card-bg); padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;">
                 <button class="icon-btn" onclick="switchGitTab(currentGitTab)" style="color: var(--primary); margin-right: 12px; font-weight:600; font-size:14px; display:flex; align-items:center; flex-shrink: 0;">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg> Back
                 </button>
@@ -415,27 +414,27 @@
             if (currentFileDiff && currentFileContent) {
                 html += `
                 <div style="display: flex; gap: 6px; flex-shrink: 0; align-items: center;">
-                    <div style="display: flex; gap: 2px; margin-right: 8px; background: rgba(0,0,0,0.3); padding: 2px; border-radius: 4px;">
-                        <button onclick="changeFontSize(-1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom Out" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A-</button>
-                        <button onclick="changeFontSize(0)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Reset Size" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">${currentFontSize}</button>
-                        <button onclick="changeFontSize(1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom In" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A+</button>
+                    <div class="git-file-toolbar-group">
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(-1)" title="Zoom Out">A-</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(0)" title="Reset Size">${currentFontSize}</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(1)" title="Zoom In">A+</button>
                     </div>
-                    <button onclick="toggleFileMode()" style="background: ${currentFileMode === 'diff' ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
+                    <button class="git-file-mode-button${currentFileMode === 'diff' ? ' active' : ''}" onclick="toggleFileMode()">
                         Diff
                     </button>
-                    <button onclick="toggleFileWrap()" style="background: ${currentFileWrap ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
+                    <button class="git-file-mode-button${currentFileWrap ? ' active' : ''}" onclick="toggleFileWrap()">
                         Wrap
                     </button>
                 </div>`;
             } else {
                  html += `
                 <div style="display: flex; gap: 6px; flex-shrink: 0; align-items: center;">
-                    <div style="display: flex; gap: 2px; margin-right: 8px; background: rgba(0,0,0,0.3); padding: 2px; border-radius: 4px;">
-                        <button onclick="changeFontSize(-1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom Out" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A-</button>
-                        <button onclick="changeFontSize(0)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Reset Size" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">${currentFontSize}</button>
-                        <button onclick="changeFontSize(1)" style="background: transparent; border: none; color: #aaa; padding: 4px 8px; font-size: 12px; cursor: pointer; outline: none; border-radius: 3px;" title="Zoom In" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#aaa'">A+</button>
+                    <div class="git-file-toolbar-group">
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(-1)" title="Zoom Out">A-</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(0)" title="Reset Size">${currentFontSize}</button>
+                        <button class="git-file-toolbar-button" onclick="changeFontSize(1)" title="Zoom In">A+</button>
                     </div>
-                    <button onclick="toggleFileWrap()" style="background: ${currentFileWrap ? 'var(--primary)' : 'rgba(255,255,255,0.1)'}; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none;">
+                    <button class="git-file-mode-button${currentFileWrap ? ' active' : ''}" onclick="toggleFileWrap()">
                         Wrap
                     </button>
                 </div>`;
@@ -446,7 +445,7 @@
             const wrapStyle = currentFileWrap ? 'white-space: pre-wrap; word-break: break-all;' : 'white-space: pre;';
             const innerWrapStyle = currentFileWrap ? '' : 'min-width: max-content;';
             html += `<div style="padding: 10px;">`;
-            html += `<div style="background:#0d0d0d; border-radius:8px; overflow-x:auto; font-family:monospace; font-size:${currentFontSize}px; line-height:1.5; padding: 12px 0; margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;">`;
+            html += `<div class="git-file-code" style="font-size:${currentFontSize}px; line-height:1.5; -webkit-text-size-adjust:100%; text-size-adjust:100%;">`;
             html += `<div style="${innerWrapStyle}">`;
 
             let mergedLines = [];
@@ -505,20 +504,20 @@
             }
 
             mergedLines.forEach(item => {
-                let color = '#ccc', bg = 'transparent', borderLeft = '2px solid transparent';
+                let color = 'var(--git-diff-text)', bg = 'transparent', borderLeft = '2px solid transparent';
                 let prefix = ' ';
-                if (item.type === 'added') { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; prefix = '+'; }
-                else if (item.type === 'deleted') { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; prefix = '-'; }
+                if (item.type === 'added') { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; prefix = '+'; }
+                else if (item.type === 'deleted') { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; prefix = '-'; }
                 else if (item.type === 'raw') {
-                    if (item.text.startsWith('+') && !item.text.startsWith('+++')) { color = '#4ade80'; bg = 'rgba(74, 222, 128, 0.1)'; borderLeft = '2px solid #4ade80'; }
-                    else if (item.text.startsWith('-') && !item.text.startsWith('---')) { color = '#f87171'; bg = 'rgba(248, 113, 113, 0.1)'; borderLeft = '2px solid #f87171'; }
-                    else if (item.text.startsWith('@@')) { color = '#60a5fa'; bg = 'rgba(96, 165, 250, 0.1)'; }
+                    if (item.text.startsWith('+') && !item.text.startsWith('+++')) { color = 'var(--git-add-text)'; bg = 'var(--git-add-bg)'; borderLeft = '2px solid var(--git-add-text)'; }
+                    else if (item.text.startsWith('-') && !item.text.startsWith('---')) { color = 'var(--git-del-text)'; bg = 'var(--git-del-bg)'; borderLeft = '2px solid var(--git-del-text)'; }
+                    else if (item.text.startsWith('@@')) { color = 'var(--git-hunk-text)'; bg = 'var(--git-hunk-bg)'; }
                     prefix = '';
                 }
 
                 const renderedText = item.type === 'raw' ? item.text : `${prefix} ${item.text}`;
                 html += `<div style="color:${color}; background:${bg}; border-left:${borderLeft}; padding: 0 12px 0 8px; display:flex;">`;
-                html += `<div style="color:#555; margin-right:16px; user-select:none; flex-shrink:0; width: 36px; text-align:right;">${item.lineNum || ''}</div>`;
+                html += `<div class="git-line-number">${item.lineNum || ''}</div>`;
                 html += `<div style="flex:1; min-width:0; ${wrapStyle}">${escapeHtml(renderedText) || ' '}</div>`;
                 html += `</div>`;
             });
@@ -531,3 +530,6 @@
             refreshSessionsNow();
             document.addEventListener('visibilitychange', refreshSessionsNow);
         });
+        window.addEventListener('glad-theme-change', () => {
+            if (document.getElementById('git-view').classList.contains('active')) switchGitTab(currentGitTab);
+        });

package/lib/web/gitgraph.js

@@ -74,10 +74,10 @@ class GitGraphRenderer {
             rowDiv.style.display = 'flex';
             rowDiv.style.alignItems = 'center';
             rowDiv.style.height = this.rowHeight + 'px';
-            rowDiv.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+            rowDiv.style.borderBottom = '1px solid var(--line)';
             rowDiv.style.position = 'relative';
             rowDiv.style.cursor = 'pointer';
-            rowDiv.onmouseover = () => rowDiv.style.backgroundColor = 'rgba(255,255,255,0.05)';
+            rowDiv.onmouseover = () => rowDiv.style.backgroundColor = 'var(--surface-soft)';
             rowDiv.onmouseout = () => rowDiv.style.backgroundColor = 'transparent';
 
             const canvas = document.createElement('canvas');
@@ -102,7 +102,7 @@ class GitGraphRenderer {
             contentDiv.style.overflow = 'hidden';
 
             const msgSpan = document.createElement('span');
-            msgSpan.style.color = '#fff';
+            msgSpan.style.color = 'var(--text)';
             msgSpan.style.fontSize = '13px';
             msgSpan.style.fontWeight = '500';
             msgSpan.style.overflow = 'hidden';
@@ -160,18 +160,18 @@ class GitGraphRenderer {
                     el.remove();
                 });
                 
-                rowDiv.style.backgroundColor = 'rgba(255,255,255,0.05)';
+                rowDiv.style.backgroundColor = 'var(--surface-soft)';
                 
                 const detailsDiv = document.createElement('div');
                 detailsDiv.className = 'gitgraph-details-view';
-                detailsDiv.style.backgroundColor = '#121212';
+                detailsDiv.style.backgroundColor = 'var(--surface)';
                 detailsDiv.style.borderLeft = '2px solid ' + this.getColor(commit.col);
                 detailsDiv.style.padding = '16px';
                 detailsDiv.style.margin = '4px 0 4px ' + (canvasWidth) + 'px';
                 detailsDiv.style.borderRadius = '0 6px 6px 0';
                 detailsDiv.style.fontSize = '13px';
                 detailsDiv.style.color = 'var(--text)';
-                detailsDiv.style.boxShadow = 'inset 0 0 10px rgba(0,0,0,0.5)';
+                detailsDiv.style.boxShadow = 'inset 0 0 10px rgba(0,0,0,0.12)';
                 
                 let detailsHTML = `
                     <div style="display:flex; justify-content:space-between; margin-bottom:12px;">
@@ -189,7 +189,7 @@ class GitGraphRenderer {
                 
                 // Add diff placeholder
                 detailsHTML += `
-                    <div style="border-top:1px solid #333; padding-top:12px; margin-top:12px;">
+                    <div style="border-top:1px solid var(--line); padding-top:12px; margin-top:12px;">
                         <button onclick="window.loadCommitDiff('${commit.hash}')" style="background:var(--primary); border:none; color:#fff; padding:6px 12px; border-radius:4px; font-size:12px; cursor:pointer;">View Full Diff</button>
                     </div>
                 `;
@@ -269,7 +269,7 @@ class GitGraphRenderer {
         ctx.fillStyle = this.getColor(commit.col);
         ctx.fill();
         ctx.lineWidth = 2;
-        ctx.strokeStyle = '#121212'; // dark background match
+        ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--surface').trim() || '#121212';
         ctx.stroke();
     }
 

package/lib/web/index.html

@@ -5,6 +5,17 @@
     <title>Glad - AI Sessions</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#000000">
+    <script>
+        (() => {
+            const storedTheme = localStorage.getItem('glad-theme');
+            const theme = storedTheme === 'light' || storedTheme === 'dark'
+                ? storedTheme
+                : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            document.documentElement.dataset.theme = theme;
+            document.documentElement.style.backgroundColor = theme === 'dark' ? '#000000' : '#f5f6f8';
+        })();
+    </script>
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/svg+xml" href="logo.svg">
     <link rel="apple-touch-icon" href="logo.svg">
@@ -13,6 +24,27 @@
 </head>
 <body>
     <div id="debug-log"></div>
+    <svg class="app-icon-sprite" aria-hidden="true">
+        <symbol id="icon-model" viewBox="0 0 24 24"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></symbol>
+        <symbol id="icon-usage" viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></symbol>
+        <symbol id="icon-context" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9h-9V3Z"/><path d="M15 3.5A9 9 0 0 1 20.5 9H15V3.5Z"/></symbol>
+        <symbol id="icon-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></symbol>
+        <symbol id="icon-resume" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 2.3-5.7L4 8.6"/><path d="M4 4v4.6h4.6"/><path d="M12 8v4l3 2"/></symbol>
+        <symbol id="icon-fork" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="12" cy="19" r="2"/><path d="M6 7v2c0 4 6 3 6 8M18 7v2c0 4-6 3-6 8"/></symbol>
+        <symbol id="icon-shield" viewBox="0 0 24 24"><path d="M12 3 20 6v5c0 5-3.4 8.2-8 10-4.6-1.8-8-5-8-10V6l8-3Z"/><path d="m9 12 2 2 4-4"/></symbol>
+        <symbol id="icon-status" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/></symbol>
+        <symbol id="icon-prompts" viewBox="0 0 24 24"><path d="M4 5h16v11H8l-4 4V5Z"/><path d="M8 9h8M8 12h5"/></symbol>
+        <symbol id="icon-compact" viewBox="0 0 24 24"><path d="m4 9 5 0 0-5M9 9 4 4M20 9h-5V4M15 9l5-5M4 15h5v5M9 15l-5 5M20 15h-5v5M15 15l5 5"/></symbol>
+        <symbol id="icon-sandbox" viewBox="0 0 24 24"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z"/><path d="m4.5 7.8 7.5 4.3 7.5-4.3M12 12v9"/></symbol>
+        <symbol id="icon-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
+        <symbol id="icon-skills" viewBox="0 0 24 24"><path d="M9 3H4a1 1 0 0 0-1 1v5h2.5a2.5 2.5 0 1 1 0 5H3v5a1 1 0 0 0 1 1h5v-2.5a2.5 2.5 0 1 1 5 0V20h5a1 1 0 0 0 1-1v-5h-2.5a2.5 2.5 0 1 1 0-5H20V4a1 1 0 0 0-1-1h-5v2.5a2.5 2.5 0 1 1-5 0V3Z"/></symbol>
+        <symbol id="icon-image" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m4 17 4.5-4 3.5 3 2.5-2 5.5 4"/></symbol>
+        <symbol id="icon-file" viewBox="0 0 24 24"><path d="M9 8.5 14.5 3a4 4 0 0 1 5.7 5.7L10.4 18.5a5.5 5.5 0 0 1-7.8-7.8l9.2-9.2"/><path d="m7 11 7-7a2 2 0 1 1 2.8 2.8l-9.1 9.1a2.5 2.5 0 0 1-3.5-3.5L12 4.6"/></symbol>
+        <symbol id="icon-schedule" viewBox="0 0 24 24"><circle cx="10.5" cy="13" r="7.5"/><path d="M10.5 9v4l2.5 1.5M18 3v6M15 6h6"/></symbol>
+        <symbol id="icon-calendar" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></symbol>
+    </svg>
+
+    <div id="app-shell">
     
     <!-- Lobby View -->
     <div id="lobby-view" class="view active">
@@ -29,9 +61,7 @@
                     </button>
                     <button id="schedule-create-button" class="header-action-btn icon-only" type="button"
                         onclick="showScheduleModal()" title="New scheduled task" aria-label="New scheduled task">
-                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="13" r="8"></circle><path d="M12 9v4l2.5 1.5"></path><path d="M9 2h6"></path><path d="M12 2v3"></path>
-                        </svg>
+                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-calendar"></use></svg>
                     </button>
                     <button id="app-settings-button" class="header-action-btn icon-only" type="button"
                         onclick="openSettings()" title="Settings" aria-label="Settings">
@@ -55,6 +85,14 @@
         </div>
     </div>
 
+    <div id="sidebar-resizer" role="separator" aria-label="Resize session sidebar" aria-orientation="vertical"></div>
+    <main id="detail-pane">
+        <div id="detail-empty">
+            <img src="logo.svg" alt="" aria-hidden="true">
+            <h2>Select a session</h2>
+            <p>Choose an active session from the sidebar or create a new one.</p>
+        </div>
+
     <!-- Usage Dashboard View -->
     <div id="usage-view" class="view">
         <div class="usage-nav">
@@ -126,7 +164,6 @@
                 </button>
                 <div id="session-title">Terminal</div>
                 <div style="display: flex; align-items: center; gap: 8px;">
-                    <button id="codex-terminal-switch" class="icon-btn" onclick="toggleCodexPresentation()" title="Switch Codex interface" style="display:none; color: var(--primary); font-size: 12px; font-weight: 700; background: rgba(0, 122, 255, 0.1); padding: 5px 9px; border-radius: 15px; gap: 4px;">TERM</button>
                     <button class="icon-btn" onclick="showHistory()" title="History" style="color: var(--primary); font-size: 12px; font-weight: 700; background: rgba(0, 122, 255, 0.1); padding: 5px 9px; border-radius: 15px; gap: 4px;">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"></path><polyline points="3 3 3 9 9 9"></polyline><path d="M12 7v5l3 2"></path></svg>
                         HIS
@@ -137,21 +174,23 @@
                     </button>
                 </div>
             </div>
+            <div id="session-status-strip" aria-live="polite">
+                <div id="session-attention-rail"></div>
+            </div>
             <div id="terminal-controls">
                 <div id="timed-tag-rail"></div>
+                <div id="composer-skill-prefix"></div>
                 <div id="input-row">
                     <textarea id="cmd-input" rows="1" placeholder="Type a message..."></textarea>
-                    <button id="timer-btn" title="Add image or schedule send" aria-label="Add image or schedule send">+</button>
-                    <button id="send-btn">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                    <button id="attachment-btn" class="composer-action-btn" type="button" title="Attachment" aria-label="Attachment"><svg class="action-icon" aria-hidden="true"><use href="#icon-file"></use></svg></button>
+                    <button id="schedule-send-btn" class="composer-action-btn" type="button" title="Schedule" aria-label="Schedule"><svg class="action-icon" aria-hidden="true"><use href="#icon-schedule"></use></svg></button>
+                    <button id="send-btn" type="button" title="Send" aria-label="Send">
+                        <svg class="action-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                     </button>
                 </div>
                 <div id="attachment-strip" aria-live="polite"></div>
-                <div id="composer-menu" role="menu">
-                    <button id="attach-image-btn" class="composer-menu-btn" type="button" role="menuitem">Add image</button>
-                    <button id="schedule-send-btn" class="composer-menu-btn" type="button" role="menuitem">Schedule send</button>
-                </div>
-                <input id="image-file-input" type="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
+                <input id="attachment-file-input" type="file" multiple hidden>
+                <div id="composer-action-tooltip" role="tooltip"></div>
                 <div id="claude-control-panel">
                     <div class="claude-control-rail">
                         <div class="claude-control-page primary">
@@ -166,13 +205,13 @@
                                     <option value="xhigh">Extra high</option>
                                     <option value="max">Max</option>
                                 </select>
-                                <button id="claude-model-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('model')" title="Model and effort">Model</button>
+                                <button id="claude-model-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('model')" title="Model and effort" aria-label="Model and effort"><svg class="action-icon" aria-hidden="true"><use href="#icon-model"></use></svg><span class="action-label">Model</span></button>
                             </div>
-                            <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="requestClaudeUsage()" title="Show Claude usage">Usage</button>
-                            <button id="claude-context-btn" class="claude-ctrl-btn" onclick="requestClaudeContext()" title="Show Claude context">Context</button>
-                            <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn">Abort</button>
-                            <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume">Resume</button>
-                            <button id="claude-fork-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeForkPanel()" title="Fork a Claude session">Fork</button>
+                            <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="requestClaudeUsage()" title="Show Claude usage" aria-label="Show Claude usage"><svg class="action-icon" aria-hidden="true"><use href="#icon-usage"></use></svg><span class="action-label">Usage</span></button>
+                            <button id="claude-context-btn" class="claude-ctrl-btn" onclick="requestClaudeContext()" title="Show Claude context" aria-label="Show Claude context"><svg class="action-icon" aria-hidden="true"><use href="#icon-context"></use></svg><span class="action-label">Context</span></button>
+                            <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn" aria-label="Abort current Claude turn"><svg class="action-icon" aria-hidden="true"><use href="#icon-stop"></use></svg><span class="action-label">Abort</span></button>
+                            <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume" aria-label="Choose a Claude session to resume"><svg class="action-icon" aria-hidden="true"><use href="#icon-resume"></use></svg><span class="action-label">Resume</span></button>
+                            <button id="claude-fork-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeForkPanel()" title="Fork a Claude session" aria-label="Fork a Claude session"><svg class="action-icon" aria-hidden="true"><use href="#icon-fork"></use></svg><span class="action-label">Fork</span></button>
                         </div>
                         <div class="claude-control-page secondary">
                             <div class="claude-picker-wrap">
@@ -182,7 +221,7 @@
                                     <option value="plan">Plan mode</option>
                                     <option value="bypassPermissions">Bypass</option>
                                 </select>
-                                <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode">Permission</button>
+                                <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode" aria-label="Permission mode"><svg class="action-icon" aria-hidden="true"><use href="#icon-shield"></use></svg><span class="action-label">Permission</span></button>
                             </div>
                         </div>
                     </div>
@@ -194,28 +233,28 @@
                 <div id="codex-control-panel">
                     <div id="codex-control-rail" class="codex-control-rail">
                         <div class="codex-control-page">
-                            <button id="codex-model-btn" class="claude-ctrl-btn" onclick="toggleCodexModelPanel()" title="Model and effort">Model</button>
-                            <button id="codex-status-btn" class="claude-ctrl-btn" onclick="requestCodexStatus()" title="Show Codex account, limits, and context status">Status</button>
-                            <button id="codex-abort-btn" class="claude-ctrl-btn danger" onclick="abortCodexSession()" title="Abort current Codex turn">Abort</button>
-                            <button id="codex-resume-btn" class="claude-ctrl-btn primary" onclick="toggleCodexResumePanel()" title="Resume a Codex thread">Resume</button>
-                            <button id="codex-fork-btn" class="claude-ctrl-btn primary" onclick="toggleCodexForkPanel()" title="Fork a Codex thread in this conversation">Fork</button>
+                            <button id="codex-model-btn" class="claude-ctrl-btn" onclick="toggleCodexModelPanel()" title="Model and effort" aria-label="Model and effort"><svg class="action-icon" aria-hidden="true"><use href="#icon-model"></use></svg><span class="action-label">Model</span></button>
+                            <button id="codex-status-btn" class="claude-ctrl-btn" onclick="requestCodexStatus()" title="Show Codex account, limits, and context status" aria-label="Show Codex status"><svg class="action-icon" aria-hidden="true"><use href="#icon-status"></use></svg><span class="action-label">Status</span></button>
+                            <button id="codex-abort-btn" class="claude-ctrl-btn danger" onclick="abortCodexSession()" title="Abort current Codex turn" aria-label="Abort current Codex turn"><svg class="action-icon" aria-hidden="true"><use href="#icon-stop"></use></svg><span class="action-label">Abort</span></button>
+                            <button id="codex-resume-btn" class="claude-ctrl-btn primary" onclick="toggleCodexResumePanel()" title="Resume a Codex thread" aria-label="Resume a Codex thread"><svg class="action-icon" aria-hidden="true"><use href="#icon-resume"></use></svg><span class="action-label">Resume</span></button>
+                            <button id="codex-fork-btn" class="claude-ctrl-btn primary" onclick="toggleCodexForkPanel()" title="Fork a Codex thread in this conversation" aria-label="Fork this Codex thread"><svg class="action-icon" aria-hidden="true"><use href="#icon-fork"></use></svg><span class="action-label">Fork</span></button>
                         </div>
                         <div class="codex-control-page">
-                            <button id="codex-prompts-btn" class="claude-ctrl-btn" onclick="toggleCodexPromptPanel()" title="Browse and copy recent prompts">Prompts</button>
-                            <button id="codex-compact-btn" class="claude-ctrl-btn" onclick="compactCodexContext()" title="Compact the current Codex context">Compact</button>
+                            <button id="codex-prompts-btn" class="claude-ctrl-btn" onclick="toggleCodexPromptPanel()" title="Browse and copy recent prompts" aria-label="Browse recent prompts"><svg class="action-icon" aria-hidden="true"><use href="#icon-prompts"></use></svg><span class="action-label">Prompts</span></button>
+                            <button id="codex-compact-btn" class="claude-ctrl-btn" onclick="compactCodexContext()" title="Compact the current Codex context" aria-label="Compact Codex context"><svg class="action-icon" aria-hidden="true"><use href="#icon-compact"></use></svg><span class="action-label">Compact</span></button>
                             <label class="codex-select-control" title="Sandbox mode">
-                                <span class="codex-select-label" aria-hidden="true">Sandbox</span>
+                                <span class="codex-select-label" aria-hidden="true"><svg class="action-icon"><use href="#icon-sandbox"></use></svg><span class="action-label">Sandbox</span></span>
                                 <select id="codex-sandbox-select" class="codex-select" aria-label="Sandbox mode" onchange="updateCodexSettingsFromControls()">
                                     <option value="default">Default</option><option value="read-only">Read only</option><option value="workspace-write">Workspace write</option><option value="danger-full-access">Full access</option>
                                 </select>
                             </label>
                             <label class="codex-select-control" title="Approval policy">
-                                <span class="codex-select-label" aria-hidden="true">Ask</span>
+                                <span class="codex-select-label" aria-hidden="true"><svg class="action-icon"><use href="#icon-lock"></use></svg><span class="action-label">Ask</span></span>
                                 <select id="codex-permission-select" class="codex-select" aria-label="Approval policy" onchange="updateCodexSettingsFromControls()">
                                     <option value="default">Default</option><option value="untrusted">Untrusted</option><option value="on-request">On request</option><option value="never">Never ask</option>
                                 </select>
                             </label>
-                            <button id="codex-skills-btn" class="claude-ctrl-btn" onclick="toggleCodexSkillPanel()" title="Choose a skill for the next message">Skills</button>
+                            <button id="codex-skills-btn" class="claude-ctrl-btn" onclick="toggleCodexSkillPanel()" title="Choose a skill for the next message" aria-label="Skills"><svg class="action-icon" aria-hidden="true"><use href="#icon-skills"></use></svg><span class="action-label">Skills</span></button>
                         </div>
                     </div>
                     <div id="codex-state-bar"></div>
@@ -269,13 +308,13 @@
 
     <!-- Plain Text History View -->
     <div id="history-view" class="view">
-        <div style="flex-shrink: 0; background: #121212; border-bottom: 1px solid #222; padding-top: env(safe-area-inset-top);">
-            <div style="display: flex; align-items: center; padding: 8px 14px;">
+        <div class="subview-nav">
+            <div class="subview-nav-row">
                 <button class="icon-btn" onclick="showTerminal()" style="color: var(--primary); font-size: 16px; font-weight: 500;">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                     Terminal
                 </button>
-                <div style="flex: 1; text-align: center; font-weight: 600; font-size: 16px;">History</div>
+                <div class="subview-nav-title">History</div>
                 <button class="icon-btn" onclick="loadHistory()" title="Refresh" style="color: var(--primary); margin-right: 8px;">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><polyline points="21 3 21 9 15 9"></polyline></svg>
                 </button>
@@ -293,13 +332,13 @@
 
     <!-- Git View -->
     <div id="git-view" class="view">
-        <div style="flex-shrink: 0; background: #121212; border-bottom: 1px solid #222; padding-top: env(safe-area-inset-top);">
-            <div style="display: flex; align-items: center; padding: 8px 14px;">
+        <div class="subview-nav">
+            <div class="subview-nav-row">
                 <button class="icon-btn" onclick="showTerminal()" style="color: var(--primary); font-size: 16px; font-weight: 500;">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                     Terminal
                 </button>
-                <div style="flex: 1; text-align: center; font-weight: 600; font-size: 16px;">Git Status</div>
+                <div class="subview-nav-title">Git Status</div>
                 <button class="icon-btn" onclick="loadGitStatus()" style="color: var(--primary);">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><polyline points="21 3 21 9 15 9"></polyline></svg>
                 </button>
@@ -314,10 +353,13 @@
         </div>
     </div>
 
+    </main>
+    </div>
+
     <!-- Tool Modal -->
     <div id="modal-overlay" onclick="closeToolModal(event)">
         <div id="tool-modal" onclick="event.stopPropagation()">
-            <h2 style="margin-top:0">Create Session</h2>
+            <div class="tool-modal-header"><h2>Create Session</h2><button class="icon-btn" type="button" onclick="closeToolModal()" aria-label="Close">×</button></div>
             <div style="margin-bottom: 15px;">
                 <label style="display:block; margin-bottom: 8px; font-size: 14px; color: var(--text-dim);">Working Directory (Optional):</label>
                 <div style="margin-bottom: 8px; color: var(--text-dim); font-size: 12px; line-height: 1.4;">
@@ -355,6 +397,20 @@
                 </div>
                 <button class="icon-btn settings-close" type="button" onclick="closeSettings()" aria-label="Close">×</button>
             </div>
+            <section class="settings-section" aria-labelledby="appearance-settings-title">
+                <div class="settings-section-label" id="appearance-settings-title">Appearance</div>
+                <div class="theme-choice" role="group" aria-label="Color theme">
+                    <button id="theme-light-btn" type="button" onclick="setGladTheme('light')" aria-pressed="false">
+                        <span class="theme-swatch light" aria-hidden="true"></span>
+                        Light
+                    </button>
+                    <button id="theme-dark-btn" type="button" onclick="setGladTheme('dark')" aria-pressed="false">
+                        <span class="theme-swatch dark" aria-hidden="true"></span>
+                        Dark
+                    </button>
+                </div>
+                <p class="settings-theme-help">Glad follows your system until you choose a theme.</p>
+            </section>
             <section class="settings-section" aria-labelledby="notifications-settings-title">
                 <div class="settings-section-label" id="notifications-settings-title">Notifications</div>
                 <div class="settings-provider-header">
@@ -441,8 +497,10 @@
 
     <script defer src="vendor/xterm.js"></script>
     <script defer src="vendor/xterm-addon-fit.js"></script>
+    <script src="theme.js"></script>
     <script src="gitgraph.js"></script>
     <script src="core.js"></script>
+    <script src="layout.js"></script>
     <script src="notifications.js"></script>
     <script src="claude.js"></script>
     <script src="schedules.js"></script>