Add Frame::canvas - bright in bright mode, dark in dark mode (#1362)

and use it in the demo app

CHANGELOG.md

@@ -5,7 +5,15 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 
 
 ## Unreleased
-* Fixed ComboBoxes always being rendered left-aligned ([1304](https://github.com/emilk/egui/pull/1304))
+
+### Added ⭐
+* Added `Frame::canvas` ([1362](https://github.com/emilk/egui/pull/1362)).
+
+### Changed 🔧
+
+### Fixed 🐛
+* Fixed ComboBoxes always being rendered left-aligned ([1304](https://github.com/emilk/egui/pull/1304)).
+
 
 ## 0.17.0 - 2022-02-22 - Improved font selection and image handling
 

egui/src/containers/frame.rs

@@ -80,16 +80,27 @@ impl Frame {
         }
     }
 
-    /// dark canvas to draw on
-    pub fn dark_canvas(style: &Style) -> Self {
+    /// A canvas to draw on.
+    ///
+    /// In bright mode this will be very bright,
+    /// and in dark mode this will be very dark.
+    pub fn canvas(style: &Style) -> Self {
         Self {
             margin: Margin::symmetric(10.0, 10.0),
             rounding: style.visuals.widgets.noninteractive.rounding,
-            fill: Color32::from_black_alpha(250),
+            fill: style.visuals.extreme_bg_color,
             stroke: style.visuals.window_stroke(),
             ..Default::default()
         }
     }
+
+    /// A dark canvas to draw on.
+    pub fn dark_canvas(style: &Style) -> Self {
+        Self {
+            fill: Color32::from_black_alpha(250),
+            ..Self::canvas(style)
+        }
+    }
 }
 
 impl Frame {

egui_demo_lib/src/apps/demo/dancing_strings.rs

@@ -22,7 +22,13 @@ impl super::Demo for DancingStrings {
 
 impl super::View for DancingStrings {
     fn ui(&mut self, ui: &mut Ui) {
-        Frame::dark_canvas(ui.style()).show(ui, |ui| {
+        let color = if ui.visuals().dark_mode {
+            Color32::from_additive_luminance(196)
+        } else {
+            Color32::from_black_alpha(240)
+        };
+
+        Frame::canvas(ui.style()).show(ui, |ui| {
             ui.ctx().request_repaint();
             let time = ui.input().time;
 
@@ -49,10 +55,7 @@ impl super::View for DancingStrings {
                     .collect();
 
                 let thickness = 10.0 / mode as f32;
-                shapes.push(epaint::Shape::line(
-                    points,
-                    Stroke::new(thickness, Color32::from_additive_luminance(196)),
-                ));
+                shapes.push(epaint::Shape::line(points, Stroke::new(thickness, color)));
             }
 
             ui.painter().extend(shapes);

egui_demo_lib/src/apps/demo/multi_touch.rs

@@ -52,7 +52,13 @@ impl super::View for MultiTouch {
         let num_touches = ui.input().multi_touch().map_or(0, |mt| mt.num_touches);
         ui.label(format!("Current touches: {}", num_touches));
 
-        Frame::dark_canvas(ui.style()).show(ui, |ui| {
+        let color = if ui.visuals().dark_mode {
+            Color32::WHITE
+        } else {
+            Color32::BLACK
+        };
+
+        Frame::canvas(ui.style()).show(ui, |ui| {
             // Note that we use `Sense::drag()` although we do not use any pointer events. With
             // the current implementation, the fact that a touch event of two or more fingers is
             // recognized, does not mean that the pointer events are suppressed, which are always
@@ -76,7 +82,6 @@ impl super::View for MultiTouch {
             // check for touch input (or the lack thereof) and update zoom and scale factors, plus
             // color and width:
             let mut stroke_width = 1.;
-            let color = Color32::GRAY;
             if let Some(multi_touch) = ui.ctx().multi_touch() {
                 // This adjusts the current zoom factor and rotation angle according to the dynamic
                 // change (for the current frame) of the touch gesture:

egui_demo_lib/src/apps/demo/paint_bezier.rs

@@ -31,7 +31,7 @@ impl Default for PaintBezier {
                 pos2(200.0, 200.0),
                 pos2(250.0, 50.0),
             ],
-            stroke: Stroke::new(1.0, Color32::LIGHT_BLUE),
+            stroke: Stroke::new(1.0, Color32::from_rgb(25, 200, 100)),
             fill: Color32::from_rgb(50, 100, 150).linear_multiply(0.25),
             aux_stroke: Stroke::new(1.0, Color32::RED.linear_multiply(0.25)),
             bounding_box_stroke: Stroke::new(0.0, Color32::LIGHT_GREEN.linear_multiply(0.25)),
@@ -164,7 +164,7 @@ impl super::View for PaintBezier {
         });
         self.ui_control(ui);
 
-        Frame::dark_canvas(ui.style()).show(ui, |ui| {
+        Frame::canvas(ui.style()).show(ui, |ui| {
             self.ui_content(ui);
         });
     }

egui_demo_lib/src/apps/demo/painting.rs

@@ -12,7 +12,7 @@ impl Default for Painting {
     fn default() -> Self {
         Self {
             lines: Default::default(),
-            stroke: Stroke::new(1.0, Color32::LIGHT_BLUE),
+            stroke: Stroke::new(1.0, Color32::from_rgb(25, 200, 100)),
         }
     }
 }
@@ -91,7 +91,7 @@ impl super::View for Painting {
         });
         self.ui_control(ui);
         ui.label("Paint with your mouse/touch!");
-        Frame::dark_canvas(ui.style()).show(ui, |ui| {
+        Frame::canvas(ui.style()).show(ui, |ui| {
             self.ui_content(ui);
         });
     }