[bug] Tauri window theme is not propagated to webview (`prefers-color-scheme`)

[CrendKing]

Describe the bug

No matter which theme I set in the Tauri config file, the WebView always answers CSS media query prefers-color-scheme with OS color theme. According to the doc, it should only be the behavior is the theme field is None.

There is a similar issue in Electron, and they managed to fix it by "propagate preferred color scheme to the renderer".

Reproduction

1. Set Windows color mode in Personalization to "Dark".
2. In tauri.conf.json, set windows[0].theme to "Light".
3. In Rust main(), call main window's theme() to make sure it is tauri::Theme::Light.
4. In CSS, have different style for of both @media (prefers-color-scheme: light) and @media (prefers-color-scheme: dark).
5. Observe that the section in @media (prefers-color-scheme: dark) is used.

Expected behavior

If theme() returns Light, styles in @media (prefers-color-scheme: light) should be used.

Platform and versions

Environment
  › OS: Windows 10.0.22621 X64
  › Webview2: 108.0.1462.44
  › MSVC: 
      - Visual Studio Community 2022
  › Node.js: 18.12.1
  › npm: 8.19.2
  › pnpm: 7.18.1
  › yarn: Not installed!
  › rustup: 1.25.1
  › rustc: 1.65.0
  › cargo: 1.65.0
  › Rust toolchain: stable-x86_64-pc-windows-msvc 

Packages
  › @tauri-apps/cli [NPM]: 1.2.2
  › @tauri-apps/api [NPM]: 1.2.0
  › tauri [RUST]: 1.2.2,
  › tauri-build [RUST]: 1.2.1,
  › tao [RUST]: 0.15.6,
  › wry [RUST]: 0.23.2,

App
  › build-type: build
  › CSP: unset
  › distDir: ../dist
  › devPath: http://localhost:1420/
  › framework: Svelte
  › bundler: Vite

App directory structure
  ├─ .git
  ├─ dist
  ├─ node_modules
  ├─ src
  └─ src-tauri

Stack trace

No response

Additional context

No response

[CrendKing]

I did some research and found the root cause. Tauri uses wry to handle WebView stuff, and wry calls APIs exposed by webview2-com. The original interface of the WebView core, ICoreWebView2, does not support profile or preferred color scheme. This functionality is later added to the 13th updated interface, ICoreWebView2_13. And to use it, one just cast the ICoreWebView2 instance to ICoreWebView2_13, and update the profile.

I did a local test, by adding the following line to wry

diff --git a/src/webview/webview2/mod.rs b/src/webview/webview2/mod.rs
index da3fb62..e247795 100644
--- a/src/webview/webview2/mod.rs
+++ b/src/webview/webview2/mod.rs
@@ -203,6 +203,8 @@ impl InnerWebView {
     let webview =
       unsafe { controller.CoreWebView2() }.map_err(webview2_com::Error::WindowsError)?;

+    unsafe { webview.cast::<ICoreWebView2_13>()?.Profile()?.SetPreferredColorScheme(COREWEBVIEW2_PREFERRED_COLOR_SCHEME_LIGHT)?; }
+
     // background color
     if !attributes.transparent {
       if let Some(background_color) = attributes.background_color {

and now my Tauri app will unconditionally use Light color scheme regardless of my Windows color settings.

It seems Tauri currently only sets theme in tao, and never passes the theme config to wry.

[amrbashir]

/upstream tauri-apps/wry

[tauri-apps]

Upstream issue at tauri-apps/wry#806 has been closed.

[amrbashir]

@CrendKing thanks for the research, this has been implemented in upstream and when that is released, we will call it internally when changing the window theme.

[CrendKing]

Thanks. That's very fast patch. Looking forward to the fix here.