Skip to content

Add light theme with sidebar toggle#29

Merged
chrysb merged 13 commits intochrysb:mainfrom
keaganstokoe:feat/light-theme
Apr 5, 2026
Merged

Add light theme with sidebar toggle#29
chrysb merged 13 commits intochrysb:mainfrom
keaganstokoe:feat/light-theme

Conversation

@keaganstokoe
Copy link
Copy Markdown
Contributor

@keaganstokoe keaganstokoe commented Mar 17, 2026 •
edited
Loading

Depends on #27. Diff will shrink to 6 file changes if merged.

What this does

Adds a light theme to alphaclaw, toggled via a sun/moon button in the sidebar header. The theme choice persists in localStorage.

This is a practical demonstration of the semantic token system from #27. The entire light theme is defined in CSS variable overrides. No component files were touched.

Changes

  • theme.css: [data-theme="light"] block overriding all CSS variables, plus light-mode overrides for hardcoded dark patterns (buttons, toggles, cards, grid texture, scrollbars)
  • shell.css: light-mode overrides for sidebar gradient, dropdown shadows, restart banner
  • theme-toggle.js: new Preact component with sun/moon icons, reads/writes localStorage
  • sidebar.js: added ThemeToggle to the brand area
  • login.html, setup.html: early <script> to apply saved theme before render (prevents flash)

Verification

  • Test suite passes
  • Manually verified login page and main app in both themes

@keaganstokoe keaganstokoe marked this pull request as draft March 17, 2026 10:23
@keaganstokoe keaganstokoe marked this pull request as ready for review March 17, 2026 10:51
keaganstokoe and others added 3 commits March 21, 2026 21:30
@keaganstokoe @claude @chrysb
Add light theme with sidebar toggle
45f75d4 
Adds a complete light theme toggled via a sun/moon button in the sidebar
header. Theme choice persists in localStorage and applies before render
to prevent flash.

This is a practical demonstration of the semantic token system: the
entire light theme is CSS variable overrides with zero component changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@keaganstokoe @claude @chrysb
Default to system color scheme preference
2b5743e 
Use prefers-color-scheme to pick the initial theme instead of
hardcoding dark. A manual toggle still overrides via localStorage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@chrysb
Fix light theme toggle runtime integration
368aa57
@chrysb chrysb force-pushed the feat/light-theme branch from 93f0fdc to 368aa57 Compare March 22, 2026 04:38
@chrysb
Copy link
Copy Markdown
Owner

chrysb commented Mar 22, 2026 •
edited
Loading

Thanks for the awesome work here — this is a really nice direction, and I went ahead and rebased the branch onto current main, resolved the conflicts, and pushed the updated branch back to keaganstokoe:feat/light-theme with a small follow-up fix so the toggle uses the bundled app runtime and the theme preference persists cleanly.

This is looking pretty good overall. There are still a few legibility issues to work through in light mode, though:

  • The sidebar header/nav treatment gets very washed out, especially around the logo area, top-right controls, and active nav state.
  • The yellow restart-required banner is readable but still feels low-contrast in places, especially around the button/border treatment.
  • The Google account modal has several very light cyan links/highlights on a very light background, which makes the instructional content harder to scan.
image image image

There may be more - need to do a thorough pass.

Note: I think there should also be a "system" option - though I would default to dark mode, since that more captures the tron vibe

@keaganstokoe @claude
Fix light theme legibility and add theme toggle to onboarding
450eb3c 
Address PR feedback on light mode contrast issues:
- Sidebar: stronger text colors, visible active nav state, tab icons
- Restart banner: darker border and text for contrast
- Links/modals: solid accent-link color, override hardcoded cyan inline styles
- Badges: override faint cyan/blue/indigo/purple for light backgrounds
- Onboarding: add theme toggle, replace hardcoded colors with CSS variables
- Theme toggle: default to OS preference, simple dark/light switch
- Setup step: fix invisible text-white on light backgrounds

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@keaganstokoe
Copy link
Copy Markdown
Contributor Author

keaganstokoe commented Mar 30, 2026

Addressed the feedback from the review:

  • Sidebar legibility: stronger text colors for brand, labels, nav links, active state, and tab icons in light mode
  • Restart banner: darker amber border and text for better contrast
  • Modal/link contrast: --accent-link made solid, hardcoded cyan inline styles overridden for light backgrounds, badge colors (cyan, blue, indigo, purple) all darkened
  • Theme toggle: defaults to OS preference on first visit, simple dark/light toggle (no third "system" option — keeps it clean)
  • Onboarding: added theme toggle to top-right corner, replaced hardcoded dark-mode colors with CSS variables, fixed invisible text-white on light backgrounds

Also did a broader pass on the onboarding flow to catch other light-mode issues (progress bars, segmented control, "Required" badge, setup step spinner/error text).

@keaganstokoe keaganstokoe marked this pull request as draft March 30, 2026 18:00
@keaganstokoe @claude
Merge upstream/main into feat/light-theme
dde41e7 
Resolve conflicts:
- sidebar.js: keep both ThemeToggle import and new session-keys imports
- storage-keys.js: keep both theme key and chat key
- tailwind.generated.css, app.bundle.js: removed from tracking (now gitignored upstream)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@keaganstokoe keaganstokoe marked this pull request as ready for review March 30, 2026 18:27
chrysb
chrysb requested changes Apr 2, 2026
View reviewed changes
Copy link
Copy Markdown
Owner

@chrysb chrysb left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Getting really close. Last few things I noticed:

  1. the protected file bar text / bg here is a little illegible
image
  1. there should be a way to return to the "system" setting (perhaps on hover, it can show a dropdown menu, use computer icon for system)
  2. default should always be dark mode

Great work, excited to ship this after these few changes!

@keaganstokoe @claude
Address PR review: 3-state theme toggle, dark default, banner legibility
81de503 
- Rewrite theme toggle from simple dark/light button to hover dropdown
  with dark, light, and system options (using computer icon for system)
- Default to dark mode for first-time visitors (not OS preference)
- Add "system" preference that follows OS and listens for changes
- Fix protected file banner legibility in light mode (amber, red, blue variants)
- Update login.html and setup.html early scripts to handle "system" preference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@keaganstokoe
Copy link
Copy Markdown
Contributor Author

keaganstokoe commented Apr 2, 2026 •
edited
Loading

Addressed the three review items:

  1. Protected file banner legibility — added [data-theme="light"] overrides for the amber (protected), red (locked), and blue (diff) banner variants with darker, high-contrast colors

  2. 3-state theme toggle with dropdown — rewrote the toggle from a simple dark/light button to a hover dropdown with three options:

    • 🌙 Dark
    • ☀️ Light
    • 🖥 System (follows OS preference, listens for changes)

    Uses the existing ComputerLineIcon for the system option. Dropdown styling follows the existing brand-dropdown patterns.

  3. Default always dark — first-time visitors (no localStorage) now get dark mode. Only the explicit "System" option follows OS preference. Updated login.html, setup.html, and the theme-toggle component.

All 481 tests passing

chrysb
chrysb approved these changes Apr 5, 2026
View reviewed changes
Copy link
Copy Markdown
Owner

@chrysb chrysb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the big light-theme feature here. I made a few maintainer tweaks on top for the theme menu interaction and light-mode logo polish, and this looks good from my side.

@chrysb chrysb merged commit 325e7ee into chrysb:main Apr 5, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chrysb chrysb chrysb approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@keaganstokoe @chrysb
⚡