Link to the code that reproduces this issue

https://github.com/teamleaderleo/clean-slate-repo

To Reproduce

1. Start the application in development (next dev).
2. Click the on-screen indicator in the bottom left.
3. Click "Preferences."
4. Be in system dark mode or select dark mode as your theme.
5. Click any selection.

Note: I tested on Chrome and Edge.

Current vs. Expected behavior

Current:

When the Dark theme is active, each <option> in the native <select> still uses the browser’s white popup with white text. As a result, you cannot read which option is highlighted or selected.

Expected:

In dark mode, every <option> should render with a dark background and light text. Or, perhaps darker text when highlighted, like the vercel.com website? Though that might end up being too much styling to replicate; perhaps dev mode should intrinsically be much more minimal in its styling.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 16044
  Available CPU cores: 16
Binaries:
  Node: 22.16.0
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: 10.11.0
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (15.3.3).
  eslint-config-next: 15.3.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I tested on Chrome and Edge on Windows 11 with Dark as my default system theme setting.