Light theme with a system/light/dark toggle #1

Merged

yanislav-igonin merged 2 commits from claude/agentboard-light-theme-bf144b into main 2026-10-08 19:57:07 +00:00

Conversation 2 Commits 2 Files changed 5 +60 -22

yanislav-igonin commented 2026-10-01 09:31:00 +00:00 (Migrated from github.com)

Copy link

Adds a light theme to the web UI. A new button in the header cycles system → light → dark. The default is "system", which follows prefers-color-scheme and updates live when the OS setting changes. A manual choice is saved in localStorage.

Screenshots

Light	Dark (unchanged)

Mobile, light:

How it works

• Tokens. Every hardcoded color in style.css (hover borders, text on the primary button, shadows, the dialog backdrop, toasts, the key box, the agent avatar and so on) is now a CSS variable. The light palette is a single :root[data-theme="light"] block. The dark values are exactly what they were before, so dark mode looks the same.
• No flash. public/theme.js is a tiny classic script loaded synchronously in <head>, so data-theme is set before first paint. It's a separate file because the CSP blocks inline scripts. app.js only wires up the toggle button.
• Flairs. In light mode, flair text uses color-mix(var(--c) 72%, black) so light project colors (yellow, green) stay readable on white.
• Icons. Adds sun, moon and sun-moon from Lucide to icons.svg.

No server changes and no new dependencies. 5 files, about +60/−22.

Testing

• npm test passes.
• I checked the login page, board, activity feed, ticket dialog, all three settings tabs and the mobile layout in both themes, using headless Chromium at desktop and phone sizes.
• I also checked that the toggle cycles correctly with the OS set to dark: system (dark) → light → dark → system.

🤖 Generated with Claude Code

Adds a light theme to the web UI. A new button in the header cycles **system → light → dark**. The default is "system", which follows `prefers-color-scheme` and updates live when the OS setting changes. A manual choice is saved in `localStorage`. ## Screenshots | Light | Dark (unchanged) | |---|---| |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | Mobile, light: <img src="https://raw.githubusercontent.com/yanislav-igonin/agentboard/ef7b5a6cb06c650f7726c12102b6f9b3246185f8/screenshots/light-8-mobile-board.png" width="280" alt="Mobile board, light"> <img src="https://raw.githubusercontent.com/yanislav-igonin/agentboard/ef7b5a6cb06c650f7726c12102b6f9b3246185f8/screenshots/light-9-mobile-ticket.png" width="280" alt="Mobile ticket, light"> ## How it works - **Tokens.** Every hardcoded color in `style.css` (hover borders, text on the primary button, shadows, the dialog backdrop, toasts, the key box, the agent avatar and so on) is now a CSS variable. The light palette is a single `:root[data-theme="light"]` block. The dark values are exactly what they were before, so dark mode looks the same. - **No flash.** `public/theme.js` is a tiny classic script loaded synchronously in `<head>`, so `data-theme` is set before first paint. It's a separate file because the CSP blocks inline scripts. `app.js` only wires up the toggle button. - **Flairs.** In light mode, flair text uses `color-mix(var(--c) 72%, black)` so light project colors (yellow, green) stay readable on white. - **Icons.** Adds `sun`, `moon` and `sun-moon` from Lucide to `icons.svg`. No server changes and no new dependencies. 5 files, about +60/−22. ## Testing - `npm test` passes. - I checked the login page, board, activity feed, ticket dialog, all three settings tabs and the mobile layout in both themes, using headless Chromium at desktop and phone sizes. - I also checked that the toggle cycles correctly with the OS set to dark: system (dark) → light → dark → system. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

yanislav-igonin commented 2026-10-08 15:27:47 +00:00 (Migrated from github.com)

Copy link

@backmeupplz hi
sorry for bugging u, just to clarify if u want/will merge this or not?
the update is small, i just prefer all my things to be in a light theme

@backmeupplz hi sorry for bugging u, just to clarify if u want/will merge this or not? the update is small, i just prefer all my things to be in a light theme

backmeupplz commented 2026-10-08 19:57:04 +00:00 (Migrated from github.com)

Copy link

Thanks a lot @yanislav-igonin, this is a really clean change! The dark palette is untouched, loading theme.js from <head> works with the CSP, and the screenshots made it easy to review. Merging now. I'll follow up with a few small tweaks to the toggle.

Thanks a lot @yanislav-igonin, this is a really clean change! The dark palette is untouched, loading theme.js from <head> works with the CSP, and the screenshots made it easy to review. Merging now. I'll follow up with a few small tweaks to the toggle.

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

accessibility

Barrier affecting people with disabilities

  

bug

Something isn't working

  

documentation

Improvements or additions to documentation

  

duplicate

This issue or pull request already exists

  

enhancement

New feature or request

  

good first issue

Good for newcomers

  

help wanted

Extra attention is needed

  

invalid

This doesn't seem right

  

question

Further information is requested

  

wontfix

This will not be worked on

No labels

accessibility

bug

documentation

duplicate

enhancement

good first issue

help wanted

invalid

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

backmeupplz/agentboard!1

No description provided.