mitmproxy/web
Sleeyax c69122bd86
fix(web): theme the sorted flow table header (#8336)
* fix(web): theme the sorted flow table header

The sorted column header and its chevron mask were the only colors left as literals after the semantic token layer landed, because LESS `lighten`/`fadeout` cannot operate on `var()`.
In dark mode this painted the sorted `th` near-white and hid the chevron, which is stroked in `--mitmweb-fg`, against its own mask.

Both now read `--mitmweb-th-sorted-bg`, with the mask deriving its alpha through `color-mix` instead.
The light value is byte-equal to what `lighten(#f2f2f2, 3%)` produced, so the light theme is unchanged.

No LESS color functions remain in the stylesheets, so the note about them in the token header comment goes away too.

* docs: add changelog entry for the sorted flow table header fix

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-29 16:12:35 +02:00
..
gen eslint: consistent-type-imports (#7975) 2026-01-02 01:44:09 +01:00
public/static
src fix(web): theme the sorted flow table header (#8336) 2026-07-29 16:12:35 +02:00
.editorconfig
.prettierignore
eslint.config.mjs eslint: consistent-type-imports (#7975) 2026-01-02 01:44:09 +01:00
index.html
jest.config.js
package-lock.json feat(web): add dark theme (#8317) 2026-07-29 07:45:53 +02:00
package.json feat(web): add dark theme (#8317) 2026-07-29 07:45:53 +02:00
README.md Update node.js version (#7992) 2025-11-24 18:46:06 +00:00
setup-global-jest.js
setup-jest.js feat(web): add dark theme (#8317) 2026-07-29 07:45:53 +02:00
tsconfig.json
vite.config.ts

Quick Start

  • Install mitmproxy as described in ../CONTRIBUTING.md
  • Run node --version to make sure that you have at least Node.js 24 or above.
  • Run cd ./web to change to the directory with package.json.
  • Run npm install to install dependencies.
  • Run uv run mitmweb
  • Run npm start in a separate window to start the Vite development server for the web interface.

Testing

  • Run npm test to run the test suite.

Code formatting

Architecture

There are two components:

Contributing

We very much appreciate any (small) improvements to mitmweb. Please do not include the compiled assets in mitmproxy/tools/web/static in your pull request. Refreshing them on every commit would massively increase repository size. We will update these files before every release.

Developer Tools