[Feature Request]: 'did-change-color-scheme' event on webcontents

[Kilian]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

Browsers currently support a way to trigger a dark mode rendering by setting a color-scheme meta tag, or defining a color-scheme css property on the :root element. When this is set to dark, browsers will automatically render a dark background behind the webcontents, as well as change the text color.

To see this in action, see this demo page: https://color-scheme-demo.glitch.me/ (warning: This will flip from light to dark every three seconds) and accompanying explainer article: https://web.dev/color-scheme/

Regular browser windows in Electron will switch this background color along with the text color, but other webcontents, like those in webviews don't. This results in rendering white text on a white ( transparent) background when color-scheme is set to dark.

You could use JS to read out the color-scheme meta tag and find if color-scheme is a defined CSS property and manually set a background color behind a webview. This will work once but the color-scheme value can update at any moment with no additional signal, which can make webviews unreadable.

Note this is a distinct feature from prefers-color-scheme. That indicates the preference of the user, while color-scheme indicates whether a site supports dark, light or both.

Proposed Solution

An event on webContents that is called when the color-scheme changes, similar to the did-change-theme-color event we already have.

Alternatives Considered

1. Injected JavaScript listeners that observe the CSSStyleSheet and DOM tree.
2. Chrome itself forces a dark background on iframes (see example 3 below). We could do the same for webviews.

Additional Information

1. Fiddle of the above demo page set as the webContents of a BrowserWindow: https://gist.github.com/5244ed27b3fdb152ea4d8087362c2066 observe that the background changes.
2. Fiddle of the above demo page set as the webContents of a Webview: https://gist.github.com/5bb84a61cd87c3809d28fbf61b8714b9 observe that while the text color changes, the background color doesn't change.
3. Codepen of the above demo page set in an iframe: https://codepen.io/Kilian/pen/xxpNvEb Notice that in Chromium the background of the iframe does update.

[BrandonXLF]

This could be a solution to #40207

[BrandonXLF]

Seems like the only function that is consistently called when the color scheme changes is https://github.com/chromium/chromium/blob/c603521f5e5260a573e9c20f01c4bd470e0833d7/third_party/blink/renderer/core/css/style_engine.cc#L3862C70-L3862C70 (or the functions it calls)