Repository navigation
feat(web): add dark theme - #8317
Conversation
24461df to
2b12e71
Compare
2b12e71 to
204d91c
Compare
2544bf8 to
d6b3dbb
Compare
Add a `web_theme` mitmweb option (system/dark/light; default system) and apply it in the frontend by setting `data-theme` on the document root. `system` follows the OS `prefers-color-scheme` and tracks live changes. The dark palette overrides the semantic color tokens under `[data-theme="dark"]`, with targeted overrides for surfaces whose colors are consumed by LESS functions. The CodeMirror content editor switches to the one-dark theme in dark mode. Part of mitmproxy#7789.
Native selects, inputs, checkboxes and scrollbars ignored the semantic tokens and rendered with the browser's light defaults. Set color-scheme per theme so they follow it, and replace the remaining literal black text colors on the local-applications input and the close-button hover states with tokens.
The search filter icon and the eventlog/flow-detail close icons were hardcoded to black/grey, which is hard to read on dark surfaces. Route them through the foreground tokens instead.
The header, nav-tab, and menu-group separator borders were computed with lighten(grey, ...), leaving them as bright literals that stayed light-grey on dark surfaces. Route them through the border tokens instead so they follow the theme.
The web_theme option was only reachable by scrolling to the bottom of the raw options list in the Edit Options modal. Surface it as an Appearance dropdown (system/dark/light) in the header Options menu so the theme is discoverable and switchable in one click.
The base branch tokenized every flow table row color, so the nested .flow-table tr block in the dark theme now duplicates rules that var() already resolves. Override the --mitmweb-row-* tokens instead. Base rows fall through to --mitmweb-bg / --mitmweb-bg-alt like they do in the light theme, rather than carrying their own near-identical literals.
--mitmweb-highlight kept its light value in dark mode, compositing a pale blue over the dark surface and leaving hovered header rows and command suggestions hard to read.
2b41d46 to
ece7ca5
Compare
The request/response first line reused --mitmweb-accent, which is brightened for dark surfaces and left white monospace text at roughly 2.5:1 contrast. Give the banner its own token pair so dark mode can use a deep blue with pale text without dragging the accent color along.
emanuele-em
left a comment
emanuele-em
left a comment
There was a problem hiding this comment.
I see these problems in the dark theme:
- low contrast for the colored statuses (200 is almost invisible)
- There is a thick white border above the footer, the problem is caused by the hardcoded shadow
0 -1px 3px lightgray
- There is a problem with the alignement/padding/spacing of the elements in the "flow" tab
- In "capture" tab, under local applications, if I click on the dropdown menu, the "default" icon is a white square, i think it should be "dark"
Moreover, imho, it's not clear that the theme selection is located in the "options" tab, I would expect to see it as an icon that is always visible
The status column painted itself with hardcoded CSS color names. `darkgreen` and `darkred` are near-invisible against the dark surface, so route the colors through per-class tokens instead. Light values are byte-equal to the literals they replace. The shadow token added alongside them is consumed in the next commit.
Both footer shadows were hardcoded to a light gray, which on a dark surface reads as a thick white border rather than a shadow. Route them through the shadow token so the dark theme casts black instead.
The executable icons in the local-applications dropdown come from the OS as bitmaps, so we cannot recolor them. macOS hands back a plain white square for the generic executable, which glares against the dark popover. Dim them via a token so the white square reads as grey while colored app icons stay recognizable.
|
|
Regarding your point 4: I dug into where those icons come from: So the white squares are macOS's own generic Unix-executable icon (a white sheet) coming through. Tools like Given that, I've handled it in CSS: a One thing I can't explain from your screenshot: Mail also shows as a white square, and it should have a real colorful icon. Could you open devtools on that dropdown and check what I'm on Arch Linux, where |
Where would you place it? To me it feels native in the options tab. I tried placing it at the far right but it's still not so clear imo, since the default is the "system" theme and a PC icon isn't obvious. 
EDIT: as discussed on discord, we are thinking not to add this toggle in this iteration yet. |
please see the screenshot below 
This is the light mode: 
|
Panes such as the flow table reserve a scrollbar gutter permanently via `overflow-y: scroll`. Under `color-scheme: dark` the UA paints that gutter light, so an idle scrollbar reads as a stray vertical line beside the pane divider rather than as a scrollbar. Color the track to match the surface so it stays as invisible as it already is on light backgrounds.
|
lups2000
left a comment
lups2000
left a comment
There was a problem hiding this comment.
Overall it looks good I think 🙌
Just some nits:
- This looks a bit weird
- Maybe this could be more visible
- I agree with @emanuele-em that the theme selector should be more visible. What if we create a toggle and put it in the top.right corner? what do you think?
Under color-scheme: dark the browser paints the native text field a lighter grey than the transparent dropdown header around it, so the input read lighter than the chevron beside it. Making the field background transparent lets it blend with the header.
The dark highlight token was barely distinguishable from the popover surface, so a hovered suggestion row read as unhighlighted. Brightening it makes the hovered row stand out. The command-bar suggestion highlight shares this token and gains the same visibility.
3 participants
Requires #8316 to be merged first.
Adds a
web_themeoption (system/dark/light, defaultsystem) and a dark palette that overrides the color tokens under[data-theme="dark"].systemfollows the OSprefers-color-schemeand reacts to live changes. The CodeMirror content editor uses theone-darktheme in dark mode.Historically, dark mode was declined on maintenance-cost grounds (#3886), but this implementation keeps the cost to a single token-override block plus only a handful of targeted overrides. Hopefully that's simple enough of an implementation to convince you to merge this :)
Closes #7828.
Part of #7789.
Screenshots