Merge pull request #1362 from iced-rs/theming

Theming

examples/bezier_tool/src/main.rs

@@ -71,7 +71,7 @@ mod bezier {
     use iced::{
         canvas::event::{self, Event},
         canvas::{self, Canvas, Cursor, Frame, Geometry, Path, Stroke},
-        mouse, Element, Length, Point, Rectangle,
+        mouse, Element, Length, Point, Rectangle, Theme,
     };
 
     #[derive(Default)]
@@ -158,7 +158,12 @@ mod bezier {
             }
         }
 
-        fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> {
+        fn draw(
+            &self,
+            _theme: &Theme,
+            bounds: Rectangle,
+            cursor: Cursor,
+        ) -> Vec<Geometry> {
             let content =
                 self.state.cache.draw(bounds.size(), |frame: &mut Frame| {
                     Curve::draw_all(self.curves, frame);

examples/clock/src/main.rs

@@ -1,7 +1,10 @@
+use iced::canvas::{
+    self, Cache, Canvas, Cursor, Geometry, LineCap, Path, Stroke,
+};
+use iced::executor;
 use iced::{
-    canvas::{self, Cache, Canvas, Cursor, Geometry, LineCap, Path, Stroke},
-    executor, Application, Color, Command, Container, Element, Length, Point,
-    Rectangle, Settings, Subscription, Vector,
+    Application, Color, Command, Container, Element, Length, Point, Rectangle,
+    Settings, Subscription, Theme, Vector,
 };
 
 pub fn main() -> iced::Result {
@@ -22,8 +25,9 @@ enum Message {
 }
 
 impl Application for Clock {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
@@ -77,7 +81,12 @@ impl Application for Clock {
 }
 
 impl<Message> canvas::Program<Message> for Clock {
-    fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry> {
+    fn draw(
+        &self,
+        _theme: &Theme,
+        bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Vec<Geometry> {
         let clock = self.clock.draw(bounds.size(), |frame| {
             let center = frame.center();
             let radius = frame.width().min(frame.height()) / 2.0;

examples/color_palette/src/main.rs

@@ -236,7 +236,12 @@ impl Theme {
 }
 
 impl<Message> canvas::Program<Message> for Theme {
-    fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry> {
+    fn draw(
+        &self,
+        _theme: &iced::Theme,
+        bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Vec<Geometry> {
         let theme = self.canvas_cache.draw(bounds.size(), |frame| {
             self.draw(frame);
         });
@@ -288,7 +293,7 @@ impl<C: 'static + ColorSpace + Copy> ColorPicker<C> {
             range: RangeInclusive<f64>,
             component: f32,
             update: impl Fn(f32) -> C + 'static,
-        ) -> Slider<f64, C> {
+        ) -> Slider<f64, C, iced::Renderer> {
             Slider::new(state, range, f64::from(component), move |v| {
                 update(v as f32)
             })

examples/component/src/main.rs

@@ -54,7 +54,7 @@ mod numeric_input {
     use iced_native::text;
     use iced_native::widget::button::{self, Button};
     use iced_native::widget::text_input::{self, TextInput};
-    use iced_native::widget::{Row, Text};
+    use iced_native::widget::{self, Row, Text};
     use iced_native::{Element, Length};
 
     pub struct NumericInput<'a, Message> {
@@ -95,6 +95,9 @@ mod numeric_input {
         for NumericInput<'a, Message>
     where
         Renderer: 'a + text::Renderer,
+        Renderer::Theme: button::StyleSheet
+            + text_input::StyleSheet
+            + widget::text::StyleSheet,
     {
         type Event = Event;
 
@@ -172,6 +175,9 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: text::Renderer + 'a,
+        Renderer::Theme: button::StyleSheet
+            + text_input::StyleSheet
+            + widget::text::StyleSheet,
     {
         fn from(numeric_input: NumericInput<'a, Message>) -> Self {
             component::view(numeric_input)

examples/counter/src/main.rs

@@ -1,6 +1,5 @@
-use iced::{
-    button, Alignment, Button, Column, Element, Sandbox, Settings, Text,
-};
+use iced::button::{self, Button};
+use iced::{Alignment, Column, Element, Sandbox, Settings, Text};
 
 pub fn main() -> iced::Result {
     Counter::run(Settings::default())

examples/custom_widget/src/main.rs

@@ -46,6 +46,7 @@ mod circle {
         fn draw(
             &self,
             renderer: &mut Renderer,
+            _theme: &Renderer::Theme,
             _style: &renderer::Style,
             layout: Layout<'_>,
             _cursor_position: Point,

examples/download_progress/src/main.rs

@@ -1,6 +1,8 @@
+use iced::button;
+use iced::executor;
 use iced::{
-    button, executor, Alignment, Application, Button, Column, Command,
-    Container, Element, Length, ProgressBar, Settings, Subscription, Text,
+    Alignment, Application, Button, Column, Command, Container, Element,
+    Length, ProgressBar, Settings, Subscription, Text, Theme,
 };
 
 mod download;
@@ -24,8 +26,9 @@ pub enum Message {
 }
 
 impl Application for Example {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Example, Command<Message>) {

examples/events/src/main.rs

@@ -1,6 +1,9 @@
+use iced::alignment;
+use iced::button;
+use iced::executor;
 use iced::{
-    alignment, button, executor, Alignment, Application, Button, Checkbox,
-    Column, Command, Container, Element, Length, Settings, Subscription, Text,
+    Alignment, Application, Button, Checkbox, Column, Command, Container,
+    Element, Length, Settings, Subscription, Text, Theme,
 };
 use iced_native::{window, Event};
 
@@ -27,8 +30,9 @@ enum Message {
 }
 
 impl Application for Events {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Events, Command<Message>) {

examples/game_of_life/src/main.rs

@@ -1,18 +1,18 @@
 //! 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 iced::button::{self, Button};
 use iced::executor;
 use iced::pick_list::{self, PickList};
 use iced::slider::{self, Slider};
+use iced::theme::{self, Theme};
 use iced::time;
 use iced::window;
 use iced::{
-    Alignment, Application, Checkbox, Column, Command, Container, Element,
-    Length, Row, Settings, Subscription, Text,
+    Alignment, Application, Checkbox, Column, Command, Element, Length, Row,
+    Settings, Subscription, Text,
 };
 use preset::Preset;
 use std::time::{Duration, Instant};
@@ -55,6 +55,7 @@ enum Message {
 
 impl Application for GameOfLife {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -141,20 +142,19 @@ impl Application for GameOfLife {
             self.grid.preset(),
         );
 
-        let content = Column::new()
+        Column::new()
             .push(
                 self.grid
                     .view()
                     .map(move |message| Message::Grid(message, version)),
             )
-            .push(controls);
-
-        Container::new(content)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .style(style::Container)
+            .push(controls)
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        Theme::Dark
+    }
 }
 
 mod grid {
@@ -163,7 +163,7 @@ mod grid {
         alignment,
         canvas::event::{self, Event},
         canvas::{self, Cache, Canvas, Cursor, Frame, Geometry, Path, Text},
-        mouse, Color, Element, Length, Point, Rectangle, Size, Vector,
+        mouse, Color, Element, Length, Point, Rectangle, Size, Theme, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -445,7 +445,12 @@ mod grid {
             }
         }
 
-        fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> {
+        fn draw(
+            &self,
+            _theme: &Theme,
+            bounds: Rectangle,
+            cursor: Cursor,
+        ) -> Vec<Geometry> {
             let center = Vector::new(bounds.width / 2.0, bounds.height / 2.0);
 
             let life = self.life_cache.draw(bounds.size(), |frame| {
@@ -836,27 +841,24 @@ impl Controls {
                     Text::new(if is_playing { "Pause" } else { "Play" }),
                 )
                 .on_press(Message::TogglePlayback)
-                .style(style::Button),
+                .style(theme::Button::Primary),
             )
             .push(
                 Button::new(&mut self.next_button, Text::new("Next"))
                     .on_press(Message::Next)
-                    .style(style::Button),
+                    .style(theme::Button::Secondary),
             );
 
         let speed_controls = Row::new()
             .width(Length::Fill)
             .align_items(Alignment::Center)
             .spacing(10)
-            .push(
-                Slider::new(
-                    &mut self.speed_slider,
-                    1.0..=1000.0,
-                    speed as f32,
-                    Message::SpeedChanged,
-                )
-                .style(style::Slider),
-            )
+            .push(Slider::new(
+                &mut self.speed_slider,
+                1.0..=1000.0,
+                speed as f32,
+                Message::SpeedChanged,
+            ))
             .push(Text::new(format!("x{}", speed)).size(16));
 
         Row::new()
@@ -879,13 +881,12 @@ impl Controls {
                     Message::PresetPicked,
                 )
                 .padding(8)
-                .text_size(16)
-                .style(style::PickList),
+                .text_size(16),
             )
             .push(
                 Button::new(&mut self.clear_button, Text::new("Clear"))
                     .on_press(Message::Clear)
-                    .style(style::Clear),
+                    .style(theme::Button::Destructive),
             )
             .into()
     }