Set theme (dark/light) setting

[Dmitri-Kom]

I have a WPF app that can be used in either Dark theme or light theme. One of the views consists of CefSharp.Wpf.ChromiumWebBrowser.

Right now, the embedded web browser is always light, even if the WPF app uses dark theme. Is it possible to set the embedded web browser theme settings via the ChromiumWebBrowser instance from the WPF app, so that the embedded web browser will be viewed in dark theme when WPF uses dark theme and viewed in light theme when WPF uses light theme?

[amaitland]

prefers-color-scheme is supported and will use the OS theme. So if you are using a Dark OS Theme then it should respect your preference. You can test using https://github.com/cefsharp/CefSharp.MinimalExample

NOTE: This requires an app.manifest with Windows 10 compatibility entry (Windows 11 uses the same entry as Windows 10). See https://github.com/cefsharp/CefSharp.MinimalExample/blob/cefsharp/121/CefSharp.MinimalExample.Wpf/app.manifest#L50 working example.

For reference chromiumembedded/cef#2824

Is it possible to set the embedded web browser theme settings via the ChromiumWebBrowser instance from the WPF app, so that the embedded web browser will be viewed in dark theme when WPF uses dark theme and viewed in light theme when WPF uses light theme?

Are you using a Dark OS Theme?

If you are trying to implement this behaviour independent of the OS Theme you can try using DevTools method EmulationClient.SetAutoDarkModeOverrideAsync. See #3165 for basic example of using DevTools directly. I have no idea if CEF actually supports this yet, as not all methods are supported (the API is generated based on the DevTools spec).

using (var devToolsClient = chromiumWebBrowser.GetDevToolsClient())
{
    await devToolsClient.Emulation.SetAutoDarkModeOverrideAsync(true);
}

---

UPDATE: CEF now supports --force-light-mode and --force-dark-mode command line args. See chromiumembedded/cef#3534

See https://github.com/cefsharp/CefSharp/wiki/General-Usage#cefsettings-and-browsersettings for generic example of setting command line argument programmatically. (Don't include -- when setting programmatically).

//Force Light mode
settings.CefCommandLineArgs.Add("force-light-mode");
//Force Dark mode
settings.CefCommandLineArgs.Add("force-dark-mode");

[Dmitri-Kom]

Thank you! That was really helpful!

[schandra09net]

Team,

This is working for me, I tried a couple of websites and observed no issues.

var  chromiumBrowser = new ChromiumWebBrowser();
chromiumBrowser.Address = "https://www.google.com"; 
chromiumWebBrowser.FrameLoadEnd += (sender, args) =>
{
     chromiumBrowser.GetDevToolsClient()?.Emulation?.SetAutoDarkModeOverrideAsync(true);
};

Let me know, if this helps!