Add "Theming" section to the `tour` example

1 files changed, 60 insertions, 10 deletions

diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index c7ca8534..155592d5 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -7,7 +7,7 @@ use iced::theme;
 use iced::{
     Button, Checkbox, Color, Column, Container, ContentFit, Element, Image,
     Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text,
-    TextInput, Toggler,
+    TextInput, Theme, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -21,6 +21,7 @@ pub struct Tour {
     scroll: scrollable::State,
     back_button: button::State,
     next_button: button::State,
+    theme: Theme,
     debug: bool,
 }
 
@@ -33,6 +34,7 @@ impl Sandbox for Tour {
             scroll: scrollable::State::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
+            theme: Theme::default(),
             debug: false,
         }
     }
@@ -50,7 +52,8 @@ impl Sandbox for Tour {
                 self.steps.advance();
             }
             Message::StepMessage(step_msg) => {
-                self.steps.update(step_msg, &mut self.debug);
+                self.steps
+                    .update(step_msg, &mut self.theme, &mut self.debug);
             }
         }
     }
@@ -88,7 +91,7 @@ impl Sandbox for Tour {
             .max_width(540)
             .spacing(20)
             .padding(20)
-            .push(steps.view(self.debug).map(Message::StepMessage))
+            .push(steps.view(self.theme, self.debug).map(Message::StepMessage))
             .push(controls)
             .into();
 
@@ -106,6 +109,10 @@ impl Sandbox for Tour {
             .center_y()
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        self.theme
+    }
 }
 
 #[derive(Debug, Clone)]
@@ -125,6 +132,7 @@ impl Steps {
         Steps {
             steps: vec![
                 Step::Welcome,
+                Step::Theming,
                 Step::Slider {
                     state: slider::State::new(),
                     value: 50,
@@ -138,7 +146,7 @@ impl Steps {
                     size_slider: slider::State::new(),
                     size: 30,
                     color_sliders: [slider::State::new(); 3],
-                    color: Color::BLACK,
+                    color: Color::from_rgb(0.5, 0.5, 0.5),
                 },
                 Step::Radio { selection: None },
                 Step::Toggler {
@@ -162,12 +170,17 @@ impl Steps {
         }
     }
 
-    fn update(&mut self, msg: StepMessage, debug: &mut bool) {
-        self.steps[self.current].update(msg, debug);
+    fn update(
+        &mut self,
+        msg: StepMessage,
+        theme: &mut Theme,
+        debug: &mut bool,
+    ) {
+        self.steps[self.current].update(msg, theme, debug);
     }
 
-    fn view(&mut self, debug: bool) -> Element<StepMessage> {
-        self.steps[self.current].view(debug)
+    fn view(&mut self, theme: Theme, debug: bool) -> Element<StepMessage> {
+        self.steps[self.current].view(theme, debug)
     }
 
     fn advance(&mut self) {
@@ -198,6 +211,7 @@ impl Steps {
 
 enum Step {
     Welcome,
+    Theming,
     Slider {
         state: slider::State,
         value: u8,
@@ -236,6 +250,7 @@ enum Step {
 
 #[derive(Debug, Clone)]
 pub enum StepMessage {
+    ThemeSelected(Theme),
     SliderChanged(u8),
     LayoutChanged(Layout),
     SpacingChanged(u16),
@@ -251,8 +266,16 @@ pub enum StepMessage {
 }
 
 impl<'a> Step {
-    fn update(&mut self, msg: StepMessage, debug: &mut bool) {
+    fn update(
+        &mut self,
+        msg: StepMessage,
+        theme: &mut Theme,
+        debug: &mut bool,
+    ) {
         match msg {
+            StepMessage::ThemeSelected(new_theme) => {
+                *theme = new_theme;
+            }
             StepMessage::DebugToggled(value) => {
                 if let Step::Debugger = self {
                     *debug = value;
@@ -319,6 +342,7 @@ impl<'a> Step {
     fn title(&self) -> &str {
         match self {
             Step::Welcome => "Welcome",
+            Step::Theming => "Theming",
             Step::Radio { .. } => "Radio button",
             Step::Toggler { .. } => "Toggler",
             Step::Slider { .. } => "Slider",
@@ -335,6 +359,7 @@ impl<'a> Step {
     fn can_continue(&self) -> bool {
         match self {
             Step::Welcome => true,
+            Step::Theming => true,
             Step::Radio { selection } => *selection == Some(Language::Rust),
             Step::Toggler { can_continue } => *can_continue,
             Step::Slider { .. } => true,
@@ -348,9 +373,10 @@ impl<'a> Step {
         }
     }
 
-    fn view(&mut self, debug: bool) -> Element<StepMessage> {
+    fn view(&mut self, theme: Theme, debug: bool) -> Element<StepMessage> {
         match self {
             Step::Welcome => Self::welcome(),
+            Step::Theming => Self::theme(theme),
             Step::Radio { selection } => Self::radio(*selection),
             Step::Toggler { can_continue } => Self::toggler(*can_continue),
             Step::Slider { state, value } => Self::slider(state, *value),
@@ -415,6 +441,30 @@ impl<'a> Step {
             ))
     }
 
+    fn theme(theme: Theme) -> Column<'a, StepMessage> {
+        let light_radio = Radio::new(
+            Theme::Light,
+            "Light",
+            Some(theme),
+            StepMessage::ThemeSelected,
+        );
+
+        let dark_radio = Radio::new(
+            Theme::Dark,
+            "Dark",
+            Some(theme),
+            StepMessage::ThemeSelected,
+        );
+
+        Self::container("Theming")
+            .push(Text::new(
+                "You can easily change the appearance of an application made \
+                with Iced by selecting a different theme!",
+            ))
+            .push(light_radio)
+            .push(dark_radio)
+    }
+
     fn slider(
         state: &'a mut slider::State,
         value: u8,