salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add system/light/dark theme toggle

Browse Source 
Add a 3-state theme toggle in folder selection and instance tabs, and update tokens/styles so light mode has readable contrast. Sync MUI surfaces and Shiki highlighting to CSS variables to prevent stale colors when switching themes.
This commit is contained in:
Shantur Rathore
2026-02-03 16:49:42 +00:00
parent a2127a11ac
commit 17a3e43ac7
18 changed files with 288 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/ui/src/styles/messaging/tool-call.css
View File

@@ -11,7 +11,7 @@
.tool-call-header-label {
@apply flex items-center justify-between gap-2 font-semibold text-sm;
color: var(--message-tool-border);
color: var(--text-primary);
margin-bottom: 1px;
}
@@ -22,7 +22,7 @@
.tool-call-header-button {
background-color: transparent;
border: 1px solid var(--border-base);
color: var(--message-tool-border);
color: var(--text-secondary);
padding: 0.15rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.75rem;
@@ -162,7 +162,7 @@
.tool-call-preview-label {
@apply text-xs font-semibold uppercase tracking-wide;
color: var(--text-muted);
color: var(--text-secondary);
letter-spacing: 0.5px;
}
@@ -170,7 +170,7 @@
font-family: var(--font-family-mono);
font-size: var(--font-size-xs);
line-height: var(--line-height-tight);
color: var(--text-muted);
color: var(--text-secondary);
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
@@ -231,7 +231,7 @@
.tool-call-diff-toolbar-label {
font-size: 11px;
color: var(--text-muted);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
@@ -244,7 +244,7 @@
@apply border text-xs font-semibold px-3 py-1 rounded transition-all duration-150;
border-color: var(--border-base);
background-color: transparent;
color: var(--text-muted);
color: var(--text-secondary);
}
.tool-call-diff-mode-button:hover {
@@ -388,7 +388,7 @@
.tool-call-diff-viewer .diff-line-old-num,
.tool-call-diff-viewer .diff-line-new-num,
.tool-call-diff-viewer .diff-line-num {
color: var(--text-muted);
color: var(--text-secondary);
font-size: var(--font-size-xs);
}
@@ -450,7 +450,7 @@
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
margin-bottom: 4px;
color: var(--text-muted);
color: var(--text-secondary);
}
.tool-call-diagnostics {
@@ -472,7 +472,7 @@
@apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
font-family: var(--font-family-mono);
font-size: 13px;
color: var(--message-tool-border);
color: var(--text-primary);
background-color: var(--surface-code);
}
@@ -496,7 +496,7 @@
@apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
font-family: var(--font-family-mono);
font-size: 13px;
color: var(--message-tool-border);
color: var(--text-primary);
background-color: var(--surface-code);
}
@@ -535,7 +535,7 @@
.tool-call-diagnostics-caret {
font-size: 12px;
color: var(--text-muted);
color: var(--text-secondary);
}
.tool-call-diagnostics {
@@ -615,7 +615,8 @@
.tool-call-section pre {
margin: 0;
padding: 8px;
background-color: var(--surface-base);
background-color: var(--surface-code);
border: 1px solid var(--border-base);
border-radius: 0px;
overflow-x: auto;
max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
@@ -649,7 +650,7 @@
.tool-call-pending-message {
@apply flex items-center gap-2 p-3 text-xs italic;
color: var(--text-muted);
color: var(--text-secondary);
}
.tool-call-emoji {
@@ -659,7 +660,7 @@
.tool-call-action-button {
@apply border text-xs font-semibold px-3 py-1 rounded transition-colors h-8 flex items-center;
border-color: var(--border-base);
color: var(--text-muted);
color: var(--text-secondary);
background-color: transparent;
}
@@ -679,7 +680,7 @@
}
.tool-call-content {
background-color: var(--surface-secondary);
background-color: var(--surface-code);
border: 1px solid var(--border-base);
border-radius: 0;
padding: 8px 12px;
@@ -688,6 +689,7 @@
line-height: var(--line-height-tight);
overflow-x: auto;
margin: 0;
color: var(--text-primary);
}
.tool-call-content code {