Skip to content

feat(recorder): inspector-driven dark mode for codegen overlay#40865

Open
yury-s wants to merge 1 commit into
microsoft:mainfrom
yury-s:feat-recorder-dark-mode
Open

feat(recorder): inspector-driven dark mode for codegen overlay#40865
yury-s wants to merge 1 commit into
microsoft:mainfrom
yury-s:feat-recorder-dark-mode

Conversation

@yury-s
Copy link
Copy Markdown
Member

@yury-s yury-s commented May 15, 2026

Summary

  • Make the injected codegen overlay (toolbar, tooltip, action dialog, assert-text editor) follow the inspector's Theme setting (Auto / Dark mode / Light mode).
  • "Auto" is resolved by the inspector (prefers-color-scheme) and pushed as concrete dark-mode / light-mode to the page; the overlay just toggles :host(.dark-mode) on the glass pane.

The injected codegen overlay (toolbar, tooltip, action dialog,
assert-text editor) now follows the inspector's Theme setting
(Auto / Dark mode / Light mode).

Plumbing: inspector setting -> `useDocumentTheme()` -> `backend.setOverlayTheme`
-> server `Recorder._overlayTheme` -> `UIState.overlayTheme` (polled)
-> injected `Highlight.setOverlayTheme`, which toggles `:host(.dark-mode)`
on the glass pane. "Auto" is resolved in the inspector against its own
`prefers-color-scheme`; the wire protocol only carries concrete
`dark-mode` / `light-mode`.

Builds on microsoft#40863.
@yury-s yury-s force-pushed the feat-recorder-dark-mode branch from f35093a to 2f69907 Compare May 15, 2026 21:13
@pavelfeldman
Copy link
Copy Markdown
Member

Is there an issue? (this one is closed)

private _mode: Mode;
private _highlightedElement: { selector?: string, ariaTemplate?: AriaTemplateNode } = {};
private _overlayState: OverlayState = { offsetX: 0 };
private _overlayTheme: OverlayTheme = 'light-mode';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have a state object one line above.

language: Language;
testIdAttributeName: string;
overlay: OverlayState;
overlayTheme?: OverlayTheme;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

Comment thread packages/web/src/theme.ts
return [theme, setTheme];
}

export function useDocumentTheme(): DocumentTheme {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the difference between this one and the one above?

@github-actions
Copy link
Copy Markdown
Contributor

Test results for "MCP"

7099 passed, 1104 skipped


Merge workflow run.

@github-actions
Copy link
Copy Markdown
Contributor

Test results for "tests 1"

3 flaky ⚠️ [chromium-library] › library/video.spec.ts:719 › screencast › should work with video+trace `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/video.spec.ts:719 › screencast › should work with video+trace `@chromium-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-emulate-media.spec.ts:144 › should keep reduced motion and color emulation after reload `@firefox-ubuntu-22.04-node20`

41906 passed, 850 skipped


Merge workflow run.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants