feat: add native material backgrounds

examples/gallery/src/main.rs

@@ -223,6 +223,8 @@ struct Gallery {
     palette_runs: Vec<SharedString>,
     dialog_open: bool,
     alert_open: bool,
+    /// Whether the app sidebar paints the window's native material.
+    sidebar_transparent: bool,
 }
 
 impl Gallery {
@@ -254,6 +256,7 @@ impl Gallery {
 
         let left_sidebar = Sidebar::new("gallery-sidebar")
             .selected(selected)
+            .transparent(self.sidebar_transparent)
             .accessibility_label("Component catalog")
             .entries(|_, _| {
                 CATALOG
@@ -404,10 +407,12 @@ impl Gallery {
             PanelDescriptor::new("welcome", "Welcome", {
                 let layout_state = layout_state.clone();
                 let dock_state = dock_state.clone();
+                let gallery = gallery.clone();
                 move |_, cx| {
                     cx.new(|_| WelcomePanel {
                         layout_state: layout_state.clone(),
                         dock_state: dock_state.clone(),
+                        gallery: gallery.clone(),
                     })
                     .into()
                 }
@@ -729,7 +734,6 @@ impl Render for Gallery {
                     palette.update(cx, |palette, cx| palette.toggle(window, cx));
                 }
             })
-            .bg(theme.colors.background)
             .text_color(theme.colors.foreground)
             .child(self.render_shell(cx))
             .child(dialog)
@@ -745,6 +749,7 @@ impl Render for Gallery {
 struct WelcomePanel {
     layout_state: Entity<LayoutState>,
     dock_state: Entity<DockState>,
+    gallery: WeakEntity<Gallery>,
 }
 
 impl Render for WelcomePanel {
@@ -753,6 +758,7 @@ impl Render for WelcomePanel {
         let layout_left = self.layout_state.clone();
         let layout_right = self.layout_state.clone();
         let dock_state = self.dock_state.clone();
+        let gallery = self.gallery.clone();
 
         ScrollArea::new("welcome-demo")
             .size_full()
@@ -811,6 +817,21 @@ impl Render for WelcomePanel {
                                         });
                                     }),
                             )
+                            .child(
+                                Button::new("welcome-toggle-blur")
+                                    .label("Toggle sidebar blur")
+                                    .variant(ButtonVariant::Secondary)
+                                    .small()
+                                    .on_click(move |_, _, cx| {
+                                        gallery
+                                            .update(cx, |gallery, cx| {
+                                                gallery.sidebar_transparent =
+                                                    !gallery.sidebar_transparent;
+                                                cx.notify();
+                                            })
+                                            .ok();
+                                    }),
+                            )
                             .child(
                                 Button::new("welcome-split")
                                     .label("Split active right")
@@ -3774,6 +3795,7 @@ impl Render for SidebarDemo {
                         .child(
                             Sidebar::new("sidebar-demo-list")
                                 .selected(self.selected)
+                                .transparent(true)
                                 .on_change(move |selected, _, cx| {
                                     view.update(cx, |demo, cx| {
                                         demo.selected = selected;
@@ -4077,6 +4099,9 @@ fn main() {
                     // The strips move the window themselves, so a tab dragged inside
                     // the titlebar band never drags the window with it.
                     app_owns_titlebar_drag: true,
+                    // The platform's native backdrop; the theme's material paints
+                    // resolve over it and go opaque under reduced transparency.
+                    window_background: cx.theme().window_background,
                     ..Default::default()
                 },
                 |window, cx| {
@@ -4106,6 +4131,7 @@ fn main() {
                             palette_runs: Vec::new(),
                             dialog_open: false,
                             alert_open: false,
+                            sidebar_transparent: true,
                         }
                     });
                     let palette = cx.new(|cx| {