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

74
packages/ui/src/renderer/loading/loading.css
View File

@@ -1,12 +1,12 @@
:root {
color-scheme: dark;
color-scheme: light dark;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--surface-base, #0f141f);
color: var(--text-primary, #cfd4dc);
background-color: var(--surface-base, #ffffff);
color: var(--text-primary, #1a1a1a);
font-family: var(--font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
display: flex;
align-items: center;
@@ -34,7 +34,7 @@ button {
.loading-logo {
width: 180px;
height: auto;
filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.45));
filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.18));
}
.loading-heading {
@@ -47,13 +47,13 @@ button {
font-size: 2.8rem;
font-weight: 600;
margin: 0;
color: var(--text-primary, #f4f6fb);
color: var(--text-primary, #1a1a1a);
}
.loading-status {
margin: 0;
font-size: 1rem;
color: var(--text-muted, #aeb3c4);
color: var(--text-muted, #666666);
}
.loading-card {
@@ -62,9 +62,9 @@ button {
max-width: 420px;
padding: 22px;
border-radius: 18px;
background: rgba(13, 16, 24, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
background: var(--surface-secondary, #f5f5f5);
border: 1px solid var(--border-base, #e0e0e0);
box-shadow: var(--panel-shadow-strong, 0 25px 60px rgba(0, 0, 0, 0.16));
}
.loading-row {
@@ -79,28 +79,74 @@ button {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
border-top-color: #6ce3ff;
border: 2px solid color-mix(in srgb, var(--text-primary, #1a1a1a) 14%, transparent);
border-top-color: var(--accent-primary, #0066ff);
animation: spin 0.9s linear infinite;
}
.phrase-controls {
margin-top: 12px;
font-size: 0.9rem;
color: var(--text-muted, #8f96a9);
color: var(--text-muted, #666666);
}
.phrase-controls button {
color: #8fb5ff;
color: var(--accent-primary, #0066ff);
cursor: pointer;
}
.loading-error {
margin-top: 12px;
color: #ff9ea9;
color: var(--status-error, #dc2626);
font-size: 0.95rem;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
}
:root:not([data-theme="light"]) body {
background-color: var(--surface-base, #0f141f);
color: var(--text-primary, #cfd4dc);
}
:root:not([data-theme="light"]) .loading-logo {
filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.45));
}
:root:not([data-theme="light"]) .loading-title {
color: var(--text-primary, #f4f6fb);
}
:root:not([data-theme="light"]) .loading-status {
color: var(--text-muted, #aeb3c4);
}
:root:not([data-theme="light"]) .loading-card {
background: rgba(13, 16, 24, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}
:root:not([data-theme="light"]) .spinner {
border: 2px solid rgba(255, 255, 255, 0.18);
border-top-color: var(--accent-primary, #6ce3ff);
}
:root:not([data-theme="light"]) .phrase-controls {
color: var(--text-muted, #8f96a9);
}
:root:not([data-theme="light"]) .loading-error {
color: var(--status-error, #ff9ea9);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
}
@keyframes spin {
from {
transform: rotate(0deg);