eframe: Automatically change theme when system dark/light mode changes

crates/eframe/Cargo.toml

@@ -149,6 +149,7 @@ web-sys = { version = "0.3.58", features = [
   "KeyboardEvent",
   "Location",
   "MediaQueryList",
+  "MediaQueryListEvent",
   "MouseEvent",
   "Navigator",
   "Performance",

crates/eframe/src/epi.rs

@@ -330,6 +330,8 @@ pub struct NativeOptions {
     /// By default, this is `true` on Mac and Windows, but `false` on Linux
     /// due to <https://github.com/frewsxcv/rust-dark-light/issues/17>.
     ///
+    /// On Mac and Windows the theme will automatically change when the dark vs light mode preference is changed.
+    ///
     /// See also [`Self::default_theme`].
     pub follow_system_theme: bool,
 

crates/eframe/src/native/epi_integration.rs

@@ -124,7 +124,7 @@ pub fn window_builder<E>(
         // Restore pos/size from previous session
         window_settings.clamp_to_sane_values(largest_monitor_point_size(event_loop));
         #[cfg(windows)]
-        window_settings.clamp_window_to_sane_position(&event_loop);
+        window_settings.clamp_window_to_sane_position(event_loop);
         window_builder = window_settings.initialize_window(window_builder);
         window_settings.inner_size_points()
     } else {
@@ -308,14 +308,18 @@ pub struct EpiIntegration {
     close: bool,
     can_drag_window: bool,
     window_state: WindowState,
+    #[cfg(feature = "dark-light")]
+    follow_system_theme: bool,
 }
 
 impl EpiIntegration {
+    #[allow(clippy::too_many_arguments)]
     pub fn new<E>(
         event_loop: &EventLoopWindowTarget<E>,
         max_texture_side: usize,
         window: &winit::window::Window,
         system_theme: Option<Theme>,
+        #[cfg(feature = "dark-light")] follow_system_theme: bool,
         storage: Option<Box<dyn epi::Storage>>,
         #[cfg(feature = "glow")] gl: Option<std::sync::Arc<glow::Context>>,
         #[cfg(feature = "wgpu")] wgpu_render_state: Option<egui_wgpu::RenderState>,
@@ -363,6 +367,8 @@ impl EpiIntegration {
             close: false,
             can_drag_window: false,
             window_state,
+            #[cfg(feature = "dark-light")]
+            follow_system_theme,
         }
     }
 
@@ -426,6 +432,12 @@ impl EpiIntegration {
             WindowEvent::ScaleFactorChanged { scale_factor, .. } => {
                 self.frame.info.native_pixels_per_point = Some(*scale_factor as _);
             }
+            #[cfg(feature = "dark-light")]
+            WindowEvent::ThemeChanged(winit_theme) if self.follow_system_theme => {
+                let theme = theme_from_winit_theme(*winit_theme);
+                self.frame.info.system_theme = Some(theme);
+                self.egui_ctx.set_visuals(theme.egui_visuals());
+            }
             _ => {}
         }
 
@@ -565,3 +577,11 @@ pub fn load_egui_memory(_storage: Option<&dyn epi::Storage>) -> Option<egui::Mem
     #[cfg(not(feature = "persistence"))]
     None
 }
+
+#[cfg(feature = "dark-light")]
+pub(crate) fn theme_from_winit_theme(theme: winit::window::Theme) -> Theme {
+    match theme {
+        winit::window::Theme::Dark => Theme::Dark,
+        winit::window::Theme::Light => Theme::Light,
+    }
+}

crates/eframe/src/native/run.rs

@@ -681,6 +681,8 @@ mod glow_integration {
                 painter.max_texture_side(),
                 gl_window.window(),
                 system_theme,
+                #[cfg(feature = "dark-light")]
+                self.native_options.follow_system_theme,
                 storage,
                 Some(gl.clone()),
                 #[cfg(feature = "wgpu")]
@@ -1123,6 +1125,8 @@ mod wgpu_integration {
                 painter.max_texture_side().unwrap_or(2048),
                 &window,
                 system_theme,
+                #[cfg(feature = "dark-light")]
+                self.native_options.follow_system_theme,
                 storage,
                 #[cfg(feature = "glow")]
                 None,

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> {