Merge pull request #1362 from iced-rs/theming

Theming

2 files changed, 24 insertions, 205 deletions

diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs
index a3164701..851fbd47 100644
--- a/examples/pure/game_of_life/src/main.rs
+++ b/examples/pure/game_of_life/src/main.rs
@@ -1,18 +1,19 @@
 //! This example showcases an interactive version of the Game of Life, invented
 //! by John Conway. It leverages a `Canvas` together with other widgets.
 mod preset;
-mod style;
 
 use grid::Grid;
+use preset::Preset;
+
 use iced::executor;
 use iced::pure::{
     button, checkbox, column, container, pick_list, row, slider, text,
 };
 use iced::pure::{Application, Element};
+use iced::theme::{self, Theme};
 use iced::time;
 use iced::window;
-use iced::{Alignment, Color, Command, Length, Settings, Subscription};
-use preset::Preset;
+use iced::{Alignment, Command, Length, Settings, Subscription};
 use std::time::{Duration, Instant};
 
 pub fn main() -> iced::Result {
@@ -52,6 +53,7 @@ enum Message {
 
 impl Application for GameOfLife {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -69,10 +71,6 @@ impl Application for GameOfLife {
         String::from("Game of Life - Iced")
     }
 
-    fn background_color(&self) -> Color {
-        style::BACKGROUND
-    }
-
     fn update(&mut self, message: Message) -> Command<Message> {
         match message {
             Message::Grid(message, version) => {
@@ -153,9 +151,12 @@ impl Application for GameOfLife {
         container(content)
             .width(Length::Fill)
             .height(Length::Fill)
-            .style(style::Container)
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        Theme::Dark
+    }
 }
 
 fn view_controls<'a>(
@@ -168,19 +169,19 @@ fn view_controls<'a>(
         .spacing(10)
         .push(
             button(if is_playing { "Pause" } else { "Play" })
-                .on_press(Message::TogglePlayback)
-                .style(style::Button),
+                .on_press(Message::TogglePlayback),
         )
-        .push(button("Next").on_press(Message::Next).style(style::Button));
+        .push(
+            button("Next")
+                .on_press(Message::Next)
+                .style(theme::Button::Secondary),
+        );
 
     let speed_controls = row()
         .width(Length::Fill)
         .align_items(Alignment::Center)
         .spacing(10)
-        .push(
-            slider(1.0..=1000.0, speed as f32, Message::SpeedChanged)
-                .style(style::Slider),
-        )
+        .push(slider(1.0..=1000.0, speed as f32, Message::SpeedChanged))
         .push(text(format!("x{}", speed)).size(16));
 
     row()
@@ -198,10 +199,13 @@ fn view_controls<'a>(
         .push(
             pick_list(preset::ALL, Some(preset), Message::PresetPicked)
                 .padding(8)
-                .text_size(16)
-                .style(style::PickList),
+                .text_size(16),
+        )
+        .push(
+            button("Clear")
+                .on_press(Message::Clear)
+                .style(theme::Button::Destructive),
         )
-        .push(button("Clear").on_press(Message::Clear).style(style::Clear))
         .into()
 }
 
@@ -213,7 +217,7 @@ mod grid {
     };
     use iced::pure::Element;
     use iced::{
-        alignment, mouse, Color, Length, Point, Rectangle, Size, Vector,
+        alignment, mouse, Color, Length, Point, Rectangle, Size, Theme, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -522,6 +526,7 @@ mod grid {
         fn draw(
             &self,
             _interaction: &Interaction,
+            _theme: &Theme,
             bounds: Rectangle,
             cursor: Cursor,
         ) -> Vec<Geometry> {
diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs
deleted file mode 100644
index 1a64cf4a..00000000
--- a/examples/pure/game_of_life/src/style.rs
+++ /dev/null
@@ -1,186 +0,0 @@
-use iced::{button, container, pick_list, slider, Background, Color};
-
-const ACTIVE: Color = Color::from_rgb(
-    0x72 as f32 / 255.0,
-    0x89 as f32 / 255.0,
-    0xDA as f32 / 255.0,
-);
-
-const DESTRUCTIVE: Color = Color::from_rgb(
-    0xC0 as f32 / 255.0,
-    0x47 as f32 / 255.0,
-    0x47 as f32 / 255.0,
-);
-
-const HOVERED: Color = Color::from_rgb(
-    0x67 as f32 / 255.0,
-    0x7B as f32 / 255.0,
-    0xC4 as f32 / 255.0,
-);
-
-pub const BACKGROUND: Color = Color::from_rgb(
-    0x2F as f32 / 255.0,
-    0x31 as f32 / 255.0,
-    0x36 as f32 / 255.0,
-);
-
-pub struct Container;
-
-impl container::StyleSheet for Container {
-    fn style(&self) -> container::Style {
-        container::Style {
-            text_color: Some(Color::WHITE),
-            ..container::Style::default()
-        }
-    }
-}
-
-pub struct Button;
-
-impl button::StyleSheet for Button {
-    fn active(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(ACTIVE)),
-            border_radius: 3.0,
-            text_color: Color::WHITE,
-            ..button::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(HOVERED)),
-            text_color: Color::WHITE,
-            ..self.active()
-        }
-    }
-
-    fn pressed(&self) -> button::Style {
-        button::Style {
-            border_width: 1.0,
-            border_color: Color::WHITE,
-            ..self.hovered()
-        }
-    }
-}
-
-pub struct Clear;
-
-impl button::StyleSheet for Clear {
-    fn active(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(DESTRUCTIVE)),
-            border_radius: 3.0,
-            text_color: Color::WHITE,
-            ..button::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(Color {
-                a: 0.5,
-                ..DESTRUCTIVE
-            })),
-            text_color: Color::WHITE,
-            ..self.active()
-        }
-    }
-
-    fn pressed(&self) -> button::Style {
-        button::Style {
-            border_width: 1.0,
-            border_color: Color::WHITE,
-            ..self.hovered()
-        }
-    }
-}
-
-pub struct Slider;
-
-impl slider::StyleSheet for Slider {
-    fn active(&self) -> slider::Style {
-        slider::Style {
-            rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }),
-            handle: slider::Handle {
-                shape: slider::HandleShape::Circle { radius: 9.0 },
-                color: ACTIVE,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-            },
-        }
-    }
-
-    fn hovered(&self) -> slider::Style {
-        let active = self.active();
-
-        slider::Style {
-            handle: slider::Handle {
-                color: HOVERED,
-                ..active.handle
-            },
-            ..active
-        }
-    }
-
-    fn dragging(&self) -> slider::Style {
-        let active = self.active();
-
-        slider::Style {
-            handle: slider::Handle {
-                color: Color::from_rgb(0.85, 0.85, 0.85),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-}
-
-pub struct PickList;
-
-impl pick_list::StyleSheet for PickList {
-    fn menu(&self) -> pick_list::Menu {
-        pick_list::Menu {
-            text_color: Color::WHITE,
-            background: BACKGROUND.into(),
-            border_width: 1.0,
-            border_color: Color {
-                a: 0.7,
-                ..Color::BLACK
-            },
-            selected_background: Color {
-                a: 0.5,
-                ..Color::BLACK
-            }
-            .into(),
-            selected_text_color: Color::WHITE,
-        }
-    }
-
-    fn active(&self) -> pick_list::Style {
-        pick_list::Style {
-            text_color: Color::WHITE,
-            background: BACKGROUND.into(),
-            border_width: 1.0,
-            border_color: Color {
-                a: 0.6,
-                ..Color::BLACK
-            },
-            border_radius: 2.0,
-            icon_size: 0.5,
-            ..pick_list::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> pick_list::Style {
-        let active = self.active();
-
-        pick_list::Style {
-            border_color: Color {
-                a: 0.9,
-                ..Color::BLACK
-            },
-            ..active
-        }
-    }
-}