fix: change default color-scheme to no-preference

[tmkx]

When connecting to an existing endpoint, Playwright will enforce the page to use a light color scheme.

playwright/packages/playwright-core/src/server/chromium/crPage.ts

Lines 1080 to 1093 in 76ace0f

	async _updateEmulateMedia(): Promise<void> {
	const emulatedMedia = this._page.emulatedMedia();
	// Empty string disables the override.
	const media = emulatedMedia.media === 'no-override' ? '' : emulatedMedia.media;
	const colorScheme = emulatedMedia.colorScheme === 'no-override' ? '' : emulatedMedia.colorScheme;
	const reducedMotion = emulatedMedia.reducedMotion === 'no-override' ? '' : emulatedMedia.reducedMotion;
	const forcedColors = emulatedMedia.forcedColors === 'no-override' ? '' : emulatedMedia.forcedColors;
	const features = [
	{ name: 'prefers-color-scheme', value: colorScheme },
	{ name: 'prefers-reduced-motion', value: reducedMotion },
	{ name: 'forced-colors', value: forcedColors },
	];
	await this._client.send('Emulation.setEmulatedMedia', { media, features });
	}

because the default colorScheme is light rather than no-preference:

playwright/packages/playwright-core/src/server/page.ts

Lines 444 to 452 in 76ace0f

	emulatedMedia(): EmulatedMedia {
	const contextOptions = this._browserContext._options;
	return {
	media: this._emulatedMedia.media || 'no-override',
	colorScheme: this._emulatedMedia.colorScheme !== undefined ? this._emulatedMedia.colorScheme : contextOptions.colorScheme ?? 'light',
	reducedMotion: this._emulatedMedia.reducedMotion !== undefined ? this._emulatedMedia.reducedMotion : contextOptions.reducedMotion ?? 'no-preference',
	forcedColors: this._emulatedMedia.forcedColors !== undefined ? this._emulatedMedia.forcedColors : contextOptions.forcedColors ?? 'none',
	};
	}

test code:

chromium.connectOverCDP('http://127.0.0.1:62374/'); // an existing dark page

[github-actions]

Test results for "tests 1"

2 flaky

⚠️ [webkit] › library/browsercontext-reuse.spec.ts:50:1 › should reset serviceworker
⚠️ [webkit] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks

21259 passed, 578 skipped
✔️✔️✔️

Merge workflow run.

[yury-s]

The reason it's set to 'light' (see the docs) is that we want to have consistent defaults across platforms and avoid test failures due to the host system changes. If you want the color scheme not to be affected, you can explicitly set the option to null. If it doesn't work, please start with filing a bug and providing a test that demonstrates the problem.

[tmkx]

I understand that it may be a by-design behavior, but it occurs in the first connect step and will turn all existing dark pages to light, additionally it cannot pass the colorScheme to the connect options:

const browser = await chromium.connectOverCDP('http://127.0.0.1:62374/', { /* connectOptions */ });

the workaround i'm using, but it will cause a screen flash:

await Promise.all(
  browser
    .contexts()
    .flatMap((context) => context.pages().map((page) => page.emulateMedia({ colorScheme: 'no-preference' })))
);

[yury-s]

I understand that it may be a by-design behavior, but it occurs in the first connect step and will turn all existing dark pages to light

The PR fixes a bug by breaking another (way more common) behavior which we cannot afford. Also, this fixes only one option of a few, there are others like reducedMotion and forcedColors in the same method that may also be changed on connect. If we were to fix color scheme, those options would need to be fixed as well. It seems that a proper fix would be to not enforce normal defaults when connecting over CDP and I'm not sure we want to introduce that complexity to the code base given that connecting to existing context is an edge case scenario compared to the common one where the client creates the context and controls all the options.

[tmkx]

thanks for your detailed reply! ❤️

[tmkx]

BTW, can we achieve it by passing BrowserNewContextParams to the connect function?

playwright/packages/playwright-core/src/server/chromium/chromium.ts

Lines 100 to 106 in 36c4c24

	const persistent: channels.BrowserNewContextParams = { noDefaultViewport: true };
	const browserOptions: BrowserOptions = {
	slowMo: options.slowMo,
	name: 'chromium',
	isChromium: true,
	persistent,
	browserProcess,

for example:

chromium.connectOverCDP('http://127.0.0.1:62374/', {
  persistent: { colorScheme: 'no-override', reducedMotion: 'no-override', /* ... */ }
});

this doesn't change the default behavior