vee1e/mitmproxy
1
0
Fork 0
mirror of https://github.com/vee1e/mitmproxy.git synced 2026-09-03 19:27:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
mitmproxy/web
History
Sleeyax a4b234a3e1
feat(web): add semantic CSS custom-property color layer (#8316) 
* feat(web): add semantic CSS custom-property color layer

Introduce a :root set of semantic color tokens (surfaces, text, borders, accent, state) in global.less and route the recurring, directly-used colors across the LESS files through them.
Light-mode values are byte-equal to the literals they replace, so this is a visual no-op; it exists to give a future dark theme a single place to override.
Colors that LESS functions (lighten/darken/fadeout) consume, and one-off decorative colors, are intentionally left as literals because those functions cannot operate on var().

Part of #7789.

* [autofix.ci] apply automated fixes

* refactor(web): route remaining hardcoded colors through color tokens

Route the remaining directly-used background, text, and border literals across the LESS files through the existing semantic tokens introduced in the color layer, reusing tokens rather than adding new ones.
Light-mode colors stay visually unchanged; one-off decorative colors and LESS-function inputs are left as literals.

* refactor(web): tokenize recurring colors and drop dead styles

Add a --mitmweb-highlight token for the shared row-hover / suggestion-selection color (used in header.less and command.less) and a --mitmweb-gray token for the neutral gray reused across mode.less.
Remove the unused .command-suggestion rule and the dead rgba() border fallback in dropdown.less, which was overriding the tokenized border and rendering as translucent black.

* refactor(web): use the accent token for the first line and special tab

Replace the near-accent literals #428bca (flow detail first line) and #396cad (special tab) with --mitmweb-accent so the accent lives in exactly one place.
Both were within a few percent of the token, so this is a small deliberate light-theme shift rather than a visual no-op.
The special tab derived its hover from lighten(@special-color, 10%); since LESS functions cannot operate on var(), it now uses --mitmweb-accent-active, the same hover shade .btn-primary already uses.

* refactor(web): tokenize the mode green left border

Add a --mitmweb-green token for the #77c77a left border in mode.less, mirroring the --mitmweb-gray token already used by the neighbouring .gray-left-border.

* refactor(web): tokenize flow table row state colors

Add --mitmweb-row-* tokens for the highlighted, selected, and selected+highlighted row shades and route flowtable.less through them.
The base rows reuse the existing --mitmweb-bg / --mitmweb-bg-alt surfaces, whose values are byte-equal to the hsl() literals they replace.
Values are unchanged, so this is a visual no-op; it gives the dark theme one place to override the row states.

* docs: drop the changelog entry for the CSS color token layer

The entry conflicts with the upstream CHANGELOG.md on the PR.
Removing it for now; the entry will be re-added once the branch is rebased.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-18 14:16:31 +02:00
..
gen eslint: consistent-type-imports (#7975) 2026-01-02 01:44:09 +01:00
public/static Move mitmweb to Vite (#7971) 2025-11-13 18:05:51 +00:00
src feat(web): add semantic CSS custom-property color layer (#8316) 2026-07-18 14:16:31 +02:00
.editorconfig
.prettierignore
eslint.config.mjs eslint: consistent-type-imports (#7975) 2026-01-02 01:44:09 +01:00
index.html Move mitmweb to Vite (#7971) 2025-11-13 18:05:51 +00:00
jest.config.js Web: Show Local timezone in the Timing tab (#7804) 2025-08-08 08:08:30 +02:00
package-lock.json Improve TypeScript typing across mitmweb (#8238) 2026-06-05 16:02:20 +02:00
package.json Improve TypeScript typing across mitmweb (#8238) 2026-06-05 16:02:20 +02:00
README.md Update node.js version (#7992) 2025-11-24 18:46:06 +00:00
setup-global-jest.js Web: Show Local timezone in the Timing tab (#7804) 2025-08-08 08:08:30 +02:00
setup-jest.js Web: Show Local timezone in the Timing tab (#7804) 2025-08-08 08:08:30 +02:00
tsconfig.json Move mitmweb to Vite (#7971) 2025-11-13 18:05:51 +00:00
vite.config.ts Move mitmweb to Vite (#7971) 2025-11-13 18:05:51 +00:00

README.md

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