Add light mode

egui_demo_lib/src/apps/demo/demo_windows.rs

@@ -101,6 +101,13 @@ impl DemoWindows {
             show_menu_bar(ui);
         });
 
+        // Just get a background to put the windows on instead of using whatever the clear color is
+        let frame = egui::Frame {
+            fill: ctx.style().visuals.extreme_bg_color,
+            ..egui::Frame::none()
+        };
+        egui::CentralPanel::default().frame(frame).show(ctx, |_| {});
+
         self.windows(ctx);
     }
 

egui_demo_lib/src/apps/fractal_clock.rs

@@ -59,7 +59,6 @@ impl FractalClock {
         ui.expand_to_include_rect(painter.clip_rect());
 
         Frame::popup(ui.style())
-            .fill(Rgba::from_luminance_alpha(0.02, 0.5).into())
             .stroke(Stroke::none())
             .show(ui, |ui| {
                 ui.set_max_width(270.0);

egui_demo_lib/src/frame_history.rs

@@ -72,12 +72,13 @@ impl FrameHistory {
         let mut shapes = vec![Shape::Rect {
             rect,
             corner_radius: style.corner_radius,
-            fill: ui.visuals().dark_bg_color,
+            fill: ui.visuals().extreme_bg_color,
             stroke: ui.style().noninteractive().bg_stroke,
         }];
 
         let rect = rect.shrink(4.0);
-        let line_stroke = Stroke::new(1.0, Color32::from_additive_luminance(128));
+        let color = ui.visuals().text_color();
+        let line_stroke = Stroke::new(1.0, color);
 
         if let Some(pointer_pos) = ui.input().pointer.tooltip_pos() {
             if rect.contains(pointer_pos) {
@@ -94,12 +95,12 @@ impl FrameHistory {
                     egui::Align2::LEFT_BOTTOM,
                     text,
                     TextStyle::Monospace,
-                    Color32::WHITE,
+                    color,
                 ));
             }
         }
 
-        let circle_color = Color32::from_additive_luminance(196);
+        let circle_color = color;
         let radius = 2.0;
         let right_side_time = ui.input().time; // Time at right side of screen
 

egui_demo_lib/src/wrap_app.rs

@@ -69,6 +69,8 @@ impl epi::App for WrapApp {
             // A menu-bar is a horizontal layout with some special styles applied.
             // egui::menu::bar(ui, |ui| {
             ui.horizontal_wrapped(|ui| {
+                dark_light_mode_switch(ui);
+
                 ui.checkbox(&mut self.backend_panel.open, "💻 Backend");
                 ui.separator();
 
@@ -130,6 +132,15 @@ fn clock_button(ui: &mut egui::Ui, seconds_since_midnight: f64) -> egui::Respons
     ui.add(egui::Button::new(time).text_style(egui::TextStyle::Monospace))
 }
 
+/// Show a button to switch to/from dark/light mode (globally).
+fn dark_light_mode_switch(ui: &mut egui::Ui) {
+    let style: egui::Style = (*ui.ctx().style()).clone();
+    let new_visuals = style.visuals.light_dark_small_toggle_button(ui);
+    if let Some(visuals) = new_visuals {
+        ui.ctx().set_style(egui::Style { visuals, ..style });
+    }
+}
+
 // ----------------------------------------------------------------------------
 
 /// How often we repaint the demo app by default