egui_web: default to light mode unless prefers-color-scheme: dark

docs/index.html

@@ -14,9 +14,17 @@
         }
 
         body {
-            /* Background color for what is not covered by the egui canvas,
+            /* Light mode background color for what is not covered by the egui canvas,
             or where the egui canvas is translucent. */
-            background: #404040;
+            background: #909090;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                /* Dark mode background color for what is not covered by the egui canvas,
+                or where the egui canvas is translucent. */
+                background: #404040;
+            }
         }
 
         /* Allow canvas to fill entire web page: */

egui_demo_lib/src/wrap_app.rs

@@ -42,8 +42,8 @@ impl epi::App for WrapApp {
 
     fn setup(
         &mut self,
-        ctx: &egui::CtxRef,
-        frame: &mut epi::Frame<'_>,
+        _ctx: &egui::CtxRef,
+        _frame: &mut epi::Frame<'_>,
         storage: Option<&dyn epi::Storage>,
     ) {
         #[cfg(feature = "persistence")]

egui_glium/src/backend.rs

@@ -151,6 +151,7 @@ fn integration_info(
 ) -> epi::IntegrationInfo {
     epi::IntegrationInfo {
         web_info: None,
+        prefer_dark_mode: None, // TODO: figure out system default
         cpu_usage: previous_frame_time,
         seconds_since_midnight: seconds_since_midnight(),
         native_pixels_per_point: Some(native_pixels_per_point(&display)),

egui_web/CHANGELOG.md

@@ -5,14 +5,17 @@ All notable changes to the `egui_web` integration will be noted in this file.
 
 ## Unreleased
 
-### Fixed ⭐
+### Changed 🔧
+* Default to light visuals unless the system reports a preference for dark mode.
+
+### Fixed 🐛
 * Improve alpha blending, making fonts look much better (especially in light mode)
 * Fix double-paste bug
 
 
 ## 0.12.0 - 2021-05-10
 
-### Fixed ⭐
+### Fixed 🐛
 * Scroll faster when scrolling with mouse wheel.
 
 
@@ -33,7 +36,7 @@ Contributors: [n2](https://github.com/n2)
 ### Added ⭐
 * Right-clicks will no longer open browser context menu.
 
-### Fixed ⭐
+### Fixed 🐛
 * Fix a bug where one couldn't select items in a combo box on a touch screen.
 
 
@@ -41,18 +44,18 @@ Contributors: [n2](https://github.com/n2)
 ### Added ⭐
 * WebGL2 is now supported, with improved texture sampler. WebGL1 will be used as a fallback.
 
-### Changed
+### Changed 🔧
 * Slightly improved alpha-blending (work-around for non-existing linear-space blending).
 
-### Fixed ⭐
+### Fixed 🐛
 * Call prevent_default for arrow keys when entering text
 
 
 ## 0.7.0 - 2021-01-04
-### Changed
+### Changed 🔧
 * `http` and `persistence` are now optional (and opt-in) features.
 
-### Fixed ⭐
+### Fixed 🐛
 * egui_web now compiled without `RUSTFLAGS=--cfg=web_sys_unstable_apis`, but copy/paste won't work.
 
 
@@ -60,7 +63,7 @@ Contributors: [n2](https://github.com/n2)
 ### Added ⭐
 * Auto-save of app state to local storage
 
-### Changed ⭐
+### Changed 🔧
 * Set a maximum canvas size to alleviate performance issues on some machines
 * Simplify `egui_web::start` arguments
 
@@ -70,9 +73,9 @@ Contributors: [n2](https://github.com/n2)
 * Add ability to request a repaint
 * Copy/cut/paste suppoert
 
-### Changed ⭐
+### Changed 🔧
 * Automatic repaint every second
 
-### Fixed ⭐
+### Fixed 🐛
 * Web browser zooming should now work as expected
 * A bunch of bug fixes related to keyboard events

egui_web/Cargo.toml

@@ -56,8 +56,8 @@ version = "0.3"
 features = [
   "Clipboard",
   "ClipboardEvent",
-  "console",
   "CompositionEvent",
+  "console",
   "CssStyleDeclaration",
   "DataTransfer",
   "Document",
@@ -73,6 +73,7 @@ features = [
   "InputEvent",
   "KeyboardEvent",
   "Location",
+  "MediaQueryList",
   "MouseEvent",
   "Navigator",
   "Performance",

egui_web/src/backend.rs

@@ -137,6 +137,7 @@ pub struct AppRunner {
     app: Box<dyn epi::App>,
     pub(crate) needs_repaint: std::sync::Arc<NeedRepaint>,
     storage: LocalStorage,
+    prefer_dark_mode: Option<bool>,
     last_save_time: f64,
     screen_reader: crate::screen_reader::ScreenReader,
     #[cfg(feature = "http")]
@@ -147,14 +148,24 @@ pub struct AppRunner {
 impl AppRunner {
     pub fn new(web_backend: WebBackend, app: Box<dyn epi::App>) -> Result<Self, JsValue> {
         load_memory(&web_backend.egui_ctx);
-        let storage = LocalStorage::default();
+
         let prefer_dark_mode = crate::prefer_dark_mode();
+
+        if prefer_dark_mode == Some(true) {
+            web_backend.egui_ctx.set_visuals(egui::Visuals::dark());
+        } else {
+            web_backend.egui_ctx.set_visuals(egui::Visuals::light());
+        }
+
+        let storage = LocalStorage::default();
+
         let mut runner = Self {
             web_backend,
             input: Default::default(),
             app,
             needs_repaint: Default::default(),
             storage,
+            prefer_dark_mode,
             last_save_time: now_sec(),
             screen_reader: Default::default(),
             #[cfg(feature = "http")]
@@ -221,6 +232,7 @@ impl AppRunner {
             web_info: Some(epi::WebInfo {
                 web_location_hash: location_hash().unwrap_or_default(),
             }),
+            prefer_dark_mode: self.prefer_dark_mode,
             cpu_usage: self.web_backend.previous_frame_time,
             seconds_since_midnight: Some(seconds_since_midnight()),
             native_pixels_per_point: Some(native_pixels_per_point()),

egui_web/src/lib.rs

@@ -92,6 +92,15 @@ pub fn native_pixels_per_point() -> f32 {
     }
 }
 
+pub fn prefer_dark_mode() -> Option<bool> {
+    Some(
+        web_sys::window()?
+            .match_media("(prefers-color-scheme: dark)")
+            .ok()??
+            .matches(),
+    )
+}
+
 pub fn canvas_element(canvas_id: &str) -> Option<web_sys::HtmlCanvasElement> {
     use wasm_bindgen::JsCast;
     let document = web_sys::window()?.document()?;

epi/src/lib.rs

@@ -279,6 +279,10 @@ pub struct IntegrationInfo {
     /// If the app is running in a Web context, this returns information about the environment.
     pub web_info: Option<WebInfo>,
 
+    /// Does the system prefer dark mode (over light mode)?
+    /// `None` means "don't know".
+    pub prefer_dark_mode: Option<bool>,
+
     /// Seconds of cpu usage (in seconds) of UI code on the previous frame.
     /// `None` if this is the first frame.
     pub cpu_usage: Option<f32>,