eframe: Automatically change theme when system dark/light mode changes (#2750)

* React to ThemeChanged event from winit

* React to theme change using media query change event in WASM

* Share conversion from bool -> Theme

* Suppress too_many_arguments warning

* Document limitations of automatically following the dark vs light mode preference

* Simplify expression

* Conditionally compile code to prevent unused item warnings

* Remove needless borrow

* Remove another needless borrow

* Make associated functions to standalone

* Request repaint after theme has changed

* Only install event listener when `follow_system_theme` is enabled

* Remove dark-light feature gate

* Detect system theme using winit

* Update documentation

* Fix typos

* fix warning about unused argument

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>

crates/eframe/src/web/backend.rs

@@ -530,15 +530,16 @@ pub async fn start(
     tracing::warn!(
         "eframe compiled without RUSTFLAGS='--cfg=web_sys_unstable_apis'. Copying text won't work."
     );
+    let follow_system_theme = web_options.follow_system_theme;
 
     let mut runner = AppRunner::new(canvas_id, web_options, app_creator).await?;
     runner.warm_up()?;
-    start_runner(runner)
+    start_runner(runner, follow_system_theme)
 }
 
 /// Install event listeners to register different input events
 /// and starts running the given [`AppRunner`].
-fn start_runner(app_runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
+fn start_runner(app_runner: AppRunner, follow_system_theme: bool) -> Result<AppRunnerRef, JsValue> {
     let mut runner_container = AppRunnerContainer {
         runner: Arc::new(Mutex::new(app_runner)),
         panicked: Arc::new(AtomicBool::new(false)),
@@ -549,6 +550,10 @@ fn start_runner(app_runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
     super::events::install_document_events(&mut runner_container)?;
     text_agent::install_text_agent(&mut runner_container)?;
 
+    if follow_system_theme {
+        super::events::install_color_scheme_change_event(&mut runner_container)?;
+    }
+
     super::events::paint_and_schedule(&runner_container.runner, runner_container.panicked.clone())?;
 
     // Disable all event handlers on panic

crates/eframe/src/web/events.rs

@@ -207,6 +207,27 @@ pub fn install_document_events(runner_container: &mut AppRunnerContainer) -> Res
     Ok(())
 }
 
+pub fn install_color_scheme_change_event(
+    runner_container: &mut AppRunnerContainer,
+) -> Result<(), JsValue> {
+    let window = web_sys::window().unwrap();
+
+    if let Some(media_query_list) = prefers_color_scheme_dark(&window)? {
+        runner_container.add_event_listener::<web_sys::MediaQueryListEvent>(
+            &media_query_list,
+            "change",
+            |event, mut runner_lock| {
+                let theme = theme_from_dark_mode(event.matches());
+                runner_lock.frame.info.system_theme = Some(theme);
+                runner_lock.egui_ctx().set_visuals(theme.egui_visuals());
+                runner_lock.needs_repaint.repaint_asap();
+            },
+        )?;
+    }
+
+    Ok(())
+}
+
 pub fn install_canvas_events(runner_container: &mut AppRunnerContainer) -> Result<(), JsValue> {
     let canvas = canvas_element(runner_container.runner.lock().canvas_id()).unwrap();
 

crates/eframe/src/web/mod.rs

@@ -36,7 +36,7 @@ use std::sync::{
 
 use egui::Vec2;
 use wasm_bindgen::prelude::*;
-use web_sys::EventTarget;
+use web_sys::{EventTarget, MediaQueryList};
 
 use input::*;
 
@@ -75,11 +75,22 @@ pub fn native_pixels_per_point() -> f32 {
 }
 
 pub fn system_theme() -> Option<Theme> {
-    let dark_mode = web_sys::window()?
-        .match_media("(prefers-color-scheme: dark)")
+    let dark_mode = prefers_color_scheme_dark(&web_sys::window()?)
         .ok()??
         .matches();
-    Some(if dark_mode { Theme::Dark } else { Theme::Light })
+    Some(theme_from_dark_mode(dark_mode))
+}
+
+fn prefers_color_scheme_dark(window: &web_sys::Window) -> Result<Option<MediaQueryList>, JsValue> {
+    window.match_media("(prefers-color-scheme: dark)")
+}
+
+fn theme_from_dark_mode(dark_mode: bool) -> Theme {
+    if dark_mode {
+        Theme::Dark
+    } else {
+        Theme::Light
+    }
 }
 
 pub fn canvas_element(canvas_id: &str) -> Option<web_sys::HtmlCanvasElement> {