feat(viewer): dark mode + system monospace font (#304)#312
Merged
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Comment on lines
+514
to
+525
| /* Dark-mode badge tints (need alpha, not a flat var swap) */ | ||
| @media (prefers-color-scheme: dark) { | ||
| .badge-model { background: rgba(56,139,253,0.15); color: #79c0ff; } | ||
| .badge-tokens { background: rgba(46,160,67,0.15); color: #7ee787; } | ||
| .badge-duration { background: rgba(187,128,9,0.15); color: #e3b341; } | ||
| .badge-error { background: rgba(248,81,73,0.15); color: #ff7b72; } | ||
| .file-count-badge { color: #adbac7; } /* lift off --badge-neutral-bg to clear WCAG AA */ | ||
| .tool-call-error { border-left-color: #f85149; } | ||
| .tool-name { color: #d2a8ff; } | ||
| .task-plan .card { border-left-color: #d2a8ff; } | ||
| .task-plan .task-type-dot { background: #d2a8ff; } | ||
| } |
Contributor
There was a problem hiding this comment.
Inconsistent theming: hardcoded colors in dark-mode overrides.
The entire file has been refactored to use CSS custom properties, but this dark-mode block reverts to hardcoded rgba() and hex values. CSS custom properties can absolutely hold rgba() values — you could define semantic variables like --badge-model-bg, --badge-model-color, --tool-name-color, etc. in both the light and dark :root blocks. This would:
- Keep the theming system consistent and maintainable.
- Allow future theme customization via variable overrides.
- Avoid the disconnect noted in the comment "need alpha, not a flat var swap" — alpha values work fine in custom properties.
Additionally, several light-mode selectors still use hardcoded colors that lack dark-mode overrides here:
.task-main .card { border-left: 3px solid #0366d6; }— no dark override.task-relocation .card { border-left: 3px solid #e36209; }— no dark override.task-memory .card { border-left: 3px solid #8b949e; }— no dark override.task-default .card/.task-default .task-type-dot— no dark override.task-main .task-type-dot,.task-memory .task-type-dot,.task-relocation .task-type-dot— no dark overrides.badge-model/tokens/duration/errorlight-mode definitions (lines 342–345) still use hardcoded colors.tool-name { color: #8250df; }(line 439) still hardcoded in light mode
Consider defining all these as CSS variables in both :root blocks for full consistency.
Enhance the embedded viewer stylesheet per alibaba#304: - Add automatic dark mode via `prefers-color-scheme` (no JS/toggle). The full colour palette — surfaces, text, borders, accents, task/badge brand colours — lives in `:root` custom properties, with a single dark block overriding the values. Light-mode colours are unchanged. - Declare `color-scheme: light dark` so native scrollbars and form controls follow the active theme. - Use the system monospace stack (`ui-monospace, ...`) via a `--mono` variable, replacing the hardcoded font stacks. - Dark tokens chosen to clear WCAG AA (>=4.5:1) for small text, and dim brand colours (task-main, task-default) lifted for the dark surface. Verified by rendering all three viewer pages in light and dark with a headless browser: computed colours, contrast ratios, resolved theme variables, and `color-scheme` asserted programmatically.
chethanuk
force-pushed
the
fix/issue-304-dark-mode
branch
from
10fa7e8 to
8a89896
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #304.
What
Enhances the embedded viewer stylesheet (
internal/viewer/static/style.css) to add a dark theme and use the system monospace font, as requested in #304. CSS-only — no JS, no Go, no template changes.Dark mode
@media (prefers-color-scheme: dark)— follows the OS setting, no toggle/JS/state to persist.:rootCSS variables; the dark block overrides only the variables, so light-mode colors are unchanged. A small extra dark block handles the badge tints (model/tokens/duration/error) that need alpha rather than a flat variable swap.color-scheme: light darkdeclared so native scrollbars/form controls theme correctly in dark (the response/tool-output scroll regions).System monospace font
SFMono-Regular, Consolas, …stacks with a--monovariable led byui-monospace, so the OS's UI monospace font is used across platforms.Accessibility
Dark tokens chosen to clear WCAG AA (≥4.5:1) for small text — measured: file-count badge 6.17:1, faint labels 4.64:1, muted labels 5.62:1.
How it was verified
Built and ran
ocr viewer, then rendered all three pages (repos / sessions / session) in both light and dark with a headless browser emulatingprefers-color-scheme, using a fixture that exercises every themed element (token/duration/error badges, markdown code-blocks, inline-code, tool-call panes, overflow scroll regions). Programmatically asserted computed colors,color-scheme, and contrast ratios; visually confirmed no light-mode regression.#0d1117bg,#58a6fflinks)