WebView2 isn't respecting the Profile.PreferredColorScheme for the scrollbars

[zhuman]

Description
Setting the CoreWebView2.Profile.PreferredColorScheme to Dark doesn't affect the scrollbars in a WinUI3 app using WinAppSDK.

await myWebView.EnsureCoreWebView2Async();
myWebView.CoreWebView2.Profile.PreferredColorScheme = (this.ActualTheme == ElementTheme.Dark) ? CoreWebView2PreferredColorScheme.Dark : CoreWebView2PreferredColorScheme.Light;

Version
SDK: Packaged in the WinAppSDK
WinAppSDK: 1.3.230724000
Runtime: Stable channel Edge I assume
Framework: WinUI3 using WinAppSDK
OS: Win11 Dev Channel build 23521

Regression
Was this working before but has regressed? no, this is the first version of the WinAppSDK that has the PreferredColorScheme available I think
If yes, what version did this last work on? N/A

Repro Steps

1. Create a WinAppSDK project using WinUI3
2. Create a WebView2 control
3. Use the code above to set the PreferredColorScheme based on the app theme, and use a dark theme.

Screenshots

Additional context

[novac42]

Thanks for reporting the issue and sorry you are running into it. I've assigned this to a dev who can help follow up on this.

[johna-ms]

@zhuman I am seeing the theme color respected. Is there a website that is or isn't working for you or is it any website that normally honors theme color?

[bojan-sala-igt-com]

This is how it looks by default in WinUI3 (using the latest version).

Basically, system default scrollbar is always in light mode, no matter what we do on system or c# side. Styling it in css results in another (much worse) bug where mouse capture stops as soon as the cursor goes off of control boundaries (described in detail here microsoft/microsoft-ui-xaml#8677).

However I did find that simply setting it in js works fine, i.e.:
document.documentElement.setAttribute('data-theme', 'dark');

I provided the screenshot as to demonstrate how WinUI3 is in dark mode (correctly) while WebView2 scrollbar isn't by default. Devtools, menus and the such are working correctly. I don't know if them being light or dark by default is even a bug (I guess it's hard to really tell whether the website itself respects the theme) but setting it in c# doesn't work for me, like OP described.

[johna-ms]

@bojan-sala-igt-com - thank you for the screenshot! I'm thinking this is a website issue. What website are you using in the screenshot? When I'm on youtube or github.com/features/codespaces, websites I know to respect OS theme, the scrollbar is dark with no other code.

[bojan-sala-igt-com]

It was indeed a website issue, which I found out later and edited the comment but wasn't 100% sure if that's intended behavior 🙂

Doing something along the lines of:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
} else {
  document.documentElement.setAttribute('data-theme', 'light');
}

Fixed it for me.

[gave92]

Adding <meta name="color-scheme" content="dark light"> also appears to be necessary for me to get dark mode scrollbars.

[dianaqu]

Hi all folks in the thread. Yes, you need to make sure your page's color-scheme is set to light dark in order for the scrollbar to follow the webview2 color-scheme change. It's the same behavior as browser.