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

2
packages/ui/src/styles/messaging/message-section.css
View File

@@ -244,7 +244,7 @@
border-radius: 9999px;
border: 1px solid var(--list-item-highlight-border);
background-color: var(--list-item-highlight-bg-solid);
box-shadow: var(--panel-shadow, 0 4px 16px rgba(0, 0, 0, 0.2));
box-shadow: var(--panel-shadow);
overflow: hidden;
}

24
packages/ui/src/styles/messaging/message-timeline.css
View File

@@ -69,7 +69,7 @@
overflow-y: auto;
border-radius: 8px;
background-color: var(--surface-base);
box-shadow: var(--panel-shadow, 0 6px 24px rgba(0, 0, 0, 0.2));
box-shadow: var(--panel-shadow);
}
.message-timeline::-webkit-scrollbar {
@@ -104,10 +104,10 @@
.message-timeline-segment-active {
border-color: transparent;
background-color: #0f5b44;
color: #fff;
background-color: var(--timeline-segment-active-bg);
color: var(--timeline-segment-active-text);
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
box-shadow: var(--timeline-segment-active-ring);
}
.message-timeline-segment:hover,
@@ -121,10 +121,10 @@
.message-timeline-segment-active,
.message-timeline-segment-active:hover,
.message-timeline-segment-active:focus-visible {
background-color: #0f5b44;
color: #fff;
background-color: var(--timeline-segment-active-bg);
color: var(--timeline-segment-active-text);
transform: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
box-shadow: var(--timeline-segment-active-ring);
}
.message-timeline-segment:focus-visible {
@@ -167,7 +167,7 @@
border-color: var(--session-status-permission-fg) !important;
color: var(--session-status-permission-fg) !important;
transform: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
box-shadow: var(--timeline-segment-active-ring);
}
.message-timeline-compaction-auto {
@@ -181,11 +181,11 @@
}
.message-timeline-segment-active {
background-color: #0f5b44 !important;
background-color: var(--timeline-segment-active-bg) !important;
border-color: transparent !important;
color: #fff !important;
color: var(--timeline-segment-active-text) !important;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
box-shadow: var(--timeline-segment-active-ring);
}
.message-timeline-label {
@@ -221,7 +221,7 @@
border-radius: 8px;
border: 1px solid var(--border-base);
background-color: var(--surface-base);
box-shadow: var(--panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.25));
box-shadow: var(--panel-shadow-strong);
padding: 0.75rem;
}

16
packages/ui/src/styles/messaging/prompt-input.css
View File

@@ -97,7 +97,7 @@
.prompt-history-button {
@apply w-7 h-7 flex items-center justify-center rounded-md;
color: var(--text-muted);
background-color: rgba(15, 23, 42, 0.04);
background-color: var(--control-ghost-bg);
transition: background-color 0.15s ease, color 0.15s ease;
padding: 0;
flex-shrink: 0;
@@ -143,7 +143,7 @@
.prompt-input.shell-mode {
border-color: var(--status-success);
box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4);
box-shadow: inset 0 0 0 1px var(--status-success-ring);
}
.prompt-input:focus {
@@ -152,7 +152,7 @@
.prompt-input.shell-mode:focus {
border-color: var(--status-success);
box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4);
box-shadow: inset 0 0 0 1px var(--status-success-ring);
}
.prompt-input:disabled {
@@ -165,17 +165,17 @@
.stop-button {
@apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
background-color: rgba(239, 68, 68, 0.85);
color: var(--text-inverted);
background-color: var(--button-danger-bg);
color: var(--button-danger-text);
}
.stop-button:hover:not(:disabled) {
background-color: rgba(239, 68, 68, 0.9);
background-color: var(--button-danger-hover-bg);
@apply opacity-95 scale-105;
}
.stop-button:active:not(:disabled) {
background-color: rgba(239, 68, 68, 1);
background-color: var(--button-danger-active-bg);
@apply scale-95;
}
@@ -260,7 +260,7 @@
background-color: var(--surface-base);
border: 1px solid var(--border-base);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
box-shadow: var(--popover-shadow);
z-index: 20;
}

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 {