Implement theme styling for `Container`

24 files changed, 300 insertions, 252 deletions

diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 4c955b6a..fca1116e 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -193,9 +193,9 @@ impl Application for Example {
                 .controls(pane.controls.view(id, total_panes, *is_pinned))
                 .padding(10)
                 .style(if is_focused {
-                    style::TitleBar::Focused
+                    style::title_bar_focused
                 } else {
-                    style::TitleBar::Active
+                    style::title_bar_active
                 });
 
             pane_grid::Content::new(Responsive::new(responsive, move |size| {
@@ -203,9 +203,9 @@ impl Application for Example {
             }))
             .title_bar(title_bar)
             .style(if is_focused {
-                style::Pane::Focused
+                style::pane_focused
             } else {
-                style::Pane::Active
+                style::pane_active
             })
         })
         .width(Length::Fill)
@@ -387,51 +387,47 @@ impl Controls {
 }
 
 mod style {
-    use iced::{container, Background, Color};
+    use iced::{container, Theme};
 
-    const SURFACE: Color = Color::from_rgb(
-        0xF2 as f32 / 255.0,
-        0xF3 as f32 / 255.0,
-        0xF5 as f32 / 255.0,
-    );
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    pub enum TitleBar {
-        Active,
-        Focused,
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for TitleBar {
-        fn style(&self) -> container::Style {
-            let pane = match self {
-                Self::Active => Pane::Active,
-                Self::Focused => Pane::Focused,
-            }
-            .style();
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-            container::Style {
-                text_color: Some(Color::WHITE),
-                background: Some(pane.border_color.into()),
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Pane {
-        Active,
-        Focused,
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for Pane {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Some(Background::Color(SURFACE)),
-                border_width: 2.0,
-                border_color: match self {
-                    Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
-                    Self::Focused => Color::BLACK,
-                },
-                ..Default::default()
-            }
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
         }
     }
 }
diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs
index 87c7a204..4db9fbc7 100644
--- a/examples/pure/game_of_life/src/main.rs
+++ b/examples/pure/game_of_life/src/main.rs
@@ -151,7 +151,6 @@ impl Application for GameOfLife {
         container(content)
             .width(Length::Fill)
             .height(Length::Fill)
-            .style(style::Container)
             .into()
     }
 }
diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs
index 773b88eb..d1ca5c9b 100644
--- a/examples/pure/game_of_life/src/style.rs
+++ b/examples/pure/game_of_life/src/style.rs
@@ -1,4 +1,4 @@
-use iced::{container, pick_list, Color};
+use iced::{pick_list, Color};
 
 pub const BACKGROUND: Color = Color::from_rgb(
     0x2F as f32 / 255.0,
@@ -6,17 +6,6 @@ pub const BACKGROUND: Color = Color::from_rgb(
     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 PickList;
 
 impl pick_list::StyleSheet for PickList {
diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs
index 2825a5c2..077e116b 100644
--- a/examples/pure/pane_grid/src/main.rs
+++ b/examples/pure/pane_grid/src/main.rs
@@ -179,9 +179,9 @@ impl Application for Example {
                 .controls(view_controls(id, total_panes, pane.is_pinned))
                 .padding(10)
                 .style(if is_focused {
-                    style::TitleBar::Focused
+                    style::title_bar_focused
                 } else {
-                    style::TitleBar::Active
+                    style::title_bar_active
                 });
 
             pane_grid::Content::new(responsive(move |size| {
@@ -189,9 +189,9 @@ impl Application for Example {
             }))
             .title_bar(title_bar)
             .style(if is_focused {
-                style::Pane::Focused
+                style::pane_focused
             } else {
-                style::Pane::Active
+                style::pane_active
             })
         })
         .width(Length::Fill)
@@ -323,51 +323,47 @@ fn view_controls<'a>(
 }
 
 mod style {
-    use iced::{container, Background, Color};
+    use iced::{container, Theme};
 
-    const SURFACE: Color = Color::from_rgb(
-        0xF2 as f32 / 255.0,
-        0xF3 as f32 / 255.0,
-        0xF5 as f32 / 255.0,
-    );
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    pub enum TitleBar {
-        Active,
-        Focused,
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for TitleBar {
-        fn style(&self) -> container::Style {
-            let pane = match self {
-                Self::Active => Pane::Active,
-                Self::Focused => Pane::Focused,
-            }
-            .style();
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-            container::Style {
-                text_color: Some(Color::WHITE),
-                background: Some(pane.border_color.into()),
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Pane {
-        Active,
-        Focused,
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for Pane {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Some(Background::Color(SURFACE)),
-                border_width: 2.0,
-                border_color: match self {
-                    Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
-                    Self::Focused => Color::BLACK,
-                },
-                ..Default::default()
-            }
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
         }
     }
 }
diff --git a/examples/pure/tooltip/src/main.rs b/examples/pure/tooltip/src/main.rs
index dbd83f5f..e9a6c111 100644
--- a/examples/pure/tooltip/src/main.rs
+++ b/examples/pure/tooltip/src/main.rs
@@ -1,6 +1,7 @@
-use iced::pure::{
-    button, container, tooltip, widget::tooltip::Position, Element, Sandbox,
-};
+use iced::pure::widget::tooltip::Position;
+use iced::pure::{button, container, tooltip};
+use iced::pure::{Element, Sandbox};
+use iced::theme;
 use iced::{Length, Settings};
 
 pub fn main() -> iced::Result {
@@ -53,7 +54,7 @@ impl Sandbox for Example {
             self.position,
         )
         .gap(10)
-        .style(style::Tooltip);
+        .style(theme::Container::Box);
 
         container(tooltip)
             .width(Length::Fill)
@@ -73,21 +74,3 @@ fn position_to_text<'a>(position: Position) -> &'a str {
         Position::Right => "Right",
     }
 }
-
-mod style {
-    use iced::container;
-    use iced::Color;
-
-    pub struct Tooltip;
-
-    impl container::StyleSheet for Tooltip {
-        fn style(&self) -> container::Style {
-            container::Style {
-                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
-                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
-                border_radius: 12.0,
-                ..container::Style::default()
-            }
-        }
-    }
-}
diff --git a/examples/tooltip/src/main.rs b/examples/tooltip/src/main.rs
index cfeaf6a6..1bd1133c 100644
--- a/examples/tooltip/src/main.rs
+++ b/examples/tooltip/src/main.rs
@@ -1,7 +1,9 @@
+use iced::alignment::{self, Alignment};
+use iced::button;
+use iced::theme;
 use iced::tooltip::{self, Tooltip};
 use iced::{
-    alignment, button, Alignment, Button, Column, Container, Element, Length,
-    Row, Sandbox, Settings, Text,
+    Button, Column, Container, Element, Length, Row, Sandbox, Settings, Text,
 };
 
 pub fn main() {
@@ -115,24 +117,6 @@ fn tooltip<'a>(
     )
     .gap(5)
     .padding(10)
-    .style(style::Tooltip)
+    .style(theme::Container::Box)
     .into()
 }
-
-mod style {
-    use iced::container;
-    use iced::Color;
-
-    pub struct Tooltip;
-
-    impl container::StyleSheet for Tooltip {
-        fn style(&self) -> container::Style {
-            container::Style {
-                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
-                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
-                border_radius: 12.0,
-                ..container::Style::default()
-            }
-        }
-    }
-}
diff --git a/native/src/overlay/menu.rs b/native/src/overlay/menu.rs
index 36dc8f03..fdb68247 100644
--- a/native/src/overlay/menu.rs
+++ b/native/src/overlay/menu.rs
@@ -7,8 +7,8 @@ use crate::overlay;
 use crate::renderer;
 use crate::text::{self, Text};
 use crate::touch;
+use crate::widget::container::{self, Container};
 use crate::widget::scrollable::{self, Scrollable};
-use crate::widget::Container;
 use crate::{
     Clipboard, Color, Element, Layout, Length, Padding, Point, Rectangle,
     Shell, Size, Vector, Widget,
@@ -34,7 +34,7 @@ impl<'a, T, Renderer> Menu<'a, T, Renderer>
 where
     T: ToString + Clone,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: 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.
@@ -118,7 +118,11 @@ impl State {
     }
 }
 
-struct Overlay<'a, Message, Renderer> {
+struct Overlay<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     container: Container<'a, Message, Renderer>,
     width: u16,
     target_height: f32,
@@ -130,7 +134,7 @@ where
     Message: 'a,
     Renderer: 'a,
     Renderer: text::Renderer,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
 {
     pub fn new<T>(menu: Menu<'a, T, Renderer>, target_height: f32) -> Self
     where
@@ -173,6 +177,7 @@ impl<'a, Message, Renderer> crate::Overlay<Message, Renderer>
     for Overlay<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn layout(
         &self,
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index efcecb1e..493aa67b 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -12,13 +12,17 @@ use crate::{
 
 use std::u32;
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_style::container::{Appearance, StyleSheet};
 
 /// An element decorating some content.
 ///
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
-pub struct Container<'a, Message, Renderer> {
+pub struct Container<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     padding: Padding,
     width: Length,
     height: Length,
@@ -26,13 +30,14 @@ pub struct Container<'a, Message, Renderer> {
     max_height: u32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
     content: Element<'a, Message, Renderer>,
 }
 
 impl<'a, Message, Renderer> Container<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates an empty [`Container`].
     pub fn new<T>(content: T) -> Self
@@ -47,7 +52,7 @@ where
             max_height: u32::MAX,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
-            style_sheet: Default::default(),
+            style: Default::default(),
             content: content.into(),
         }
     }
@@ -109,9 +114,9 @@ where
     /// Sets the style of the [`Container`].
     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
     }
 }
@@ -146,6 +151,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Container<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -215,7 +221,7 @@ where
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
 
         draw_background(renderer, &style, layout.bounds());
 
@@ -246,20 +252,20 @@ where
 /// Draws the background of a [`Container`] given its [`Style`] and its `bounds`.
 pub fn draw_background<Renderer>(
     renderer: &mut Renderer,
-    style: &Style,
+    appearance: &Appearance,
     bounds: Rectangle,
 ) where
     Renderer: crate::Renderer,
 {
-    if style.background.is_some() || style.border_width > 0.0 {
+    if appearance.background.is_some() || appearance.border_width > 0.0 {
         renderer.fill_quad(
             renderer::Quad {
                 bounds,
-                border_radius: style.border_radius,
-                border_width: style.border_width,
-                border_color: style.border_color,
+                border_radius: appearance.border_radius,
+                border_width: appearance.border_width,
+                border_color: appearance.border_color,
             },
-            style
+            appearance
                 .background
                 .unwrap_or(Background::Color(Color::TRANSPARENT)),
         );
@@ -269,8 +275,9 @@ pub fn draw_background<Renderer>(
 impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         column: Container<'a, Message, Renderer>,
diff --git a/native/src/widget/pane_grid.rs b/native/src/widget/pane_grid.rs
index f903c021..eb969dbf 100644
--- a/native/src/widget/pane_grid.rs
+++ b/native/src/widget/pane_grid.rs
@@ -36,6 +36,7 @@ use crate::mouse;
 use crate::overlay;
 use crate::renderer;
 use crate::touch;
+use crate::widget::container;
 use crate::{
     Clipboard, Color, Element, Layout, Length, Point, Rectangle, Shell, Size,
     Vector, Widget,
@@ -96,7 +97,7 @@ pub use iced_style::pane_grid::{Line, StyleSheet};
 pub struct PaneGrid<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     state: &'a mut state::Internal,
     action: &'a mut state::Action,
@@ -113,7 +114,7 @@ where
 impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
     ///
@@ -659,7 +660,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for PaneGrid<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -815,7 +816,7 @@ impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
 where
     Message: 'a,
     Renderer: 'a + crate::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn from(
         pane_grid: PaneGrid<'a, Message, Renderer>,
diff --git a/native/src/widget/pane_grid/content.rs b/native/src/widget/pane_grid/content.rs
index 6b3ff680..4c9e65c9 100644
--- a/native/src/widget/pane_grid/content.rs
+++ b/native/src/widget/pane_grid/content.rs
@@ -11,22 +11,27 @@ use crate::{Clipboard, Element, Layout, Point, Rectangle, Shell, Size};
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct Content<'a, Message, Renderer> {
+pub struct Content<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     title_bar: Option<TitleBar<'a, Message, Renderer>>,
     body: Element<'a, Message, Renderer>,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`Content`] with the provided body.
     pub fn new(body: impl Into<Element<'a, Message, Renderer>>) -> Self {
         Self {
             title_bar: None,
             body: body.into(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -42,9 +47,9 @@ where
     /// Sets the style of the [`Content`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -52,6 +57,7 @@ where
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Draws the [`Content`] with the provided [`Renderer`] and [`Layout`].
     ///
@@ -65,10 +71,12 @@ where
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
 
         {
-            let style = self.style_sheet.style();
+            let style = theme.appearance(self.style);
 
             container::draw_background(renderer, &style, bounds);
         }
@@ -248,6 +256,7 @@ where
 impl<'a, Message, Renderer> Draggable for &Content<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn can_be_dragged_at(
         &self,
@@ -269,6 +278,7 @@ impl<'a, T, Message, Renderer> From<T> for Content<'a, Message, Renderer>
 where
     T: Into<Element<'a, Message, Renderer>>,
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn from(element: T) -> Self {
         Self::new(element)
diff --git a/native/src/widget/pane_grid/title_bar.rs b/native/src/widget/pane_grid/title_bar.rs
index 1392d505..2a028dd5 100644
--- a/native/src/widget/pane_grid/title_bar.rs
+++ b/native/src/widget/pane_grid/title_bar.rs
@@ -12,17 +12,22 @@ use crate::{
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct TitleBar<'a, Message, Renderer> {
+pub struct TitleBar<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     controls: Option<Element<'a, Message, Renderer>>,
     padding: Padding,
     always_show_controls: bool,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`TitleBar`] with the given content.
     pub fn new<E>(content: E) -> Self
@@ -34,7 +39,7 @@ where
             controls: None,
             padding: Padding::ZERO,
             always_show_controls: false,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -56,9 +61,9 @@ where
     /// Sets the style of the [`TitleBar`].
     pub fn style(
         mut self,
-        style: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style.into();
+        self.style = style.into();
         self
     }
 
@@ -79,6 +84,7 @@ where
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Draws the [`TitleBar`] with the provided [`Renderer`] and [`Layout`].
     ///
@@ -93,8 +99,10 @@ where
         viewport: &Rectangle,
         show_controls: bool,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
         let inherited_style = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
         };
diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs
index b19c65ed..eea5862a 100644
--- a/native/src/widget/pick_list.rs
+++ b/native/src/widget/pick_list.rs
@@ -9,6 +9,7 @@ use crate::overlay::menu::{self, Menu};
 use crate::renderer;
 use crate::text::{self, Text};
 use crate::touch;
+use crate::widget::container;
 use crate::widget::scrollable;
 use crate::{
     Clipboard, Element, Layout, Length, Padding, Point, Rectangle, Shell, Size,
@@ -323,7 +324,7 @@ pub fn overlay<'a, T, Message, Renderer>(
 where
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
     T: Clone + ToString,
 {
     if state.is_open {
@@ -432,7 +433,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'static,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -536,7 +537,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'static,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/native/src/widget/tooltip.rs b/native/src/widget/tooltip.rs
index 141aa5c8..d034f648 100644
--- a/native/src/widget/tooltip.rs
+++ b/native/src/widget/tooltip.rs
@@ -13,18 +13,23 @@ use crate::{
 
 /// An element to display a widget over another.
 #[allow(missing_debug_implementations)]
-pub struct Tooltip<'a, Message, Renderer: text::Renderer> {
+pub struct Tooltip<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     tooltip: Text<Renderer>,
     position: Position,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
     gap: u16,
     padding: u16,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// The default padding of a [`Tooltip`] drawn by this renderer.
     const DEFAULT_PADDING: u16 = 5;
@@ -41,9 +46,9 @@ where
             content: content.into(),
             tooltip: Text::new(tooltip.to_string()),
             position,
-            style_sheet: Default::default(),
             gap: 0,
             padding: Self::DEFAULT_PADDING,
+            style: Default::default(),
         }
     }
 
@@ -76,9 +81,9 @@ where
     /// Sets the style of the [`Tooltip`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -99,8 +104,9 @@ pub enum Position {
 }
 
 /// Draws a [`Tooltip`].
-pub fn draw<Renderer: crate::Renderer>(
+pub fn draw<Renderer>(
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     inherited_style: &renderer::Style,
     layout: Layout<'_>,
     cursor_position: Point,
@@ -108,7 +114,7 @@ pub fn draw<Renderer: crate::Renderer>(
     position: Position,
     gap: u16,
     padding: u16,
-    style_sheet: &dyn container::StyleSheet,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
     layout_text: impl FnOnce(&Renderer, &layout::Limits) -> layout::Node,
     draw_text: impl FnOnce(
         &mut Renderer,
@@ -117,12 +123,17 @@ pub fn draw<Renderer: crate::Renderer>(
         Point,
         &Rectangle,
     ),
-) {
+) where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
+    use container::StyleSheet;
+
     let bounds = layout.bounds();
 
     if bounds.contains(cursor_position) {
         let gap = f32::from(gap);
-        let style = style_sheet.style();
+        let style = theme.appearance(style);
 
         let defaults = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
@@ -213,6 +224,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn width(&self) -> Length {
         self.content.width()
@@ -286,6 +298,7 @@ where
 
         draw(
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -293,7 +306,7 @@ where
             self.position,
             self.gap,
             self.padding,
-            self.style_sheet.as_ref(),
+            self.style,
             |renderer, limits| {
                 Widget::<(), Renderer>::layout(tooltip, renderer, limits)
             },
@@ -315,8 +328,9 @@ where
 impl<'a, Message, Renderer> From<Tooltip<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + text::Renderer,
     Message: 'a,
+    Renderer: 'a + text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn from(
         tooltip: Tooltip<'a, Message, Renderer>,
diff --git a/pure/src/helpers.rs b/pure/src/helpers.rs
index 810b3885..216dab53 100644
--- a/pure/src/helpers.rs
+++ b/pure/src/helpers.rs
@@ -14,6 +14,7 @@ pub fn container<'a, Message, Renderer>(
 ) -> widget::Container<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::container::StyleSheet,
 {
     widget::Container::new(content)
 }
@@ -70,6 +71,7 @@ pub fn tooltip<'a, Message, Renderer>(
 ) -> widget::Tooltip<'a, Message, Renderer>
 where
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::container::StyleSheet,
 {
     widget::Tooltip::new(content, tooltip, position)
 }
diff --git a/pure/src/widget/container.rs b/pure/src/widget/container.rs
index 0ec2351a..8ea9ca72 100644
--- a/pure/src/widget/container.rs
+++ b/pure/src/widget/container.rs
@@ -15,13 +15,17 @@ use iced_native::{
 
 use std::u32;
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_style::container::{Appearance, StyleSheet};
 
 /// An element decorating some content.
 ///
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
-pub struct Container<'a, Message, Renderer> {
+pub struct Container<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     padding: Padding,
     width: Length,
     height: Length,
@@ -29,13 +33,14 @@ pub struct Container<'a, Message, Renderer> {
     max_height: u32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
     content: Element<'a, Message, Renderer>,
 }
 
 impl<'a, Message, Renderer> Container<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates an empty [`Container`].
     pub fn new<T>(content: T) -> Self
@@ -50,7 +55,7 @@ where
             max_height: u32::MAX,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
-            style_sheet: Default::default(),
+            style: Default::default(),
             content: content.into(),
         }
     }
@@ -112,9 +117,9 @@ where
     /// Sets the style of the [`Container`].
     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
     }
 }
@@ -123,6 +128,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Container<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn children(&self) -> Vec<Tree> {
         vec![Tree::new(&self.content)]
@@ -207,7 +213,7 @@ where
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
 
         container::draw_background(renderer, &style, layout.bounds());
 
@@ -243,8 +249,9 @@ where
 impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + iced_native::Renderer,
     Message: 'a,
+    Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         column: Container<'a, Message, Renderer>,
diff --git a/pure/src/widget/pane_grid.rs b/pure/src/widget/pane_grid.rs
index e2ba1e7e..69150aa8 100644
--- a/pure/src/widget/pane_grid.rs
+++ b/pure/src/widget/pane_grid.rs
@@ -19,6 +19,7 @@ pub use iced_native::widget::pane_grid::{
 };
 
 use crate::overlay;
+use crate::widget::container;
 use crate::widget::tree::{self, Tree};
 use crate::{Element, Widget};
 
@@ -86,7 +87,7 @@ pub use iced_style::pane_grid::{Line, StyleSheet};
 pub struct PaneGrid<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     state: &'a state::Internal,
     elements: Vec<(Pane, Content<'a, Message, Renderer>)>,
@@ -102,7 +103,7 @@ where
 impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
     ///
@@ -202,7 +203,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for PaneGrid<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<state::Action>()
@@ -403,7 +404,7 @@ impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
 where
     Message: 'a,
     Renderer: 'a + iced_native::Renderer,
-    Renderer::Theme: StyleSheet,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn from(
         pane_grid: PaneGrid<'a, Message, Renderer>,
diff --git a/pure/src/widget/pane_grid/content.rs b/pure/src/widget/pane_grid/content.rs
index 5069bd4a..9c2a0f4a 100644
--- a/pure/src/widget/pane_grid/content.rs
+++ b/pure/src/widget/pane_grid/content.rs
@@ -15,22 +15,27 @@ use iced_native::{Clipboard, Layout, Point, Rectangle, Shell, Size};
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct Content<'a, Message, Renderer> {
+pub struct Content<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     title_bar: Option<TitleBar<'a, Message, Renderer>>,
     body: Element<'a, Message, Renderer>,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`Content`] with the provided body.
     pub fn new(body: impl Into<Element<'a, Message, Renderer>>) -> Self {
         Self {
             title_bar: None,
             body: body.into(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -46,9 +51,9 @@ where
     /// Sets the style of the [`Content`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -56,6 +61,7 @@ where
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     pub(super) fn state(&self) -> Tree {
         let children = if let Some(title_bar) = self.title_bar.as_ref() {
@@ -95,10 +101,12 @@ where
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
 
         {
-            let style = self.style_sheet.style();
+            let style = theme.appearance(self.style);
 
             container::draw_background(renderer, &style, bounds);
         }
@@ -307,6 +315,7 @@ where
 impl<'a, Message, Renderer> Draggable for &Content<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn can_be_dragged_at(
         &self,
@@ -328,6 +337,7 @@ impl<'a, T, Message, Renderer> From<T> for Content<'a, Message, Renderer>
 where
     T: Into<Element<'a, Message, Renderer>>,
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn from(element: T) -> Self {
         Self::new(element)
diff --git a/pure/src/widget/pane_grid/title_bar.rs b/pure/src/widget/pane_grid/title_bar.rs
index 28a3d7fc..950fd990 100644
--- a/pure/src/widget/pane_grid/title_bar.rs
+++ b/pure/src/widget/pane_grid/title_bar.rs
@@ -13,17 +13,22 @@ use iced_native::{Clipboard, Layout, Padding, Point, Rectangle, Shell, Size};
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct TitleBar<'a, Message, Renderer> {
+pub struct TitleBar<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     controls: Option<Element<'a, Message, Renderer>>,
     padding: Padding,
     always_show_controls: bool,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`TitleBar`] with the given content.
     pub fn new<E>(content: E) -> Self
@@ -35,7 +40,7 @@ where
             controls: None,
             padding: Padding::ZERO,
             always_show_controls: false,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -57,9 +62,9 @@ where
     /// Sets the style of the [`TitleBar`].
     pub fn style(
         mut self,
-        style: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style.into();
+        self.style = style.into();
         self
     }
 
@@ -80,6 +85,7 @@ where
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     pub(super) fn state(&self) -> Tree {
         let children = if let Some(controls) = self.controls.as_ref() {
@@ -120,8 +126,10 @@ where
         viewport: &Rectangle,
         show_controls: bool,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
         let inherited_style = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
         };
diff --git a/pure/src/widget/pick_list.rs b/pure/src/widget/pick_list.rs
index 8fadd785..7c8a3be6 100644
--- a/pure/src/widget/pick_list.rs
+++ b/pure/src/widget/pick_list.rs
@@ -1,4 +1,5 @@
 //! 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};
@@ -111,7 +112,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<pick_list::State<T>>()
@@ -229,7 +230,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    Renderer::Theme: scrollable::StyleSheet,
+    Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/widget/tooltip.rs b/pure/src/widget/tooltip.rs
index 15aa32fe..745d100d 100644
--- a/pure/src/widget/tooltip.rs
+++ b/pure/src/widget/tooltip.rs
@@ -7,27 +7,33 @@ use iced_native::mouse;
 use iced_native::overlay;
 use iced_native::renderer;
 use iced_native::text;
+use iced_native::widget::container;
 use iced_native::widget::tooltip;
 use iced_native::widget::Text;
 use iced_native::{Clipboard, Layout, Length, Point, Rectangle, Shell};
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_style::container::{Appearance, StyleSheet};
 pub use tooltip::Position;
 
 /// An element to display a widget over another.
 #[allow(missing_debug_implementations)]
-pub struct Tooltip<'a, Message, Renderer: text::Renderer> {
+pub struct Tooltip<'a, Message, Renderer: text::Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     tooltip: Text<Renderer>,
     position: Position,
-    style_sheet: Box<dyn StyleSheet + 'a>,
     gap: u16,
     padding: u16,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// The default padding of a [`Tooltip`] drawn by this renderer.
     const DEFAULT_PADDING: u16 = 5;
@@ -44,9 +50,9 @@ where
             content: content.into(),
             tooltip: Text::new(tooltip.to_string()),
             position,
-            style_sheet: Default::default(),
             gap: 0,
             padding: Self::DEFAULT_PADDING,
+            style: Default::default(),
         }
     }
 
@@ -79,9 +85,9 @@ where
     /// Sets the style of the [`Tooltip`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -90,6 +96,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn children(&self) -> Vec<Tree> {
         vec![Tree::new(&self.content)]
@@ -177,6 +184,7 @@ where
 
         tooltip::draw(
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -184,7 +192,7 @@ where
             self.position,
             self.gap,
             self.padding,
-            self.style_sheet.as_ref(),
+            self.style,
             |renderer, limits| {
                 Widget::<(), Renderer>::layout(tooltip, renderer, limits)
             },
@@ -220,8 +228,9 @@ where
 impl<'a, Message, Renderer> From<Tooltip<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + text::Renderer,
     Message: 'a,
+    Renderer: 'a + text::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn from(
         tooltip: Tooltip<'a, Message, Renderer>,
diff --git a/src/pure/widget.rs b/src/pure/widget.rs
index 6ef9262f..a16ff22b 100644
--- a/src/pure/widget.rs
+++ b/src/pure/widget.rs
@@ -32,7 +32,7 @@ pub mod checkbox {
 
 pub mod container {
     //! Decorate content and apply alignment.
-    pub use iced_pure::widget::container::{Style, StyleSheet};
+    pub use iced_pure::widget::container::{Appearance, StyleSheet};
 
     /// An element decorating some content.
     pub type Container<'a, Message, Theme = crate::Theme> =
diff --git a/src/widget.rs b/src/widget.rs
index 8275f6e4..5996f578 100644
--- a/src/widget.rs
+++ b/src/widget.rs
@@ -48,7 +48,7 @@ pub mod checkbox {
 
 pub mod container {
     //! Decorate content and apply alignment.
-    pub use iced_native::widget::container::{Style, StyleSheet};
+    pub use iced_native::widget::container::{Appearance, StyleSheet};
 
     /// An element decorating some content.
     pub type Container<'a, Message, Theme = crate::Theme> =
diff --git a/style/src/container.rs b/style/src/container.rs
index 2f411611..184310fa 100644
--- a/style/src/container.rs
+++ b/style/src/container.rs
@@ -3,7 +3,7 @@ use iced_core::{Background, Color};
 
 /// The appearance of a container.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub text_color: Option<Color>,
     pub background: Option<Background>,
     pub border_radius: f32,
@@ -11,7 +11,7 @@ pub struct Style {
     pub border_color: Color,
 }
 
-impl std::default::Default for Style {
+impl std::default::Default for Appearance {
     fn default() -> Self {
         Self {
             text_color: None,
@@ -23,37 +23,10 @@ impl std::default::Default for Style {
     }
 }
 
-/// A set of rules that dictate the style of a container.
+/// A set of rules that dictate the [`Appearance`] of a container.
 pub trait StyleSheet {
-    /// Produces the style of a container.
-    fn style(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn style(&self) -> Style {
-        Style {
-            text_color: None,
-            background: None,
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
+    type Style: Default + Copy;
 
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
+    /// Produces the [`Appearance`] of a container.
+    fn appearance(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/theme.rs b/style/src/theme.rs
index 3eb4ea70..0e9a5964 100644
--- a/style/src/theme.rs
+++ b/style/src/theme.rs
@@ -5,6 +5,7 @@ pub use self::palette::Palette;
 use crate::application;
 use crate::button;
 use crate::checkbox;
+use crate::container;
 use crate::pane_grid;
 use crate::progress_bar;
 use crate::radio;
@@ -127,7 +128,6 @@ impl button::StyleSheet for Theme {
 /*
  * Checkbox
  */
-
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Checkbox {
     Primary,
@@ -228,6 +228,50 @@ fn checkbox_appearance(
 }
 
 /*
+ * Container
+ */
+#[derive(Clone, Copy)]
+pub enum Container {
+    Transparent,
+    Box,
+    Custom(fn(&Theme) -> container::Appearance),
+}
+
+impl Default for Container {
+    fn default() -> Self {
+        Self::Transparent
+    }
+}
+
+impl From<fn(&Theme) -> container::Appearance> for Container {
+    fn from(f: fn(&Theme) -> container::Appearance) -> Self {
+        Self::Custom(f)
+    }
+}
+
+impl container::StyleSheet for Theme {
+    type Style = Container;
+
+    fn appearance(&self, style: Self::Style) -> container::Appearance {
+        match style {
+            Container::Transparent => Default::default(),
+            Container::Box => {
+                let palette = self.extended_palette();
+
+                container::Appearance {
+                    text_color: None,
+                    background: palette.background.weak.color.into(),
+                    border_radius: 2.0,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                }
+            }
+            Container::Custom(f) => f(self),
+        }
+    }
+}
+
+/*
  * Slider
  */
 impl slider::StyleSheet for Theme {