feat: update `styling` example to work with new system theme tracking

4 files changed, 48 insertions, 7 deletions

diff --git a/Cargo.toml b/Cargo.toml
index 1f98a77..1f6cefc 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -35,7 +35,7 @@ iced_winit = "0.14.0-dev"
 serde = { version = "1.0", optional = true }
 
 [dependencies.iced_dialog]
-git = "https://github.com/pml68/iced_dialog"
+git = "https://git.sr.ht/~pml68/iced_dialog"
 branch = "master"
 optional = true
 
diff --git a/assets/styling_dark.png b/assets/styling_dark.png
index 8cd3c1c..9652aae 100644
--- a/assets/styling_dark.png
+++ b/assets/styling_dark.png
diff --git a/assets/styling_light.png b/assets/styling_light.png
index 97d7e68..1d24a98 100644
--- a/assets/styling_light.png
+++ b/assets/styling_light.png
diff --git a/examples/styling.rs b/examples/styling.rs
index 6b8a381..2a45321 100644
--- a/examples/styling.rs
+++ b/examples/styling.rs
@@ -3,8 +3,11 @@ use iced::widget::{
     Button, center, checkbox, column, container, pick_list, progress_bar, row,
     rule, scrollable, slider, space, text, text_input, toggler,
 };
-use iced::{Center, Fill, Subscription};
-use iced_material::{Theme, button};
+use iced::{Center, Fill, Subscription, border};
+use iced_material::{
+    Theme, button,
+    utils::{disabled_container, disabled_text},
+};
 
 type Element<'a, Message> = iced::Element<'a, Message, Theme>;
 
@@ -18,6 +21,7 @@ pub fn main() -> iced::Result {
 #[derive(Default)]
 struct Styling {
     theme: Theme,
+    system_theme: bool,
     input_value: String,
     slider_value: f32,
     checkbox_value: bool,
@@ -27,6 +31,7 @@ struct Styling {
 #[derive(Debug, Clone)]
 enum Message {
     ThemeChanged(Theme),
+    SystemTheme(bool),
     InputChanged(String),
     ButtonPressed,
     SliderChanged(f32),
@@ -42,12 +47,17 @@ impl Styling {
             Message::ThemeChanged(theme) => {
                 self.theme = theme;
             }
+            Message::SystemTheme(system_theme) => {
+                self.system_theme = system_theme
+            }
             Message::InputChanged(value) => self.input_value = value,
             Message::ButtonPressed => {}
             Message::SliderChanged(value) => self.slider_value = value,
             Message::CheckboxToggled(value) => self.checkbox_value = value,
             Message::TogglerToggled(value) => self.toggler_value = value,
-            Message::PreviousTheme | Message::NextTheme => {
+            Message::PreviousTheme | Message::NextTheme
+                if !self.system_theme =>
+            {
                 if let Some(current) = Theme::ALL
                     .iter()
                     .position(|candidate| &self.theme == candidate)
@@ -64,14 +74,45 @@ impl Styling {
                     };
                 }
             }
+            Message::PreviousTheme | Message::NextTheme => {}
         }
     }
 
     fn view(&self) -> Element<'_, Message> {
         let choose_theme = column![
             text("Theme:"),
-            pick_list(Theme::ALL, Some(&self.theme), Message::ThemeChanged)
-                .width(Fill),
+            row![
+                if self.system_theme {
+                    Element::from(
+                        container(text(self.theme.to_string()))
+                            .padding([5, 10])
+                            .width(Fill)
+                            .style(|theme: &Theme| {
+                                let color = theme.colors().surface.on_surface;
+                                container::Style {
+                                    background: Some(
+                                        disabled_container(color).into(),
+                                    ),
+                                    text_color: Some(disabled_text(color)),
+                                    border: border::rounded(4),
+                                    ..Default::default()
+                                }
+                            }),
+                    )
+                } else {
+                    pick_list(
+                        Theme::ALL,
+                        Some(&self.theme),
+                        Message::ThemeChanged,
+                    )
+                    .width(Fill)
+                    .into()
+                },
+                checkbox("Use system theme", self.system_theme)
+                    .on_toggle(Message::SystemTheme)
+            ]
+            .spacing(10)
+            .align_y(Center),
         ]
         .spacing(10);
 
@@ -177,6 +218,6 @@ impl Styling {
     }
 
     fn theme(&self) -> Option<Theme> {
-        None
+        (!self.system_theme).then_some(self.theme.clone())
     }
 }