MicrosoftEdge/WebView2Feedback

[Problem/Bug]: Profiles vs PreferredColorScheme

ibebbs opened this issue · 0 comments

What happened?

I am adding multi-profile support to our app. Everything is working fine except that context menus always seem to be displayed in PreferredColorScheme.Dark despite setting CoreWebView2.Profile.PreferredColorScheme = PreferredColorScheme.Light.

I have tried to reproduce this in the WebView2WpfBrowser sample app but am encountering a different - but probably related - issue. In the sample app, setting CoreWebView2.Profile.PreferredColorScheme sets the PreferredColorScheme for all profiles, not just the current profile.

The documentation for PreferredColorScheme is:

The PreferredColorScheme property sets the overall color scheme of the WebView2s associated with this profile.

As such I believe this behavior is incorrect as demonstated in this video (follow the repro steps below to recreate):

Profile.vs.PreferredColorScheme.mp4

Note: This issue is also present in Edge. If I open two Edge windows using two different profiles, they both use whichever appearance I set last.

As I cannot recreate the behavior we are seeing in our app, I am reporting this bug and hoping that someone might be able to shed some further light on the issue.

Importance

Important. My app's user experience is significantly compromised.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

130.0.2849.56

SDK Version

1.0.2895.0-prerelease

Framework

WPF

Operating System

Windows 11

OS Version

22000.2538

Repro steps

  1. Clone the WebView2WpfBrowser sample app and open in Visual Studio
  2. Update MainWindow.InitializeWebView to set the PreferredColorScheme based on ProfileName as shown below:
        async Task InitializeWebView(IWebView2 webView2)
        {
            if (this.CreationProperties != null)
            {
                webView2.CreationProperties = this.CreationProperties;
            }

            var preferredColorScheme = GetPreferredColorScheme(webView2.CreationProperties.ProfileName);
#if SETVIACONTROLLER
            var interopHelper = new WindowInteropHelper(this);
            interopHelper.EnsureHandle();

            var environment = await CoreWebView2Environment.CreateAsync();

            var options = environment.CreateCoreWebView2ControllerOptions();
            options.ProfileName = webView2.CreationProperties.ProfileName;

            var controller = await environment.CreateCoreWebView2ControllerAsync(interopHelper.Handle, options);

            controller.CoreWebView2.Profile.PreferredColorScheme = preferredColorScheme;
#endif

            AttachControlEventHandlers(webView2);
            // Set background transparent
            webView2.DefaultBackgroundColor = System.Drawing.Color.Transparent;
            await webView2.EnsureCoreWebView2Async();


#if !SETVIACONTROLLER
            webView2.CoreWebView2.Profile.PreferredColorScheme = preferredColorScheme;
#endif
        }

        private CoreWebView2PreferredColorScheme GetPreferredColorScheme(string profileName) => profileName switch
        {
            "Dark" => CoreWebView2PreferredColorScheme.Dark,
            "Light" => CoreWebView2PreferredColorScheme.Light,
            _ => CoreWebView2PreferredColorScheme.Auto
        };
  1. Optional: modify MainWindow.UpdateTitle to show Profile.ProfileName and Profile.PreferredColorScheme as follows:
        void UpdateTitle()
        {
            this.Title = $"{GetControlAdorner()} {GetMutedAdorner()} {GetProfileAdorner()} {GetDocumentTitle()}";
        }

        string GetProfileAdorner() => string.IsNullOrWhiteSpace(_iWebView2?.CoreWebView2?.Profile?.ProfileName)
            ? $"(Default - {_iWebView2?.CoreWebView2?.Profile?.PreferredColorScheme})"
            : $"({_iWebView2?.CoreWebView2?.Profile?.ProfileName} - {_iWebView2?.CoreWebView2?.Profile?.PreferredColorScheme})";
  1. Start the sample app and follow these steps:
    a. Select some text on the webpage and right click to bring up the context menu
    -> ✅ Context menu appears in system's preferred color scheme
    b. Use "New Window → Create with Options" to create a WebView in a Profile named Light
    -> 🚫 First window immediately changes to "Light" theme (e.g. scroll bars change colour) as soon as the WebView on the new window is initialized to have "Light" colour scheme.
    c. Reselect some text on the webpage in the first window and right click to bring up the context menu
    -> 🚫 Context menu appears in Light mode
    d. Use "New Window → Create with Options" to create a WebView in a Profile named Dark
    -> 🚫 Both windows immediately changes to "Dark" theme (e.g. scroll bars change colour) as soon as the WebView on the new window is initialized to have "Dark" colour scheme.
    e. Reselect some text on the webpage in the first window and right click to bring up the context menu
    -> 🚫 Context menu appears in Dark mode
  2. Rebuild the app with the SETVIACONTROLLER compilation symbol (which will set Profile.PreferredColorScheme via a CoreWebView2Controller instead of the WebView2 instance
  3. Repeat testing steps from step 4. Issue still appears but CoreWebView2.Profile.PreferredColorScheme shows Auto for all windows instead of the actual color scheme set for that profile.

Repros in Edge Browser

Yes, issue can be reproduced in the corresponding Edge version

Regression

Don't know

Last working version (if regression)

No response