[Bug]: UI does not change theme whenever system changes theme

[cpAdm]

Version

1.56.0

Steps to reproduce

1. Have system theme set to white
2. Go to https://trace.playwright.dev/
3. Change system theme to dark (or simulate prefers-color-scheme change via chrome devtools)

Expected behavior

Playwright theme to changed to dark-mode

Actual behavior

Playwright theme stays in light-mode

Additional context

An event listener should be attached to prefersDarkScheme in packages/web/src/theme.ts to listen for changes (note that a change should also call all listeners).

Environment

System:
  OS: Linux 6.6 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
  CPU: (12) x64 Intel(R) Core(TM) i5-10505 CPU @ 3.20GHz
  Memory: 10.39 GB / 23.47 GB
  Container: Yes
Binaries:
  Node: 22.15.1 - /usr/bin/node
  Yarn: 1.22.22 - /usr/bin/yarn
  npm: 10.9.2 - /usr/bin/npm
  pnpm: 10.15.0 - /usr/bin/pnpm
npmPackages:
  @playwright/test: ^1.56.0 => 1.56.0

[pavelfeldman]

I'm now assuming @cpAdm wants to provide prs for everthing @cpAdm files 😄

[cpAdm]

@pavelfeldman Sure 😃

I do have some questions:

1. I noticed that HMR support has been dropped (chore: drop HMR leftovers #37950)? How does one now start a local dev server for e.g. trace-viewer with my changes?

2. Is it OK to change this theme toggle button to a dropdown instead (with options system/dark/light; with default being 'system')?
   

   Or, if we want to be more fancy, we could have the same theme switcher as on playwright.dev, and place it next to to settings gear in trace viewer/html report. Not yet sure how to place this switcher in UI mode.
   

[cpAdm]

How a select would look with little effort:

[pavelfeldman]

Dark/Light/System sounds good to me. Sorry for the delay, let me bring the issue into the triage-able state.

[yury-s]

@cpAdm are you planning to take a stab at it, if not I'd close it for now?