Implement theme styling for `PickList` and `Menu`

14 files changed, 168 insertions, 247 deletions

diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index fa97583f..b2ae6953 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -1,7 +1,6 @@
 //! 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};
@@ -877,8 +876,7 @@ 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"))
diff --git a/examples/game_of_life/src/style.rs b/examples/game_of_life/src/style.rs
deleted file mode 100644
index 69889889..00000000
--- a/examples/game_of_life/src/style.rs
+++ /dev/null
@@ -1,56 +0,0 @@
-use iced::{pick_list, Color};
-
-const BACKGROUND: Color = Color::from_rgb(
-    0x2F as f32 / 255.0,
-    0x31 as f32 / 255.0,
-    0x36 as f32 / 255.0,
-);
-
-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
-        }
-    }
-}
diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs
index 4db9fbc7..58528b96 100644
--- a/examples/pure/game_of_life/src/main.rs
+++ b/examples/pure/game_of_life/src/main.rs
@@ -1,7 +1,6 @@
 //! 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::executor;
@@ -195,8 +194,7 @@ 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")
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 d1ca5c9b..00000000
--- a/examples/pure/game_of_life/src/style.rs
+++ /dev/null
@@ -1,56 +0,0 @@
-use iced::{pick_list, Color};
-
-pub const BACKGROUND: Color = Color::from_rgb(
-    0x2F as f32 / 255.0,
-    0x31 as f32 / 255.0,
-    0x36 as f32 / 255.0,
-);
-
-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
-        }
-    }
-}
diff --git a/graphics/src/overlay/menu.rs b/graphics/src/overlay/menu.rs
index c5ff093d..8b489e5e 100644
--- a/graphics/src/overlay/menu.rs
+++ b/graphics/src/overlay/menu.rs
@@ -1,3 +1,3 @@
 //! Build and show dropdown menus.
 
-pub use iced_style::menu::Style;
+pub use iced_style::menu::{Appearance, StyleSheet};
diff --git a/native/src/overlay/menu.rs b/native/src/overlay/menu.rs
index fdb68247..979a13c3 100644
--- a/native/src/overlay/menu.rs
+++ b/native/src/overlay/menu.rs
@@ -14,11 +14,15 @@ use crate::{
     Shell, Size, Vector, Widget,
 };
 
-pub use iced_style::menu::Style;
+pub use iced_style::menu::{Appearance, StyleSheet};
 
 /// A list of selectable options.
 #[allow(missing_debug_implementations)]
-pub struct Menu<'a, T, Renderer: text::Renderer> {
+pub struct Menu<'a, T, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
@@ -27,14 +31,15 @@ pub struct Menu<'a, T, Renderer: text::Renderer> {
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style: Style,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, T, Renderer> Menu<'a, T, Renderer>
 where
     T: ToString + Clone,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
+    Renderer::Theme:
+        StyleSheet + container::StyleSheet + scrollable::StyleSheet,
 {
     /// Creates a new [`Menu`] with the given [`State`], a list of options, and
     /// the message to produced when an option is selected.
@@ -82,7 +87,10 @@ where
     }
 
     /// Sets the style of the [`Menu`].
-    pub fn style(mut self, style: impl Into<Style>) -> Self {
+    pub fn style(
+        mut self,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+    ) -> Self {
         self.style = style.into();
         self
     }
@@ -121,12 +129,12 @@ impl State {
 struct Overlay<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
-    Renderer::Theme: container::StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     container: Container<'a, Message, Renderer>,
     width: u16,
     target_height: f32,
-    style: Style,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
@@ -134,7 +142,8 @@ where
     Message: 'a,
     Renderer: 'a,
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
+    Renderer::Theme:
+        StyleSheet + container::StyleSheet + scrollable::StyleSheet,
 {
     pub fn new<T>(menu: Menu<'a, T, Renderer>, target_height: f32) -> Self
     where
@@ -160,9 +169,8 @@ where
                 font,
                 text_size,
                 padding,
-                style: style.clone(),
-            }))
-            .padding(1);
+                style,
+            }));
 
         Self {
             container,
@@ -177,7 +185,7 @@ impl<'a, Message, Renderer> crate::Overlay<Message, Renderer>
     for Overlay<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn layout(
         &self,
@@ -254,16 +262,20 @@ where
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
+        let appearance = theme.appearance(self.style);
         let bounds = layout.bounds();
 
         renderer.fill_quad(
             renderer::Quad {
-                bounds,
-                border_color: self.style.border_color,
-                border_width: self.style.border_width,
+                bounds: Rectangle {
+                    width: bounds.width - 1.0,
+                    ..bounds
+                },
+                border_color: appearance.border_color,
+                border_width: appearance.border_width,
                 border_radius: 0.0,
             },
-            self.style.background,
+            appearance.background,
         );
 
         self.container.draw(
@@ -277,14 +289,18 @@ where
     }
 }
 
-struct List<'a, T, Renderer: text::Renderer> {
+struct List<'a, T, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
     last_selection: &'a mut Option<T>,
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style: Style,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, T, Message, Renderer> Widget<Message, Renderer>
@@ -292,6 +308,7 @@ impl<'a, T, Message, Renderer> Widget<Message, Renderer>
 where
     T: Clone + ToString,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         Length::Fill
@@ -404,12 +421,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
         viewport: &Rectangle,
     ) {
+        let appearance = theme.appearance(self.style);
         let bounds = layout.bounds();
 
         let text_size = self.text_size.unwrap_or(renderer.default_size());
@@ -441,7 +459,7 @@ where
                         border_width: 0.0,
                         border_radius: 0.0,
                     },
-                    self.style.selected_background,
+                    appearance.selected_background,
                 );
             }
 
@@ -456,9 +474,9 @@ where
                 size: f32::from(text_size),
                 font: self.font.clone(),
                 color: if is_selected {
-                    self.style.selected_text_color
+                    appearance.selected_text_color
                 } else {
-                    self.style.text_color
+                    appearance.text_color
                 },
                 horizontal_alignment: alignment::Horizontal::Left,
                 vertical_alignment: alignment::Vertical::Center,
@@ -473,6 +491,7 @@ where
     T: ToString + Clone,
     Message: 'a,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs
index eea5862a..c6cfcc01 100644
--- a/native/src/widget/pick_list.rs
+++ b/native/src/widget/pick_list.rs
@@ -17,13 +17,15 @@ use crate::{
 };
 use std::borrow::Cow;
 
-pub use iced_style::pick_list::{Style, StyleSheet};
+pub use iced_style::pick_list::{Appearance, StyleSheet};
 
 /// A widget for selecting a single value from a list of options.
 #[allow(missing_debug_implementations)]
-pub struct PickList<'a, T, Message, Renderer: text::Renderer>
+pub struct PickList<'a, T, Message, Renderer>
 where
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     state: &'a mut State<T>,
     on_selected: Box<dyn Fn(T) -> Message>,
@@ -34,7 +36,7 @@ where
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 /// The local state of a [`PickList`].
@@ -66,11 +68,12 @@ impl<T> Default for State<T> {
     }
 }
 
-impl<'a, T: 'a, Message, Renderer: text::Renderer>
-    PickList<'a, T, Message, Renderer>
+impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
 where
     T: ToString + Eq,
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default padding of a [`PickList`].
     pub const DEFAULT_PADDING: Padding = Padding::new(5);
@@ -94,7 +97,7 @@ where
             text_size: None,
             padding: Self::DEFAULT_PADDING,
             font: Default::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -131,9 +134,9 @@ where
     /// Sets the style of the [`PickList`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -319,13 +322,13 @@ pub fn overlay<'a, T, Message, Renderer>(
     text_size: Option<u16>,
     font: Renderer::Font,
     options: &'a [T],
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
 ) -> Option<overlay::Element<'a, Message, Renderer>>
 where
+    T: Clone + ToString,
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
-    T: Clone + ToString,
+    Renderer::Theme: StyleSheet,
 {
     if state.is_open {
         let bounds = layout.bounds();
@@ -339,7 +342,7 @@ where
         .width(bounds.width.round() as u16)
         .padding(padding)
         .font(font)
-        .style(style_sheet.menu());
+        .style(style);
 
         if let Some(text_size) = text_size {
             menu = menu.text_size(text_size);
@@ -354,6 +357,7 @@ where
 /// Draws a [`PickList`].
 pub fn draw<T, Renderer>(
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     layout: Layout<'_>,
     cursor_position: Point,
     padding: Padding,
@@ -361,9 +365,10 @@ pub fn draw<T, Renderer>(
     font: &Renderer::Font,
     placeholder: Option<&str>,
     selected: Option<&T>,
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
 ) where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
     T: ToString,
 {
     let bounds = layout.bounds();
@@ -371,9 +376,9 @@ pub fn draw<T, Renderer>(
     let is_selected = selected.is_some();
 
     let style = if is_mouse_over {
-        style_sheet.hovered()
+        theme.hovered(style)
     } else {
-        style_sheet.active()
+        theme.active(style)
     };
 
     renderer.fill_quad(
@@ -433,7 +438,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'static,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -494,7 +499,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -502,6 +507,7 @@ where
     ) {
         draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             self.padding,
@@ -509,7 +515,7 @@ where
             &self.font,
             self.placeholder.as_ref().map(String::as_str),
             self.selected.as_ref(),
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 
@@ -525,7 +531,7 @@ where
             self.text_size,
             self.font.clone(),
             &self.options,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -537,7 +543,12 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'static,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
+    Renderer::Theme: StyleSheet
+        + container::StyleSheet
+        + scrollable::StyleSheet
+        + menu::StyleSheet,
+    <Renderer::Theme as StyleSheet>::Style:
+        Into<<Renderer::Theme as menu::StyleSheet>::Style>,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/helpers.rs b/pure/src/helpers.rs
index 216dab53..18791945 100644
--- a/pure/src/helpers.rs
+++ b/pure/src/helpers.rs
@@ -179,6 +179,7 @@ where
     T: ToString + Eq + 'static,
     [T]: ToOwned<Owned = Vec<T>>,
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::pick_list::StyleSheet,
 {
     widget::PickList::new(options, selected, on_selected)
 }
diff --git a/pure/src/widget/pick_list.rs b/pure/src/widget/pick_list.rs
index 7c8a3be6..2c465932 100644
--- a/pure/src/widget/pick_list.rs
+++ b/pure/src/widget/pick_list.rs
@@ -1,6 +1,4 @@
 //! Display a dropdown list of selectable values.
-use crate::widget::container;
-use crate::widget::scrollable;
 use crate::widget::tree::{self, Tree};
 use crate::{Element, Widget};
 
@@ -17,13 +15,15 @@ use iced_native::{
 
 use std::borrow::Cow;
 
-pub use iced_style::pick_list::{Style, StyleSheet};
+pub use iced_style::pick_list::{Appearance, StyleSheet};
 
 /// A widget for selecting a single value from a list of options.
 #[allow(missing_debug_implementations)]
-pub struct PickList<'a, T, Message, Renderer: text::Renderer>
+pub struct PickList<'a, T, Message, Renderer>
 where
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     on_selected: Box<dyn Fn(T) -> Message + 'a>,
     options: Cow<'a, [T]>,
@@ -33,14 +33,15 @@ where
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, T: 'a, Message, Renderer: text::Renderer>
-    PickList<'a, T, Message, Renderer>
+impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
 where
     T: ToString + Eq,
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default padding of a [`PickList`].
     pub const DEFAULT_PADDING: Padding = Padding::new(5);
@@ -61,7 +62,7 @@ where
             text_size: None,
             padding: Self::DEFAULT_PADDING,
             font: Default::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -98,9 +99,9 @@ where
     /// Sets the style of the [`PickList`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -112,7 +113,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<pick_list::State<T>>()
@@ -184,7 +185,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -192,6 +193,7 @@ where
     ) {
         pick_list::draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             self.padding,
@@ -199,7 +201,7 @@ where
             &self.font,
             self.placeholder.as_ref().map(String::as_str),
             self.selected.as_ref(),
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 
@@ -218,7 +220,7 @@ where
             self.text_size,
             self.font.clone(),
             &self.options,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -230,7 +232,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/src/pure/widget.rs b/src/pure/widget.rs
index a16ff22b..14cf3512 100644
--- a/src/pure/widget.rs
+++ b/src/pure/widget.rs
@@ -80,8 +80,7 @@ pub mod pane_grid {
 
 pub mod pick_list {
     //! Display a dropdown list of selectable values.
-    pub use iced_pure::overlay::menu::Style as Menu;
-    pub use iced_pure::widget::pick_list::{Style, StyleSheet};
+    pub use iced_pure::widget::pick_list::{Appearance, StyleSheet};
 
     /// A widget allowing the selection of a single value from a list of options.
     pub type PickList<'a, T, Message, Theme> =
diff --git a/src/widget.rs b/src/widget.rs
index 5996f578..0c4ad224 100644
--- a/src/widget.rs
+++ b/src/widget.rs
@@ -96,8 +96,7 @@ pub mod pane_grid {
 
 pub mod pick_list {
     //! Display a dropdown list of selectable values.
-    pub use iced_native::overlay::menu::Style as Menu;
-    pub use iced_native::widget::pick_list::{State, Style, StyleSheet};
+    pub use iced_native::widget::pick_list::{Appearance, State, StyleSheet};
 
     /// A widget allowing the selection of a single value from a list of options.
     pub type PickList<'a, T, Message, Theme> =
diff --git a/style/src/menu.rs b/style/src/menu.rs
index 90985b8f..b1dd5ea0 100644
--- a/style/src/menu.rs
+++ b/style/src/menu.rs
@@ -2,7 +2,7 @@ use iced_core::{Background, Color};
 
 /// The appearance of a menu.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub text_color: Color,
     pub background: Background,
     pub border_width: f32,
@@ -11,15 +11,8 @@ pub struct Style {
     pub selected_background: Background,
 }
 
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Self {
-            text_color: Color::BLACK,
-            background: Background::Color([0.87, 0.87, 0.87].into()),
-            border_width: 1.0,
-            border_color: [0.7, 0.7, 0.7].into(),
-            selected_text_color: Color::WHITE,
-            selected_background: Background::Color([0.4, 0.4, 1.0].into()),
-        }
-    }
+pub trait StyleSheet {
+    type Style: Default + Copy;
+
+    fn appearance(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/pick_list.rs b/style/src/pick_list.rs
index ad96b201..2bafe932 100644
--- a/style/src/pick_list.rs
+++ b/style/src/pick_list.rs
@@ -1,9 +1,12 @@
-use crate::menu;
 use iced_core::{Background, Color};
 
+use crate::container;
+use crate::menu;
+use crate::scrollable;
+
 /// The appearance of a pick list.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub text_color: Color,
     pub placeholder_color: Color,
     pub background: Background,
@@ -13,60 +16,14 @@ pub struct Style {
     pub icon_size: f32,
 }
 
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Self {
-            text_color: Color::BLACK,
-            placeholder_color: [0.4, 0.4, 0.4].into(),
-            background: Background::Color([0.87, 0.87, 0.87].into()),
-            border_radius: 0.0,
-            border_width: 1.0,
-            border_color: [0.7, 0.7, 0.7].into(),
-            icon_size: 0.7,
-        }
-    }
-}
-
 /// A set of rules that dictate the style of a container.
-pub trait StyleSheet {
-    fn menu(&self) -> menu::Style;
+pub trait StyleSheet:
+    container::StyleSheet + menu::StyleSheet + scrollable::StyleSheet
+{
+    type Style: Default + Copy + Into<<Self as menu::StyleSheet>::Style>;
 
-    fn active(&self) -> Style;
+    fn active(&self, style: <Self as StyleSheet>::Style) -> Appearance;
 
     /// Produces the style of a container.
-    fn hovered(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn menu(&self) -> menu::Style {
-        menu::Style::default()
-    }
-
-    fn active(&self) -> Style {
-        Style::default()
-    }
-
-    fn hovered(&self) -> Style {
-        Style {
-            border_color: Color::BLACK,
-            ..self.active()
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: 'a + StyleSheet,
-{
-    fn from(style: T) -> Self {
-        Box::new(style)
-    }
+    fn hovered(&self, style: <Self as StyleSheet>::Style) -> Appearance;
 }
diff --git a/style/src/theme.rs b/style/src/theme.rs
index 0e9a5964..b1e18c55 100644
--- a/style/src/theme.rs
+++ b/style/src/theme.rs
@@ -6,7 +6,9 @@ use crate::application;
 use crate::button;
 use crate::checkbox;
 use crate::container;
+use crate::menu;
 use crate::pane_grid;
+use crate::pick_list;
 use crate::progress_bar;
 use crate::radio;
 use crate::rule;
@@ -328,6 +330,61 @@ impl slider::StyleSheet for Theme {
 }
 
 /*
+ * Menu
+ */
+impl menu::StyleSheet for Theme {
+    type Style = ();
+
+    fn appearance(&self, _style: Self::Style) -> menu::Appearance {
+        let palette = self.extended_palette();
+
+        menu::Appearance {
+            text_color: palette.background.weak.text,
+            background: palette.background.weak.color.into(),
+            border_width: 1.0,
+            border_color: palette.background.strong.color,
+            selected_text_color: palette.primary.strong.text,
+            selected_background: palette.primary.strong.color.into(),
+        }
+    }
+}
+
+/*
+ * Pick List
+ */
+impl pick_list::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: ()) -> pick_list::Appearance {
+        let palette = self.extended_palette();
+
+        pick_list::Appearance {
+            text_color: palette.background.weak.text,
+            background: palette.background.weak.color.into(),
+            placeholder_color: palette.background.strong.color,
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.background.strong.color,
+            icon_size: 0.7,
+        }
+    }
+
+    fn hovered(&self, _style: ()) -> pick_list::Appearance {
+        let palette = self.extended_palette();
+
+        pick_list::Appearance {
+            text_color: palette.background.weak.text,
+            background: palette.background.weak.color.into(),
+            placeholder_color: palette.background.strong.color,
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.primary.strong.color,
+            icon_size: 0.7,
+        }
+    }
+}
+
+/*
  * Radio
  */
 impl radio::StyleSheet for Theme {
@@ -506,7 +563,6 @@ impl rule::StyleSheet for Theme {
 /*
  * Scrollable
  */
-
 impl scrollable::StyleSheet for Theme {
     type Style = ();