Skip to content

Add light theme with sidebar toggle #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrysb merged 13 commits into from
Apr 5, 2026
Merged

Add light theme with sidebar toggle #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
45f75d4
Add light theme with sidebar toggle
keaganstokoe Mar 17, 2026
2b5743e
Default to system color scheme preference
keaganstokoe Mar 17, 2026
368aa57
Fix light theme toggle runtime integration
chrysb Mar 22, 2026
450eb3c
Fix light theme legibility and add theme toggle to onboarding
keaganstokoe Mar 30, 2026
dde41e7
Merge upstream/main into feat/light-theme
keaganstokoe Mar 30, 2026
146395b
Merge remote-tracking branch 'origin/main' into codex/pr-29-update
chrysb Apr 2, 2026
81de503
Address PR review: 3-state theme toggle, dark default, banner legibility
keaganstokoe Apr 2, 2026
2dcba51
Use recent webhook requests for list health
chrysb Apr 2, 2026
348b334
Fix #52: show onboarding validation on Next
chrysb Apr 3, 2026
e98a4de
Cache model catalog responses
chrysb Apr 5, 2026
1bcd816
Improve Codex OAuth reconnect flow
chrysb Apr 5, 2026
a3897a1
Merge branch 'main' into pr-29
chrysb Apr 5, 2026
0da2b58
Polish theme toggle menu and light-mode logo accent
chrysb Apr 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions lib/public/css/explorer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1880,3 +1880,51 @@
}

}

/* ── Light theme overrides ─────────────────────── */

[data-theme="light"] .sidebar-tab {
color: var(--text-muted);
}

[data-theme="light"] .sidebar-tab:hover {
color: var(--text-bright);
}

[data-theme="light"] .sidebar-tab.active {
color: #0e7490;
background: rgba(8, 145, 178, 0.1);
}

[data-theme="light"] .file-viewer-protected-banner {
background: rgba(234, 179, 8, 0.12);
}

[data-theme="light"] .file-viewer-protected-banner-text {
color: #92400e;
}

[data-theme="light"] .file-viewer-protected-banner-unlocked {
color: #a16207;
}

[data-theme="light"] .file-viewer-protected-banner.is-locked {
background: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .file-viewer-protected-banner.is-locked .file-viewer-protected-banner-text {
color: #b91c1c;
}

[data-theme="light"] .file-viewer-protected-banner.is-locked .file-viewer-protected-banner-icon {
color: #dc2626;
}

[data-theme="light"] .file-viewer-diff-banner {
background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .file-viewer-diff-banner .file-viewer-protected-banner-text,
[data-theme="light"] .file-viewer-diff-banner {
color: #1d4ed8;
}
149 changes: 149 additions & 0 deletions lib/public/css/shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,3 +491,152 @@
pointer-events: auto;
}
}

/* ── Theme toggle dropdown ────────────────────── */

.theme-toggle-menu {
position: relative;
display: inline-flex;
}

.theme-toggle-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}

.theme-toggle-trigger:hover {
color: var(--text-muted);
background: var(--bg-hover);
}

.theme-toggle-dropdown {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 120px;
padding: 4px;
background: var(--bg-content);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
z-index: 50;
display: flex;
flex-direction: column;
}

[data-theme="light"] .theme-toggle-dropdown {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.theme-toggle-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 10px;
border: none;
border-radius: 5px;
background: transparent;
color: var(--text-muted);
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}

.theme-toggle-option:hover {
background: var(--bg-hover);
color: var(--text);
}

.theme-toggle-option.active {
color: var(--accent);
}

/* ── Light theme overrides ─────────────────────── */

[data-theme="light"] .app-sidebar {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%),
var(--bg-sidebar);
border-right-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .sidebar-brand {
color: var(--text);
}

[data-theme="light"] .sidebar-label {
color: var(--text-muted);
}

[data-theme="light"] .sidebar-nav a {
color: var(--text);
}

[data-theme="light"] .sidebar-nav a:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--text-bright);
}

[data-theme="light"] .sidebar-nav a.active {
background: rgba(8, 145, 178, 0.1);
color: #0e7490;
}

[data-theme="light"] .sidebar-nav a.active::before {
background: #0e7490;
}

[data-theme="light"] .brand-dropdown {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .global-restart-banner__content {
background: rgba(254, 243, 199, 0.97);
border: 1px solid rgba(202, 138, 4, 0.5);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .global-restart-banner__text {
color: #78350f;
}

[data-theme="light"] .global-restart-banner__dismiss {
color: #78350f;
}

[data-theme="light"] .global-restart-banner__dismiss:hover {
color: #451a03;
}

[data-theme="light"] .sidebar-update-btn {
border-color: rgba(202, 138, 4, 0.3);
color: #a16207;
background: rgba(202, 138, 4, 0.06);
}

[data-theme="light"] .sidebar-update-btn:hover {
background: rgba(202, 138, 4, 0.1);
border-color: rgba(202, 138, 4, 0.4);
}

[data-theme="light"] .sidebar-resizer:hover::after,
[data-theme="light"] .sidebar-resizer.is-resizing::after {
background: rgba(8, 145, 178, 0.55);
}

@media (max-width: 768px) {
[data-theme="light"] .app-sidebar {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}
}
Loading
Loading