Convert `Renderer::Theme` to generic `Widget` type

39 files changed, 865 insertions, 801 deletions

diff --git a/widget/src/button.rs b/widget/src/button.rs
index 14626dd3..3b11e8a7 100644
--- a/widget/src/button.rs
+++ b/widget/src/button.rs
@@ -14,13 +14,13 @@ use crate::core::{
     Shell, Size, Widget,
 };
 
-pub use iced_style::button::{Appearance, StyleSheet};
+pub use crate::style::button::{Appearance, StyleSheet};
 
 /// A generic widget that produces a message when pressed.
 ///
 /// ```no_run
 /// # type Button<'a, Message> =
-/// #     iced_widget::Button<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::Button<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// #[derive(Clone)]
 /// enum Message {
@@ -35,7 +35,7 @@ pub use iced_style::button::{Appearance, StyleSheet};
 ///
 /// ```
 /// # type Button<'a, Message> =
-/// #     iced_widget::Button<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::Button<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// #[derive(Clone)]
 /// enum Message {
@@ -51,26 +51,28 @@ pub use iced_style::button::{Appearance, StyleSheet};
 /// }
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct Button<'a, Message, Renderer = crate::Renderer>
+pub struct Button<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
 where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
-    content: Element<'a, Message, Renderer>,
+    content: Element<'a, Message, Theme, Renderer>,
     on_press: Option<Message>,
     width: Length,
     height: Length,
     padding: Padding,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, Message, Renderer> Button<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Button<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`Button`] with the given content.
-    pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
+    pub fn new(
+        content: impl Into<Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
         let content = content.into();
         let size = content.as_widget().size_hint();
 
@@ -80,7 +82,7 @@ where
             width: size.width.fluid(),
             height: size.height.fluid(),
             padding: Padding::new(5.0),
-            style: <Renderer::Theme as StyleSheet>::Style::default(),
+            style: Theme::Style::default(),
         }
     }
 
@@ -120,21 +122,18 @@ where
     }
 
     /// Sets the style variant of this [`Button`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Button<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Button<'a, Message, Theme, Renderer>
 where
     Message: 'a + Clone,
+    Theme: StyleSheet,
     Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State>()
@@ -224,7 +223,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -272,7 +271,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         self.content.as_widget_mut().overlay(
             &mut tree.children[0],
             layout.children().next().unwrap(),
@@ -281,14 +280,14 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Button<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Button<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
     Renderer: crate::core::Renderer + 'a,
-    Renderer::Theme: StyleSheet,
 {
-    fn from(button: Button<'a, Message, Renderer>) -> Self {
+    fn from(button: Button<'a, Message, Theme, Renderer>) -> Self {
         Self::new(button)
     }
 }
@@ -361,34 +360,32 @@ pub fn update<'a, Message: Clone>(
 }
 
 /// Draws a [`Button`].
-pub fn draw<'a, Renderer: crate::core::Renderer>(
+pub fn draw<'a, Theme, Renderer: crate::core::Renderer>(
     renderer: &mut Renderer,
     bounds: Rectangle,
     cursor: mouse::Cursor,
     is_enabled: bool,
-    style_sheet: &dyn StyleSheet<
-        Style = <Renderer::Theme as StyleSheet>::Style,
-    >,
-    style: &<Renderer::Theme as StyleSheet>::Style,
+    theme: &Theme,
+    style: &Theme::Style,
     state: impl FnOnce() -> &'a State,
 ) -> Appearance
 where
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     let is_mouse_over = cursor.is_over(bounds);
 
     let styling = if !is_enabled {
-        style_sheet.disabled(style)
+        theme.disabled(style)
     } else if is_mouse_over {
         let state = state();
 
         if state.is_pressed {
-            style_sheet.pressed(style)
+            theme.pressed(style)
         } else {
-            style_sheet.hovered(style)
+            theme.hovered(style)
         }
     } else {
-        style_sheet.active(style)
+        theme.active(style)
     };
 
     if styling.background.is_some()
diff --git a/widget/src/canvas.rs b/widget/src/canvas.rs
index 4e42a671..b95e6206 100644
--- a/widget/src/canvas.rs
+++ b/widget/src/canvas.rs
@@ -30,9 +30,8 @@ use std::marker::PhantomData;
 /// # use iced_widget::canvas::{self, Canvas, Fill, Frame, Geometry, Path, Program};
 /// # use iced_widget::core::{Color, Rectangle};
 /// # use iced_widget::core::mouse;
-/// # use iced_widget::style::Theme;
+/// # use iced_widget::{Renderer, Theme};
 /// #
-/// # pub type Renderer = iced_widget::renderer::Renderer<Theme>;
 /// // First, we define the data we need for drawing
 /// #[derive(Debug)]
 /// struct Circle {
@@ -62,22 +61,23 @@ use std::marker::PhantomData;
 /// let canvas = Canvas::new(Circle { radius: 50.0 });
 /// ```
 #[derive(Debug)]
-pub struct Canvas<P, Message, Renderer = crate::Renderer>
+pub struct Canvas<P, Message, Theme = crate::Theme, Renderer = crate::Renderer>
 where
     Renderer: geometry::Renderer,
-    P: Program<Message, Renderer>,
+    P: Program<Message, Theme, Renderer>,
 {
     width: Length,
     height: Length,
     program: P,
     message_: PhantomData<Message>,
-    theme_: PhantomData<Renderer>,
+    theme_: PhantomData<Theme>,
+    renderer_: PhantomData<Renderer>,
 }
 
-impl<P, Message, Renderer> Canvas<P, Message, Renderer>
+impl<P, Message, Theme, Renderer> Canvas<P, Message, Theme, Renderer>
 where
+    P: Program<Message, Theme, Renderer>,
     Renderer: geometry::Renderer,
-    P: Program<Message, Renderer>,
 {
     const DEFAULT_SIZE: f32 = 100.0;
 
@@ -89,6 +89,7 @@ where
             program,
             message_: PhantomData,
             theme_: PhantomData,
+            renderer_: PhantomData,
         }
     }
 
@@ -105,11 +106,11 @@ where
     }
 }
 
-impl<P, Message, Renderer> Widget<Message, Renderer>
-    for Canvas<P, Message, Renderer>
+impl<P, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Canvas<P, Message, Theme, Renderer>
 where
     Renderer: geometry::Renderer,
-    P: Program<Message, Renderer>,
+    P: Program<Message, Theme, Renderer>,
 {
     fn tag(&self) -> tree::Tag {
         struct Tag<T>(T);
@@ -192,7 +193,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -217,16 +218,17 @@ where
     }
 }
 
-impl<'a, P, Message, Renderer> From<Canvas<P, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, P, Message, Theme, Renderer> From<Canvas<P, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: 'a,
     Renderer: 'a + geometry::Renderer,
-    P: Program<Message, Renderer> + 'a,
+    P: 'a + Program<Message, Theme, Renderer>,
 {
     fn from(
-        canvas: Canvas<P, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        canvas: Canvas<P, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(canvas)
     }
 }
diff --git a/widget/src/canvas/program.rs b/widget/src/canvas/program.rs
index 2ac23061..0bff4bda 100644
--- a/widget/src/canvas/program.rs
+++ b/widget/src/canvas/program.rs
@@ -9,7 +9,7 @@ use crate::graphics::geometry;
 /// application.
 ///
 /// [`Canvas`]: crate::Canvas
-pub trait Program<Message, Renderer = crate::Renderer>
+pub trait Program<Message, Theme = crate::Theme, Renderer = crate::Renderer>
 where
     Renderer: geometry::Renderer,
 {
@@ -49,7 +49,7 @@ where
         &self,
         state: &Self::State,
         renderer: &Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         bounds: Rectangle,
         cursor: mouse::Cursor,
     ) -> Vec<Renderer::Geometry>;
@@ -70,10 +70,10 @@ where
     }
 }
 
-impl<Message, Renderer, T> Program<Message, Renderer> for &T
+impl<Message, Theme, Renderer, T> Program<Message, Theme, Renderer> for &T
 where
     Renderer: geometry::Renderer,
-    T: Program<Message, Renderer>,
+    T: Program<Message, Theme, Renderer>,
 {
     type State = T::State;
 
@@ -91,7 +91,7 @@ where
         &self,
         state: &Self::State,
         renderer: &Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         bounds: Rectangle,
         cursor: mouse::Cursor,
     ) -> Vec<Renderer::Geometry> {
diff --git a/widget/src/checkbox.rs b/widget/src/checkbox.rs
index 76268314..6f559ccc 100644
--- a/widget/src/checkbox.rs
+++ b/widget/src/checkbox.rs
@@ -12,7 +12,7 @@ use crate::core::{
     Clipboard, Element, Layout, Length, Pixels, Rectangle, Shell, Size, Widget,
 };
 
-pub use iced_style::checkbox::{Appearance, StyleSheet};
+pub use crate::style::checkbox::{Appearance, StyleSheet};
 
 /// A box that can be checked.
 ///
@@ -20,7 +20,7 @@ pub use iced_style::checkbox::{Appearance, StyleSheet};
 ///
 /// ```no_run
 /// # type Checkbox<'a, Message> =
-/// #     iced_widget::Checkbox<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::Checkbox<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// pub enum Message {
 ///     CheckboxToggled(bool),
@@ -33,10 +33,14 @@ pub use iced_style::checkbox::{Appearance, StyleSheet};
 ///
 /// ![Checkbox drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/checkbox.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Checkbox<'a, Message, Renderer = crate::Renderer>
-where
+pub struct Checkbox<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
 {
     is_checked: bool,
     on_toggle: Box<dyn Fn(bool) -> Message + 'a>,
@@ -49,13 +53,13 @@ where
     text_shaping: text::Shaping,
     font: Option<Renderer::Font>,
     icon: Icon<Renderer::Font>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: <Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer> Checkbox<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Checkbox<'a, Message, Theme, Renderer>
 where
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
+    Theme: StyleSheet + crate::text::StyleSheet,
 {
     /// The default size of a [`Checkbox`].
     const DEFAULT_SIZE: f32 = 20.0;
@@ -153,18 +157,18 @@ where
     /// Sets the style of the [`Checkbox`].
     pub fn style(
         mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+        style: impl Into<<Theme as StyleSheet>::Style>,
     ) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Checkbox<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Checkbox<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<widget::text::State<Renderer::Paragraph>>()
@@ -261,7 +265,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -335,16 +339,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Checkbox<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Checkbox<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: 'a + StyleSheet + crate::text::StyleSheet,
     Renderer: 'a + text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
 {
     fn from(
-        checkbox: Checkbox<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        checkbox: Checkbox<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(checkbox)
     }
 }
diff --git a/widget/src/column.rs b/widget/src/column.rs
index d6eea84b..faac0e48 100644
--- a/widget/src/column.rs
+++ b/widget/src/column.rs
@@ -12,17 +12,18 @@ use crate::core::{
 
 /// A container that distributes its contents vertically.
 #[allow(missing_debug_implementations)]
-pub struct Column<'a, Message, Renderer = crate::Renderer> {
+pub struct Column<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
+{
     spacing: f32,
     padding: Padding,
     width: Length,
     height: Length,
     max_width: f32,
     align_items: Alignment,
-    children: Vec<Element<'a, Message, Renderer>>,
+    children: Vec<Element<'a, Message, Theme, Renderer>>,
 }
 
-impl<'a, Message, Renderer> Column<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Column<'a, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
 {
@@ -41,7 +42,7 @@ where
 
     /// Creates a [`Column`] with the given elements.
     pub fn with_children(
-        children: impl IntoIterator<Item = Element<'a, Message, Renderer>>,
+        children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
     ) -> Self {
         children.into_iter().fold(Self::new(), Self::push)
     }
@@ -89,7 +90,7 @@ where
     /// Adds an element to the [`Column`].
     pub fn push(
         mut self,
-        child: impl Into<Element<'a, Message, Renderer>>,
+        child: impl Into<Element<'a, Message, Theme, Renderer>>,
     ) -> Self {
         let child = child.into();
         let size = child.as_widget().size_hint();
@@ -116,8 +117,8 @@ where
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Column<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Column<'a, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
 {
@@ -233,7 +234,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -258,18 +259,19 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         overlay::from_children(&mut self.children, tree, layout, renderer)
     }
 }
 
-impl<'a, Message, Renderer> From<Column<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Column<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: 'a,
     Renderer: crate::core::Renderer + 'a,
 {
-    fn from(column: Column<'a, Message, Renderer>) -> Self {
+    fn from(column: Column<'a, Message, Theme, Renderer>) -> Self {
         Self::new(column)
     }
 }
diff --git a/widget/src/combo_box.rs b/widget/src/combo_box.rs
index 73beeac3..0103e9cd 100644
--- a/widget/src/combo_box.rs
+++ b/widget/src/combo_box.rs
@@ -25,29 +25,34 @@ use std::fmt::Display;
 /// to search for corresponding values from the list of options that are displayed
 /// as a Menu.
 #[allow(missing_debug_implementations)]
-pub struct ComboBox<'a, T, Message, Renderer = crate::Renderer>
-where
+pub struct ComboBox<
+    'a,
+    T,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: text_input::StyleSheet + menu::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: text_input::StyleSheet + menu::StyleSheet,
 {
     state: &'a State<T>,
-    text_input: TextInput<'a, TextInputEvent, Renderer>,
+    text_input: TextInput<'a, TextInputEvent, Theme, Renderer>,
     font: Option<Renderer::Font>,
     selection: text_input::Value,
     on_selected: Box<dyn Fn(T) -> Message>,
     on_option_hovered: Option<Box<dyn Fn(T) -> Message>>,
     on_close: Option<Message>,
     on_input: Option<Box<dyn Fn(String) -> Message>>,
-    menu_style: <Renderer::Theme as menu::StyleSheet>::Style,
+    menu_style: <Theme as menu::StyleSheet>::Style,
     padding: Padding,
     size: Option<f32>,
 }
 
-impl<'a, T, Message, Renderer> ComboBox<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> ComboBox<'a, T, Message, Theme, Renderer>
 where
     T: std::fmt::Display + Clone,
+    Theme: text_input::StyleSheet + menu::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: text_input::StyleSheet + menu::StyleSheet,
 {
     /// Creates a new [`ComboBox`] with the given list of options, a placeholder,
     /// the current selected value, and the message to produce when an option is
@@ -116,8 +121,8 @@ where
     // TODO: Define its own `StyleSheet` trait
     pub fn style<S>(mut self, style: S) -> Self
     where
-        S: Into<<Renderer::Theme as text_input::StyleSheet>::Style>
-            + Into<<Renderer::Theme as menu::StyleSheet>::Style>
+        S: Into<<Theme as text_input::StyleSheet>::Style>
+            + Into<<Theme as menu::StyleSheet>::Style>
             + Clone,
     {
         self.menu_style = style.clone().into();
@@ -128,7 +133,7 @@ where
     /// Sets the style of the [`TextInput`] of the [`ComboBox`].
     pub fn text_input_style<S>(mut self, style: S) -> Self
     where
-        S: Into<<Renderer::Theme as text_input::StyleSheet>::Style> + Clone,
+        S: Into<<Theme as text_input::StyleSheet>::Style> + Clone,
     {
         self.text_input = self.text_input.style(style);
         self
@@ -289,19 +294,19 @@ enum TextInputEvent {
     TextChanged(String),
 }
 
-impl<'a, T, Message, Renderer> Widget<Message, Renderer>
-    for ComboBox<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for ComboBox<'a, T, Message, Theme, Renderer>
 where
     T: Display + Clone + 'static,
     Message: Clone,
-    Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet
+    Theme: container::StyleSheet
         + text_input::StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet,
+    Renderer: text::Renderer,
 {
     fn size(&self) -> Size<Length> {
-        Widget::<TextInputEvent, Renderer>::size(&self.text_input)
+        Widget::<TextInputEvent, Theme, Renderer>::size(&self.text_input)
     }
 
     fn layout(
@@ -340,7 +345,7 @@ where
     }
 
     fn children(&self) -> Vec<widget::Tree> {
-        vec![widget::Tree::new(&self.text_input as &dyn Widget<_, _>)]
+        vec![widget::Tree::new(&self.text_input as &dyn Widget<_, _, _>)]
     }
 
     fn on_event(
@@ -616,7 +621,7 @@ where
         &self,
         tree: &widget::Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -652,7 +657,7 @@ where
         tree: &'b mut widget::Tree,
         layout: Layout<'_>,
         _renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         let is_focused = {
             let text_input_state = tree.children[0]
                 .state
@@ -707,18 +712,20 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<ComboBox<'a, T, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer>
+    From<ComboBox<'a, T, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     T: Display + Clone + 'static,
-    Message: 'a + Clone,
-    Renderer: text::Renderer + 'a,
-    Renderer::Theme: container::StyleSheet
+    Message: Clone + 'a,
+    Theme: container::StyleSheet
         + text_input::StyleSheet
         + scrollable::StyleSheet
-        + menu::StyleSheet,
+        + menu::StyleSheet
+        + 'a,
+    Renderer: text::Renderer + 'a,
 {
-    fn from(combo_box: ComboBox<'a, T, Message, Renderer>) -> Self {
+    fn from(combo_box: ComboBox<'a, T, Message, Theme, Renderer>) -> Self {
         Self::new(combo_box)
     }
 }
diff --git a/widget/src/container.rs b/widget/src/container.rs
index f2d1aaba..78ec1978 100644
--- a/widget/src/container.rs
+++ b/widget/src/container.rs
@@ -19,10 +19,14 @@ pub use iced_style::container::{Appearance, StyleSheet};
 ///
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
-pub struct Container<'a, Message, Renderer = crate::Renderer>
-where
+pub struct Container<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     id: Option<Id>,
     padding: Padding,
@@ -32,19 +36,19 @@ where
     max_height: f32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
-    style: <Renderer::Theme as StyleSheet>::Style,
-    content: Element<'a, Message, Renderer>,
+    style: Theme::Style,
+    content: Element<'a, Message, Theme, Renderer>,
 }
 
-impl<'a, Message, Renderer> Container<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Container<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// Creates an empty [`Container`].
     pub fn new<T>(content: T) -> Self
     where
-        T: Into<Element<'a, Message, Renderer>>,
+        T: Into<Element<'a, Message, Theme, Renderer>>,
     {
         let content = content.into();
         let size = content.as_widget().size_hint();
@@ -124,20 +128,17 @@ where
     }
 
     /// Sets the style of the [`Container`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Container<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Container<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         self.content.as_widget().tag()
@@ -246,7 +247,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -278,7 +279,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         self.content.as_widget_mut().overlay(
             tree,
             layout.children().next().unwrap(),
@@ -287,16 +288,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Container<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: 'a + StyleSheet,
     Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn from(
-        column: Container<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        column: Container<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(column)
     }
 }
diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs
index 498dd76c..28fdbbb5 100644
--- a/widget/src/helpers.rs
+++ b/widget/src/helpers.rs
@@ -54,20 +54,20 @@ macro_rules! row {
 /// Creates a new [`Container`] with the provided content.
 ///
 /// [`Container`]: crate::Container
-pub fn container<'a, Message, Renderer>(
-    content: impl Into<Element<'a, Message, Renderer>>,
-) -> Container<'a, Message, Renderer>
+pub fn container<'a, Message, Theme, Renderer>(
+    content: impl Into<Element<'a, Message, Theme, Renderer>>,
+) -> Container<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet,
     Renderer: core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     Container::new(content)
 }
 
 /// Creates a new [`Column`] with the given children.
-pub fn column<'a, Message, Renderer>(
-    children: impl IntoIterator<Item = Element<'a, Message, Renderer>>,
-) -> Column<'a, Message, Renderer>
+pub fn column<'a, Message, Theme, Renderer>(
+    children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
+) -> Column<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -75,9 +75,9 @@ where
 }
 
 /// Creates a new [`keyed::Column`] with the given children.
-pub fn keyed_column<'a, Key, Message, Renderer>(
-    children: impl IntoIterator<Item = (Key, Element<'a, Message, Renderer>)>,
-) -> keyed::Column<'a, Key, Message, Renderer>
+pub fn keyed_column<'a, Key, Message, Theme, Renderer>(
+    children: impl IntoIterator<Item = (Key, Element<'a, Message, Theme, Renderer>)>,
+) -> keyed::Column<'a, Key, Message, Theme, Renderer>
 where
     Key: Copy + PartialEq,
     Renderer: core::Renderer,
@@ -88,9 +88,9 @@ where
 /// Creates a new [`Row`] with the given children.
 ///
 /// [`Row`]: crate::Row
-pub fn row<'a, Message, Renderer>(
-    children: impl IntoIterator<Item = Element<'a, Message, Renderer>>,
-) -> Row<'a, Message, Renderer>
+pub fn row<'a, Message, Theme, Renderer>(
+    children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
+) -> Row<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -100,12 +100,12 @@ where
 /// Creates a new [`Scrollable`] with the provided content.
 ///
 /// [`Scrollable`]: crate::Scrollable
-pub fn scrollable<'a, Message, Renderer>(
-    content: impl Into<Element<'a, Message, Renderer>>,
-) -> Scrollable<'a, Message, Renderer>
+pub fn scrollable<'a, Message, Theme, Renderer>(
+    content: impl Into<Element<'a, Message, Theme, Renderer>>,
+) -> Scrollable<'a, Message, Theme, Renderer>
 where
+    Theme: scrollable::StyleSheet,
     Renderer: core::Renderer,
-    Renderer::Theme: scrollable::StyleSheet,
 {
     Scrollable::new(content)
 }
@@ -113,13 +113,12 @@ where
 /// Creates a new [`Button`] with the provided content.
 ///
 /// [`Button`]: crate::Button
-pub fn button<'a, Message, Renderer>(
-    content: impl Into<Element<'a, Message, Renderer>>,
-) -> Button<'a, Message, Renderer>
+pub fn button<'a, Message, Theme, Renderer>(
+    content: impl Into<Element<'a, Message, Theme, Renderer>>,
+) -> Button<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
-    Renderer::Theme: button::StyleSheet,
-    <Renderer::Theme as button::StyleSheet>::Style: Default,
+    Theme: button::StyleSheet,
 {
     Button::new(content)
 }
@@ -128,14 +127,14 @@ where
 ///
 /// [`Tooltip`]: crate::Tooltip
 /// [`tooltip::Position`]: crate::tooltip::Position
-pub fn tooltip<'a, Message, Renderer>(
-    content: impl Into<Element<'a, Message, Renderer>>,
+pub fn tooltip<'a, Message, Theme, Renderer>(
+    content: impl Into<Element<'a, Message, Theme, Renderer>>,
     tooltip: impl ToString,
     position: tooltip::Position,
-) -> crate::Tooltip<'a, Message, Renderer>
+) -> crate::Tooltip<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet + text::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: container::StyleSheet + text::StyleSheet,
 {
     Tooltip::new(content, tooltip.to_string(), position)
 }
@@ -143,10 +142,12 @@ where
 /// Creates a new [`Text`] widget with the provided content.
 ///
 /// [`Text`]: core::widget::Text
-pub fn text<'a, Renderer>(text: impl ToString) -> Text<'a, Renderer>
+pub fn text<'a, Theme, Renderer>(
+    text: impl ToString,
+) -> Text<'a, Theme, Renderer>
 where
+    Theme: text::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: text::StyleSheet,
 {
     Text::new(text.to_string())
 }
@@ -154,14 +155,14 @@ where
 /// Creates a new [`Checkbox`].
 ///
 /// [`Checkbox`]: crate::Checkbox
-pub fn checkbox<'a, Message, Renderer>(
+pub fn checkbox<'a, Message, Theme, Renderer>(
     label: impl Into<String>,
     is_checked: bool,
     f: impl Fn(bool) -> Message + 'a,
-) -> Checkbox<'a, Message, Renderer>
+) -> Checkbox<'a, Message, Theme, Renderer>
 where
+    Theme: checkbox::StyleSheet + text::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: checkbox::StyleSheet + text::StyleSheet,
 {
     Checkbox::new(label, is_checked, f)
 }
@@ -169,16 +170,16 @@ where
 /// Creates a new [`Radio`].
 ///
 /// [`Radio`]: crate::Radio
-pub fn radio<Message, Renderer, V>(
+pub fn radio<Message, Theme, Renderer, V>(
     label: impl Into<String>,
     value: V,
     selected: Option<V>,
     on_click: impl FnOnce(V) -> Message,
-) -> Radio<Message, Renderer>
+) -> Radio<Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: radio::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: radio::StyleSheet,
     V: Copy + Eq,
 {
     Radio::new(label, value, selected, on_click)
@@ -187,14 +188,14 @@ where
 /// Creates a new [`Toggler`].
 ///
 /// [`Toggler`]: crate::Toggler
-pub fn toggler<'a, Message, Renderer>(
+pub fn toggler<'a, Message, Theme, Renderer>(
     label: impl Into<Option<String>>,
     is_checked: bool,
     f: impl Fn(bool) -> Message + 'a,
-) -> Toggler<'a, Message, Renderer>
+) -> Toggler<'a, Message, Theme, Renderer>
 where
     Renderer: core::text::Renderer,
-    Renderer::Theme: toggler::StyleSheet,
+    Theme: toggler::StyleSheet,
 {
     Toggler::new(label, is_checked, f)
 }
@@ -202,14 +203,14 @@ where
 /// Creates a new [`TextInput`].
 ///
 /// [`TextInput`]: crate::TextInput
-pub fn text_input<'a, Message, Renderer>(
+pub fn text_input<'a, Message, Theme, Renderer>(
     placeholder: &str,
     value: &str,
-) -> TextInput<'a, Message, Renderer>
+) -> TextInput<'a, Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: text_input::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: text_input::StyleSheet,
 {
     TextInput::new(placeholder, value)
 }
@@ -217,13 +218,13 @@ where
 /// Creates a new [`TextEditor`].
 ///
 /// [`TextEditor`]: crate::TextEditor
-pub fn text_editor<Message, Renderer>(
+pub fn text_editor<Message, Theme, Renderer>(
     content: &text_editor::Content<Renderer>,
-) -> TextEditor<'_, core::text::highlighter::PlainText, Message, Renderer>
+) -> TextEditor<'_, core::text::highlighter::PlainText, Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: text_editor::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: text_editor::StyleSheet,
 {
     TextEditor::new(content)
 }
@@ -231,16 +232,15 @@ where
 /// Creates a new [`Slider`].
 ///
 /// [`Slider`]: crate::Slider
-pub fn slider<'a, T, Message, Renderer>(
+pub fn slider<'a, T, Message, Theme>(
     range: std::ops::RangeInclusive<T>,
     value: T,
     on_change: impl Fn(T) -> Message + 'a,
-) -> Slider<'a, T, Message, Renderer>
+) -> Slider<'a, T, Message, Theme>
 where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
-    Renderer: core::Renderer,
-    Renderer::Theme: slider::StyleSheet,
+    Theme: slider::StyleSheet,
 {
     Slider::new(range, value, on_change)
 }
@@ -248,16 +248,15 @@ where
 /// Creates a new [`VerticalSlider`].
 ///
 /// [`VerticalSlider`]: crate::VerticalSlider
-pub fn vertical_slider<'a, T, Message, Renderer>(
+pub fn vertical_slider<'a, T, Message, Theme>(
     range: std::ops::RangeInclusive<T>,
     value: T,
     on_change: impl Fn(T) -> Message + 'a,
-) -> VerticalSlider<'a, T, Message, Renderer>
+) -> VerticalSlider<'a, T, Message, Theme>
 where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
-    Renderer: core::Renderer,
-    Renderer::Theme: slider::StyleSheet,
+    Theme: slider::StyleSheet,
 {
     VerticalSlider::new(range, value, on_change)
 }
@@ -265,21 +264,21 @@ where
 /// Creates a new [`PickList`].
 ///
 /// [`PickList`]: crate::PickList
-pub fn pick_list<'a, Message, Renderer, T>(
+pub fn pick_list<'a, Message, Theme, Renderer, T>(
     options: impl Into<Cow<'a, [T]>>,
     selected: Option<T>,
     on_selected: impl Fn(T) -> Message + 'a,
-) -> PickList<'a, T, Message, Renderer>
+) -> PickList<'a, T, Message, Theme, Renderer>
 where
     T: ToString + PartialEq + 'static,
     [T]: ToOwned<Owned = Vec<T>>,
     Renderer: core::text::Renderer,
-    Renderer::Theme: pick_list::StyleSheet
+    Theme: pick_list::StyleSheet
         + scrollable::StyleSheet
         + overlay::menu::StyleSheet
         + container::StyleSheet,
-    <Renderer::Theme as overlay::menu::StyleSheet>::Style:
-        From<<Renderer::Theme as pick_list::StyleSheet>::Style>,
+    <Theme as overlay::menu::StyleSheet>::Style:
+        From<<Theme as pick_list::StyleSheet>::Style>,
 {
     PickList::new(options, selected, on_selected)
 }
@@ -287,16 +286,16 @@ where
 /// Creates a new [`ComboBox`].
 ///
 /// [`ComboBox`]: crate::ComboBox
-pub fn combo_box<'a, T, Message, Renderer>(
+pub fn combo_box<'a, T, Message, Theme, Renderer>(
     state: &'a combo_box::State<T>,
     placeholder: &str,
     selection: Option<&T>,
     on_selected: impl Fn(T) -> Message + 'static,
-) -> ComboBox<'a, T, Message, Renderer>
+) -> ComboBox<'a, T, Message, Theme, Renderer>
 where
     T: std::fmt::Display + Clone,
+    Theme: text_input::StyleSheet + overlay::menu::StyleSheet,
     Renderer: core::text::Renderer,
-    Renderer::Theme: text_input::StyleSheet + overlay::menu::StyleSheet,
 {
     ComboBox::new(state, placeholder, selection, on_selected)
 }
@@ -318,10 +317,9 @@ pub fn vertical_space(height: impl Into<Length>) -> Space {
 /// Creates a horizontal [`Rule`] with the given height.
 ///
 /// [`Rule`]: crate::Rule
-pub fn horizontal_rule<Renderer>(height: impl Into<Pixels>) -> Rule<Renderer>
+pub fn horizontal_rule<Theme>(height: impl Into<Pixels>) -> Rule<Theme>
 where
-    Renderer: core::Renderer,
-    Renderer::Theme: rule::StyleSheet,
+    Theme: rule::StyleSheet,
 {
     Rule::horizontal(height)
 }
@@ -329,10 +327,9 @@ where
 /// Creates a vertical [`Rule`] with the given width.
 ///
 /// [`Rule`]: crate::Rule
-pub fn vertical_rule<Renderer>(width: impl Into<Pixels>) -> Rule<Renderer>
+pub fn vertical_rule<Theme>(width: impl Into<Pixels>) -> Rule<Theme>
 where
-    Renderer: core::Renderer,
-    Renderer::Theme: rule::StyleSheet,
+    Theme: rule::StyleSheet,
 {
     Rule::vertical(width)
 }
@@ -344,13 +341,12 @@ where
 ///   * the current value of the [`ProgressBar`].
 ///
 /// [`ProgressBar`]: crate::ProgressBar
-pub fn progress_bar<Renderer>(
+pub fn progress_bar<Theme>(
     range: RangeInclusive<f32>,
     value: f32,
-) -> ProgressBar<Renderer>
+) -> ProgressBar<Theme>
 where
-    Renderer: core::Renderer,
-    Renderer::Theme: progress_bar::StyleSheet,
+    Theme: progress_bar::StyleSheet,
 {
     ProgressBar::new(range, value)
 }
@@ -368,12 +364,9 @@ pub fn image<Handle>(handle: impl Into<Handle>) -> crate::Image<Handle> {
 /// [`Svg`]: crate::Svg
 /// [`Handle`]: crate::svg::Handle
 #[cfg(feature = "svg")]
-pub fn svg<Renderer>(
-    handle: impl Into<core::svg::Handle>,
-) -> crate::Svg<Renderer>
+pub fn svg<Theme>(handle: impl Into<core::svg::Handle>) -> crate::Svg<Theme>
 where
-    Renderer: core::svg::Renderer,
-    Renderer::Theme: crate::svg::StyleSheet,
+    Theme: crate::svg::StyleSheet,
 {
     crate::Svg::new(handle)
 }
@@ -382,12 +375,12 @@ where
 ///
 /// [`Canvas`]: crate::Canvas
 #[cfg(feature = "canvas")]
-pub fn canvas<P, Message, Renderer>(
+pub fn canvas<P, Message, Theme, Renderer>(
     program: P,
-) -> crate::Canvas<P, Message, Renderer>
+) -> crate::Canvas<P, Message, Theme, Renderer>
 where
     Renderer: crate::graphics::geometry::Renderer,
-    P: crate::canvas::Program<Message, Renderer>,
+    P: crate::canvas::Program<Message, Theme, Renderer>,
 {
     crate::Canvas::new(program)
 }
@@ -420,9 +413,9 @@ where
 }
 
 /// A container intercepting mouse events.
-pub fn mouse_area<'a, Message, Renderer>(
-    widget: impl Into<Element<'a, Message, Renderer>>,
-) -> MouseArea<'a, Message, Renderer>
+pub fn mouse_area<'a, Message, Theme, Renderer>(
+    widget: impl Into<Element<'a, Message, Theme, Renderer>>,
+) -> MouseArea<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
diff --git a/widget/src/image.rs b/widget/src/image.rs
index e906ac13..ccf1f175 100644
--- a/widget/src/image.rs
+++ b/widget/src/image.rs
@@ -159,7 +159,8 @@ pub fn draw<Renderer, Handle>(
     }
 }
 
-impl<Message, Renderer, Handle> Widget<Message, Renderer> for Image<Handle>
+impl<Message, Theme, Renderer, Handle> Widget<Message, Theme, Renderer>
+    for Image<Handle>
 where
     Renderer: image::Renderer<Handle = Handle>,
     Handle: Clone + Hash,
@@ -191,7 +192,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        _theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor: mouse::Cursor,
@@ -207,13 +208,13 @@ where
     }
 }
 
-impl<'a, Message, Renderer, Handle> From<Image<Handle>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer, Handle> From<Image<Handle>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Renderer: image::Renderer<Handle = Handle>,
     Handle: Clone + Hash + 'a,
 {
-    fn from(image: Image<Handle>) -> Element<'a, Message, Renderer> {
+    fn from(image: Image<Handle>) -> Element<'a, Message, Theme, Renderer> {
         Element::new(image)
     }
 }
diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs
index 98080577..9666ff9f 100644
--- a/widget/src/image/viewer.rs
+++ b/widget/src/image/viewer.rs
@@ -84,7 +84,8 @@ impl<Handle> Viewer<Handle> {
     }
 }
 
-impl<Message, Renderer, Handle> Widget<Message, Renderer> for Viewer<Handle>
+impl<Message, Theme, Renderer, Handle> Widget<Message, Theme, Renderer>
+    for Viewer<Handle>
 where
     Renderer: image::Renderer<Handle = Handle>,
     Handle: Clone + Hash,
@@ -305,7 +306,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        _theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor: mouse::Cursor,
@@ -390,14 +391,14 @@ impl State {
     }
 }
 
-impl<'a, Message, Renderer, Handle> From<Viewer<Handle>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer, Handle> From<Viewer<Handle>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Renderer: 'a + image::Renderer<Handle = Handle>,
     Message: 'a,
     Handle: Clone + Hash + 'a,
 {
-    fn from(viewer: Viewer<Handle>) -> Element<'a, Message, Renderer> {
+    fn from(viewer: Viewer<Handle>) -> Element<'a, Message, Theme, Renderer> {
         Element::new(viewer)
     }
 }
diff --git a/widget/src/keyed/column.rs b/widget/src/keyed/column.rs
index 7f05a81e..6203d2c5 100644
--- a/widget/src/keyed/column.rs
+++ b/widget/src/keyed/column.rs
@@ -13,8 +13,13 @@ use crate::core::{
 
 /// A container that distributes its contents vertically.
 #[allow(missing_debug_implementations)]
-pub struct Column<'a, Key, Message, Renderer = crate::Renderer>
-where
+pub struct Column<
+    'a,
+    Key,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
     Key: Copy + PartialEq,
 {
     spacing: f32,
@@ -24,10 +29,11 @@ where
     max_width: f32,
     align_items: Alignment,
     keys: Vec<Key>,
-    children: Vec<Element<'a, Message, Renderer>>,
+    children: Vec<Element<'a, Message, Theme, Renderer>>,
 }
 
-impl<'a, Key, Message, Renderer> Column<'a, Key, Message, Renderer>
+impl<'a, Key, Message, Theme, Renderer>
+    Column<'a, Key, Message, Theme, Renderer>
 where
     Key: Copy + PartialEq,
     Renderer: crate::core::Renderer,
@@ -48,7 +54,9 @@ where
 
     /// Creates a [`Column`] with the given elements.
     pub fn with_children(
-        children: impl IntoIterator<Item = (Key, Element<'a, Message, Renderer>)>,
+        children: impl IntoIterator<
+            Item = (Key, Element<'a, Message, Theme, Renderer>),
+        >,
     ) -> Self {
         children
             .into_iter()
@@ -99,7 +107,7 @@ where
     pub fn push(
         mut self,
         key: Key,
-        child: impl Into<Element<'a, Message, Renderer>>,
+        child: impl Into<Element<'a, Message, Theme, Renderer>>,
     ) -> Self {
         let child = child.into();
         let size = child.as_widget().size_hint();
@@ -135,8 +143,8 @@ where
     keys: Vec<Key>,
 }
 
-impl<'a, Key, Message, Renderer> Widget<Message, Renderer>
-    for Column<'a, Key, Message, Renderer>
+impl<'a, Key, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Column<'a, Key, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
     Key: Copy + PartialEq + 'static,
@@ -285,7 +293,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -308,19 +316,21 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         overlay::from_children(&mut self.children, tree, layout, renderer)
     }
 }
 
-impl<'a, Key, Message, Renderer> From<Column<'a, Key, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Key, Message, Theme, Renderer>
+    From<Column<'a, Key, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Key: Copy + PartialEq + 'static,
     Message: 'a,
+    Theme: 'a,
     Renderer: crate::core::Renderer + 'a,
 {
-    fn from(column: Column<'a, Key, Message, Renderer>) -> Self {
+    fn from(column: Column<'a, Key, Message, Theme, Renderer>) -> Self {
         Self::new(column)
     }
 }
diff --git a/widget/src/lazy.rs b/widget/src/lazy.rs
index e9edbb4c..dda6162b 100644
--- a/widget/src/lazy.rs
+++ b/widget/src/lazy.rs
@@ -29,19 +29,19 @@ use std::rc::Rc;
 
 /// A widget that only rebuilds its contents when necessary.
 #[allow(missing_debug_implementations)]
-pub struct Lazy<'a, Message, Renderer, Dependency, View> {
+pub struct Lazy<'a, Message, Theme, Renderer, Dependency, View> {
     dependency: Dependency,
     view: Box<dyn Fn(&Dependency) -> View + 'a>,
     element: RefCell<
-        Option<Rc<RefCell<Option<Element<'static, Message, Renderer>>>>>,
+        Option<Rc<RefCell<Option<Element<'static, Message, Theme, Renderer>>>>>,
     >,
 }
 
-impl<'a, Message, Renderer, Dependency, View>
-    Lazy<'a, Message, Renderer, Dependency, View>
+impl<'a, Message, Theme, Renderer, Dependency, View>
+    Lazy<'a, Message, Theme, Renderer, Dependency, View>
 where
     Dependency: Hash + 'a,
-    View: Into<Element<'static, Message, Renderer>>,
+    View: Into<Element<'static, Message, Theme, Renderer>>,
 {
     /// Creates a new [`Lazy`] widget with the given data `Dependency` and a
     /// closure that can turn this data into a widget tree.
@@ -58,7 +58,7 @@ where
 
     fn with_element<T>(
         &self,
-        f: impl FnOnce(&Element<'_, Message, Renderer>) -> T,
+        f: impl FnOnce(&Element<'_, Message, Theme, Renderer>) -> T,
     ) -> T {
         f(self
             .element
@@ -72,7 +72,7 @@ where
 
     fn with_element_mut<T>(
         &self,
-        f: impl FnOnce(&mut Element<'_, Message, Renderer>) -> T,
+        f: impl FnOnce(&mut Element<'_, Message, Theme, Renderer>) -> T,
     ) -> T {
         f(self
             .element
@@ -85,17 +85,19 @@ where
     }
 }
 
-struct Internal<Message, Renderer> {
-    element: Rc<RefCell<Option<Element<'static, Message, Renderer>>>>,
+struct Internal<Message, Theme, Renderer> {
+    element: Rc<RefCell<Option<Element<'static, Message, Theme, Renderer>>>>,
     hash: u64,
 }
 
-impl<'a, Message, Renderer, Dependency, View> Widget<Message, Renderer>
-    for Lazy<'a, Message, Renderer, Dependency, View>
+impl<'a, Message, Theme, Renderer, Dependency, View>
+    Widget<Message, Theme, Renderer>
+    for Lazy<'a, Message, Theme, Renderer, Dependency, View>
 where
-    View: Into<Element<'static, Message, Renderer>> + 'static,
+    View: Into<Element<'static, Message, Theme, Renderer>> + 'static,
     Dependency: Hash + 'a,
     Message: 'static,
+    Theme: 'static,
     Renderer: core::Renderer + 'static,
 {
     fn tag(&self) -> tree::Tag {
@@ -121,7 +123,9 @@ where
     }
 
     fn diff(&self, tree: &mut Tree) {
-        let current = tree.state.downcast_mut::<Internal<Message, Renderer>>();
+        let current = tree
+            .state
+            .downcast_mut::<Internal<Message, Theme, Renderer>>();
 
         let mut hasher = Hasher::default();
         self.dependency.hash(&mut hasher);
@@ -231,7 +235,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -255,7 +259,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'_, Message, Renderer>> {
+    ) -> Option<overlay::Element<'_, Message, Theme, Renderer>> {
         let overlay = Overlay(Some(
             InnerBuilder {
                 cell: self.element.borrow().as_ref().unwrap().clone(),
@@ -287,29 +291,33 @@ where
 }
 
 #[self_referencing]
-struct Inner<'a, Message: 'a, Renderer: 'a> {
-    cell: Rc<RefCell<Option<Element<'static, Message, Renderer>>>>,
-    element: Element<'static, Message, Renderer>,
+struct Inner<'a, Message: 'a, Theme: 'a, Renderer: 'a> {
+    cell: Rc<RefCell<Option<Element<'static, Message, Theme, Renderer>>>>,
+    element: Element<'static, Message, Theme, Renderer>,
     tree: &'a mut Tree,
 
     #[borrows(mut element, mut tree)]
     #[not_covariant]
-    overlay: Option<RefCell<Nested<'this, Message, Renderer>>>,
+    overlay: Option<RefCell<Nested<'this, Message, Theme, Renderer>>>,
 }
 
-struct Overlay<'a, Message, Renderer>(Option<Inner<'a, Message, Renderer>>);
+struct Overlay<'a, Message, Theme, Renderer>(
+    Option<Inner<'a, Message, Theme, Renderer>>,
+);
 
-impl<'a, Message, Renderer> Drop for Overlay<'a, Message, Renderer> {
+impl<'a, Message, Theme, Renderer> Drop
+    for Overlay<'a, Message, Theme, Renderer>
+{
     fn drop(&mut self) {
         let heads = self.0.take().unwrap().into_heads();
         (*heads.cell.borrow_mut()) = Some(heads.element);
     }
 }
 
-impl<'a, Message, Renderer> Overlay<'a, Message, Renderer> {
+impl<'a, Message, Theme, Renderer> Overlay<'a, Message, Theme, Renderer> {
     fn with_overlay_maybe<T>(
         &self,
-        f: impl FnOnce(&mut Nested<'_, Message, Renderer>) -> T,
+        f: impl FnOnce(&mut Nested<'_, Message, Theme, Renderer>) -> T,
     ) -> Option<T> {
         self.0.as_ref().unwrap().with_overlay(|overlay| {
             overlay.as_ref().map(|nested| (f)(&mut nested.borrow_mut()))
@@ -318,7 +326,7 @@ impl<'a, Message, Renderer> Overlay<'a, Message, Renderer> {
 
     fn with_overlay_mut_maybe<T>(
         &mut self,
-        f: impl FnOnce(&mut Nested<'_, Message, Renderer>) -> T,
+        f: impl FnOnce(&mut Nested<'_, Message, Theme, Renderer>) -> T,
     ) -> Option<T> {
         self.0.as_mut().unwrap().with_overlay_mut(|overlay| {
             overlay.as_mut().map(|nested| (f)(nested.get_mut()))
@@ -326,8 +334,8 @@ impl<'a, Message, Renderer> Overlay<'a, Message, Renderer> {
     }
 }
 
-impl<'a, Message, Renderer> overlay::Overlay<Message, Renderer>
-    for Overlay<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> overlay::Overlay<Message, Theme, Renderer>
+    for Overlay<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -347,7 +355,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -398,16 +406,19 @@ where
     }
 }
 
-impl<'a, Message, Renderer, Dependency, View>
-    From<Lazy<'a, Message, Renderer, Dependency, View>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer, Dependency, View>
+    From<Lazy<'a, Message, Theme, Renderer, Dependency, View>>
+    for Element<'a, Message, Theme, Renderer>
 where
-    View: Into<Element<'static, Message, Renderer>> + 'static,
+    View: Into<Element<'static, Message, Theme, Renderer>> + 'static,
     Renderer: core::Renderer + 'static,
     Message: 'static,
+    Theme: 'static,
     Dependency: Hash + 'a,
 {
-    fn from(lazy: Lazy<'a, Message, Renderer, Dependency, View>) -> Self {
+    fn from(
+        lazy: Lazy<'a, Message, Theme, Renderer, Dependency, View>,
+    ) -> Self {
         Self::new(lazy)
     }
 }
diff --git a/widget/src/lazy/cache.rs b/widget/src/lazy/cache.rs
index e7b87614..f922fd19 100644
--- a/widget/src/lazy/cache.rs
+++ b/widget/src/lazy/cache.rs
@@ -4,10 +4,10 @@ use crate::core::Element;
 use ouroboros::self_referencing;
 
 #[self_referencing(pub_extras)]
-pub struct Cache<'a, Message: 'a, Renderer: 'a> {
-    pub element: Element<'a, Message, Renderer>,
+pub struct Cache<'a, Message: 'a, Theme: 'a, Renderer: 'a> {
+    pub element: Element<'a, Message, Theme, Renderer>,
 
     #[borrows(mut element)]
     #[covariant]
-    overlay: Option<overlay::Element<'this, Message, Renderer>>,
+    overlay: Option<overlay::Element<'this, Message, Theme, Renderer>>,
 }
diff --git a/widget/src/lazy/component.rs b/widget/src/lazy/component.rs
index 3684e0c9..30b1efed 100644
--- a/widget/src/lazy/component.rs
+++ b/widget/src/lazy/component.rs
@@ -30,7 +30,7 @@ use std::rc::Rc;
 ///
 /// Additionally, a [`Component`] is capable of producing a `Message` to notify
 /// the parent application of any relevant interactions.
-pub trait Component<Message, Renderer> {
+pub trait Component<Message, Theme = crate::Theme, Renderer = crate::Renderer> {
     /// The internal state of this [`Component`].
     type State: Default;
 
@@ -48,7 +48,10 @@ pub trait Component<Message, Renderer> {
 
     /// Produces the widgets of the [`Component`], which may trigger an [`Event`](Component::Event)
     /// on user interaction.
-    fn view(&self, state: &Self::State) -> Element<'_, Self::Event, Renderer>;
+    fn view(
+        &self,
+        state: &Self::State,
+    ) -> Element<'_, Self::Event, Theme, Renderer>;
 
     /// Update the [`Component`] state based on the provided [`Operation`](widget::Operation)
     ///
@@ -65,13 +68,14 @@ struct Tag<T>(T);
 
 /// Turns an implementor of [`Component`] into an [`Element`] that can be
 /// embedded in any application.
-pub fn view<'a, C, Message, Renderer>(
+pub fn view<'a, C, Message, Theme, Renderer>(
     component: C,
-) -> Element<'a, Message, Renderer>
+) -> Element<'a, Message, Theme, Renderer>
 where
-    C: Component<Message, Renderer> + 'a,
+    C: Component<Message, Theme, Renderer> + 'a,
     C::State: 'static,
     Message: 'a,
+    Theme: 'a,
     Renderer: core::Renderer + 'a,
 {
     Element::new(Instance {
@@ -88,24 +92,26 @@ where
     })
 }
 
-struct Instance<'a, Message, Renderer, Event, S> {
-    state: RefCell<Option<State<'a, Message, Renderer, Event, S>>>,
+struct Instance<'a, Message, Theme, Renderer, Event, S> {
+    state: RefCell<Option<State<'a, Message, Theme, Renderer, Event, S>>>,
     tree: RefCell<Rc<RefCell<Option<Tree>>>>,
 }
 
 #[self_referencing]
-struct State<'a, Message: 'a, Renderer: 'a, Event: 'a, S: 'a> {
-    component:
-        Box<dyn Component<Message, Renderer, Event = Event, State = S> + 'a>,
+struct State<'a, Message: 'a, Theme: 'a, Renderer: 'a, Event: 'a, S: 'a> {
+    component: Box<
+        dyn Component<Message, Theme, Renderer, Event = Event, State = S> + 'a,
+    >,
     message: PhantomData<Message>,
     state: PhantomData<S>,
 
     #[borrows(component)]
     #[covariant]
-    element: Option<Element<'this, Event, Renderer>>,
+    element: Option<Element<'this, Event, Theme, Renderer>>,
 }
 
-impl<'a, Message, Renderer, Event, S> Instance<'a, Message, Renderer, Event, S>
+impl<'a, Message, Theme, Renderer, Event, S>
+    Instance<'a, Message, Theme, Renderer, Event, S>
 where
     S: Default + 'static,
     Renderer: renderer::Renderer,
@@ -196,14 +202,14 @@ where
 
     fn with_element<T>(
         &self,
-        f: impl FnOnce(&Element<'_, Event, Renderer>) -> T,
+        f: impl FnOnce(&Element<'_, Event, Theme, Renderer>) -> T,
     ) -> T {
         self.with_element_mut(|element| f(element))
     }
 
     fn with_element_mut<T>(
         &self,
-        f: impl FnOnce(&mut Element<'_, Event, Renderer>) -> T,
+        f: impl FnOnce(&mut Element<'_, Event, Theme, Renderer>) -> T,
     ) -> T {
         self.rebuild_element_if_necessary();
         self.state
@@ -214,8 +220,8 @@ where
     }
 }
 
-impl<'a, Message, Renderer, Event, S> Widget<Message, Renderer>
-    for Instance<'a, Message, Renderer, Event, S>
+impl<'a, Message, Theme, Renderer, Event, S> Widget<Message, Theme, Renderer>
+    for Instance<'a, Message, Theme, Renderer, Event, S>
 where
     S: 'static + Default,
     Renderer: core::Renderer,
@@ -411,7 +417,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -456,7 +462,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         self.rebuild_element_if_necessary();
         let tree = tree
             .state
@@ -506,12 +512,12 @@ where
     }
 }
 
-struct Overlay<'a, 'b, Message, Renderer, Event, S>(
-    Option<Inner<'a, 'b, Message, Renderer, Event, S>>,
+struct Overlay<'a, 'b, Message, Theme, Renderer, Event, S>(
+    Option<Inner<'a, 'b, Message, Theme, Renderer, Event, S>>,
 );
 
-impl<'a, 'b, Message, Renderer, Event, S> Drop
-    for Overlay<'a, 'b, Message, Renderer, Event, S>
+impl<'a, 'b, Message, Theme, Renderer, Event, S> Drop
+    for Overlay<'a, 'b, Message, Theme, Renderer, Event, S>
 {
     fn drop(&mut self) {
         if let Some(heads) = self.0.take().map(Inner::into_heads) {
@@ -521,26 +527,26 @@ impl<'a, 'b, Message, Renderer, Event, S> Drop
 }
 
 #[self_referencing]
-struct Inner<'a, 'b, Message, Renderer, Event, S> {
-    instance: &'a mut Instance<'b, Message, Renderer, Event, S>,
+struct Inner<'a, 'b, Message, Theme, Renderer, Event, S> {
+    instance: &'a mut Instance<'b, Message, Theme, Renderer, Event, S>,
     tree: Tree,
     types: PhantomData<(Message, Event, S)>,
 
     #[borrows(mut instance, mut tree)]
     #[not_covariant]
-    overlay: Option<RefCell<Nested<'this, Event, Renderer>>>,
+    overlay: Option<RefCell<Nested<'this, Event, Theme, Renderer>>>,
 }
 
-struct OverlayInstance<'a, 'b, Message, Renderer, Event, S> {
-    overlay: Option<Overlay<'a, 'b, Message, Renderer, Event, S>>,
+struct OverlayInstance<'a, 'b, Message, Theme, Renderer, Event, S> {
+    overlay: Option<Overlay<'a, 'b, Message, Theme, Renderer, Event, S>>,
 }
 
-impl<'a, 'b, Message, Renderer, Event, S>
-    OverlayInstance<'a, 'b, Message, Renderer, Event, S>
+impl<'a, 'b, Message, Theme, Renderer, Event, S>
+    OverlayInstance<'a, 'b, Message, Theme, Renderer, Event, S>
 {
     fn with_overlay_maybe<T>(
         &self,
-        f: impl FnOnce(&mut Nested<'_, Event, Renderer>) -> T,
+        f: impl FnOnce(&mut Nested<'_, Event, Theme, Renderer>) -> T,
     ) -> Option<T> {
         self.overlay
             .as_ref()
@@ -555,7 +561,7 @@ impl<'a, 'b, Message, Renderer, Event, S>
 
     fn with_overlay_mut_maybe<T>(
         &mut self,
-        f: impl FnOnce(&mut Nested<'_, Event, Renderer>) -> T,
+        f: impl FnOnce(&mut Nested<'_, Event, Theme, Renderer>) -> T,
     ) -> Option<T> {
         self.overlay
             .as_mut()
@@ -569,8 +575,9 @@ impl<'a, 'b, Message, Renderer, Event, S>
     }
 }
 
-impl<'a, 'b, Message, Renderer, Event, S> overlay::Overlay<Message, Renderer>
-    for OverlayInstance<'a, 'b, Message, Renderer, Event, S>
+impl<'a, 'b, Message, Theme, Renderer, Event, S>
+    overlay::Overlay<Message, Theme, Renderer>
+    for OverlayInstance<'a, 'b, Message, Theme, Renderer, Event, S>
 where
     Renderer: core::Renderer,
     S: 'static + Default,
@@ -591,7 +598,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
diff --git a/widget/src/lazy/helpers.rs b/widget/src/lazy/helpers.rs
index 5dc60d52..4d0776ca 100644
--- a/widget/src/lazy/helpers.rs
+++ b/widget/src/lazy/helpers.rs
@@ -7,13 +7,13 @@ use std::hash::Hash;
 /// Creates a new [`Lazy`] widget with the given data `Dependency` and a
 /// closure that can turn this data into a widget tree.
 #[cfg(feature = "lazy")]
-pub fn lazy<'a, Message, Renderer, Dependency, View>(
+pub fn lazy<'a, Message, Theme, Renderer, Dependency, View>(
     dependency: Dependency,
     view: impl Fn(&Dependency) -> View + 'a,
-) -> Lazy<'a, Message, Renderer, Dependency, View>
+) -> Lazy<'a, Message, Theme, Renderer, Dependency, View>
 where
     Dependency: Hash + 'a,
-    View: Into<Element<'static, Message, Renderer>>,
+    View: Into<Element<'static, Message, Theme, Renderer>>,
 {
     Lazy::new(dependency, view)
 }
@@ -21,13 +21,14 @@ where
 /// Turns an implementor of [`Component`] into an [`Element`] that can be
 /// embedded in any application.
 #[cfg(feature = "lazy")]
-pub fn component<'a, C, Message, Renderer>(
+pub fn component<'a, C, Message, Theme, Renderer>(
     component: C,
-) -> Element<'a, Message, Renderer>
+) -> Element<'a, Message, Theme, Renderer>
 where
-    C: Component<Message, Renderer> + 'a,
+    C: Component<Message, Theme, Renderer> + 'a,
     C::State: 'static,
     Message: 'a,
+    Theme: 'a,
     Renderer: core::Renderer + 'a,
 {
     component::view(component)
@@ -40,9 +41,9 @@ where
 /// the [`Responsive`] widget and, therefore, can be used to build the
 /// contents of the widget in a responsive way.
 #[cfg(feature = "lazy")]
-pub fn responsive<'a, Message, Renderer>(
-    f: impl Fn(Size) -> Element<'a, Message, Renderer> + 'a,
-) -> Responsive<'a, Message, Renderer>
+pub fn responsive<'a, Message, Theme, Renderer>(
+    f: impl Fn(Size) -> Element<'a, Message, Theme, Renderer> + 'a,
+) -> Responsive<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
diff --git a/widget/src/lazy/responsive.rs b/widget/src/lazy/responsive.rs
index 1df0866f..9875b24e 100644
--- a/widget/src/lazy/responsive.rs
+++ b/widget/src/lazy/responsive.rs
@@ -22,12 +22,17 @@ use std::ops::Deref;
 /// A [`Responsive`] widget will always try to fill all the available space of
 /// its parent.
 #[allow(missing_debug_implementations)]
-pub struct Responsive<'a, Message, Renderer = crate::Renderer> {
-    view: Box<dyn Fn(Size) -> Element<'a, Message, Renderer> + 'a>,
-    content: RefCell<Content<'a, Message, Renderer>>,
+pub struct Responsive<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> {
+    view: Box<dyn Fn(Size) -> Element<'a, Message, Theme, Renderer> + 'a>,
+    content: RefCell<Content<'a, Message, Theme, Renderer>>,
 }
 
-impl<'a, Message, Renderer> Responsive<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Responsive<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -38,7 +43,7 @@ where
     /// the [`Responsive`] widget and, therefore, can be used to build the
     /// contents of the widget in a responsive way.
     pub fn new(
-        view: impl Fn(Size) -> Element<'a, Message, Renderer> + 'a,
+        view: impl Fn(Size) -> Element<'a, Message, Theme, Renderer> + 'a,
     ) -> Self {
         Self {
             view: Box::new(view),
@@ -51,13 +56,13 @@ where
     }
 }
 
-struct Content<'a, Message, Renderer> {
+struct Content<'a, Message, Theme, Renderer> {
     size: Size,
     layout: Option<layout::Node>,
-    element: Element<'a, Message, Renderer>,
+    element: Element<'a, Message, Theme, Renderer>,
 }
 
-impl<'a, Message, Renderer> Content<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -75,7 +80,7 @@ where
         &mut self,
         tree: &mut Tree,
         new_size: Size,
-        view: &dyn Fn(Size) -> Element<'a, Message, Renderer>,
+        view: &dyn Fn(Size) -> Element<'a, Message, Theme, Renderer>,
     ) {
         if self.size == new_size {
             return;
@@ -93,12 +98,12 @@ where
         tree: &mut Tree,
         renderer: R,
         layout: Layout<'_>,
-        view: &dyn Fn(Size) -> Element<'a, Message, Renderer>,
+        view: &dyn Fn(Size) -> Element<'a, Message, Theme, Renderer>,
         f: impl FnOnce(
             &mut Tree,
             R,
             Layout<'_>,
-            &mut Element<'a, Message, Renderer>,
+            &mut Element<'a, Message, Theme, Renderer>,
         ) -> T,
     ) -> T
     where
@@ -120,8 +125,8 @@ struct State {
     tree: RefCell<Tree>,
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Responsive<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Responsive<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -223,7 +228,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -274,7 +279,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         use std::ops::DerefMut;
 
         let state = tree.state.downcast_ref::<State>();
@@ -283,7 +288,10 @@ where
             content: self.content.borrow_mut(),
             tree: state.tree.borrow_mut(),
             types: PhantomData,
-            overlay_builder: |content: &mut RefMut<'_, Content<'_, _, _>>,
+            overlay_builder: |content: &mut RefMut<
+                '_,
+                Content<'_, _, _, _>,
+            >,
                               tree| {
                 content.update(tree, layout.bounds().size(), &self.view);
                 content.layout(tree, renderer);
@@ -315,32 +323,36 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Responsive<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer>
+    From<Responsive<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
-    Renderer: core::Renderer + 'a,
     Message: 'a,
+    Theme: 'a,
+    Renderer: core::Renderer + 'a,
 {
-    fn from(responsive: Responsive<'a, Message, Renderer>) -> Self {
+    fn from(responsive: Responsive<'a, Message, Theme, Renderer>) -> Self {
         Self::new(responsive)
     }
 }
 
 #[self_referencing]
-struct Overlay<'a, 'b, Message, Renderer> {
-    content: RefMut<'a, Content<'b, Message, Renderer>>,
+struct Overlay<'a, 'b, Message, Theme, Renderer> {
+    content: RefMut<'a, Content<'b, Message, Theme, Renderer>>,
     tree: RefMut<'a, Tree>,
     types: PhantomData<Message>,
 
     #[borrows(mut content, mut tree)]
     #[not_covariant]
-    overlay: Option<RefCell<Nested<'this, Message, Renderer>>>,
+    overlay: Option<RefCell<Nested<'this, Message, Theme, Renderer>>>,
 }
 
-impl<'a, 'b, Message, Renderer> Overlay<'a, 'b, Message, Renderer> {
+impl<'a, 'b, Message, Theme, Renderer>
+    Overlay<'a, 'b, Message, Theme, Renderer>
+{
     fn with_overlay_maybe<T>(
         &self,
-        f: impl FnOnce(&mut Nested<'_, Message, Renderer>) -> T,
+        f: impl FnOnce(&mut Nested<'_, Message, Theme, Renderer>) -> T,
     ) -> Option<T> {
         self.with_overlay(|overlay| {
             overlay.as_ref().map(|nested| (f)(&mut nested.borrow_mut()))
@@ -349,7 +361,7 @@ impl<'a, 'b, Message, Renderer> Overlay<'a, 'b, Message, Renderer> {
 
     fn with_overlay_mut_maybe<T>(
         &mut self,
-        f: impl FnOnce(&mut Nested<'_, Message, Renderer>) -> T,
+        f: impl FnOnce(&mut Nested<'_, Message, Theme, Renderer>) -> T,
     ) -> Option<T> {
         self.with_overlay_mut(|overlay| {
             overlay.as_mut().map(|nested| (f)(nested.get_mut()))
@@ -357,8 +369,9 @@ impl<'a, 'b, Message, Renderer> Overlay<'a, 'b, Message, Renderer> {
     }
 }
 
-impl<'a, 'b, Message, Renderer> overlay::Overlay<Message, Renderer>
-    for Overlay<'a, 'b, Message, Renderer>
+impl<'a, 'b, Message, Theme, Renderer>
+    overlay::Overlay<Message, Theme, Renderer>
+    for Overlay<'a, 'b, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
 {
@@ -378,7 +391,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
diff --git a/widget/src/lib.rs b/widget/src/lib.rs
index 07378d83..def1bde3 100644
--- a/widget/src/lib.rs
+++ b/widget/src/lib.rs
@@ -132,4 +132,5 @@ pub mod qr_code;
 #[doc(no_inline)]
 pub use qr_code::QRCode;
 
-type Renderer<Theme = style::Theme> = renderer::Renderer<Theme>;
+pub use crate::style::theme::{self, Theme};
+pub use renderer::Renderer;
diff --git a/widget/src/mouse_area.rs b/widget/src/mouse_area.rs
index 87cac3a7..62bb45d8 100644
--- a/widget/src/mouse_area.rs
+++ b/widget/src/mouse_area.rs
@@ -13,8 +13,13 @@ use crate::core::{
 
 /// Emit messages on mouse events.
 #[allow(missing_debug_implementations)]
-pub struct MouseArea<'a, Message, Renderer> {
-    content: Element<'a, Message, Renderer>,
+pub struct MouseArea<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> {
+    content: Element<'a, Message, Theme, Renderer>,
     on_press: Option<Message>,
     on_release: Option<Message>,
     on_right_press: Option<Message>,
@@ -23,7 +28,7 @@ pub struct MouseArea<'a, Message, Renderer> {
     on_middle_release: Option<Message>,
 }
 
-impl<'a, Message, Renderer> MouseArea<'a, Message, Renderer> {
+impl<'a, Message, Theme, Renderer> MouseArea<'a, Message, Theme, Renderer> {
     /// The message to emit on a left button press.
     #[must_use]
     pub fn on_press(mut self, message: Message) -> Self {
@@ -73,9 +78,11 @@ struct State {
     // TODO: Support on_mouse_enter and on_mouse_exit
 }
 
-impl<'a, Message, Renderer> MouseArea<'a, Message, Renderer> {
+impl<'a, Message, Theme, Renderer> MouseArea<'a, Message, Theme, Renderer> {
     /// Creates a [`MouseArea`] with the given content.
-    pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
+    pub fn new(
+        content: impl Into<Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
         MouseArea {
             content: content.into(),
             on_press: None,
@@ -88,8 +95,8 @@ impl<'a, Message, Renderer> MouseArea<'a, Message, Renderer> {
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for MouseArea<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for MouseArea<'a, Message, Theme, Renderer>
 where
     Renderer: renderer::Renderer,
     Message: Clone,
@@ -188,7 +195,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -210,7 +217,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         self.content.as_widget_mut().overlay(
             &mut tree.children[0],
             layout,
@@ -219,23 +226,24 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<MouseArea<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<MouseArea<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a + Clone,
+    Theme: 'a,
     Renderer: 'a + renderer::Renderer,
 {
     fn from(
-        area: MouseArea<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        area: MouseArea<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(area)
     }
 }
 
 /// Processes the given [`Event`] and updates the [`State`] of an [`MouseArea`]
 /// accordingly.
-fn update<Message: Clone, Renderer>(
-    widget: &mut MouseArea<'_, Message, Renderer>,
+fn update<Message: Clone, Theme, Renderer>(
+    widget: &mut MouseArea<'_, Message, Theme, Renderer>,
     event: &Event,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
diff --git a/widget/src/overlay/menu.rs b/widget/src/overlay/menu.rs
index 678bb7b5..a7b7ec94 100644
--- a/widget/src/overlay/menu.rs
+++ b/widget/src/overlay/menu.rs
@@ -19,10 +19,15 @@ pub use iced_style::menu::{Appearance, StyleSheet};
 
 /// A list of selectable options.
 #[allow(missing_debug_implementations)]
-pub struct Menu<'a, T, Message, Renderer = crate::Renderer>
-where
+pub struct Menu<
+    'a,
+    T,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     state: &'a mut State,
     options: &'a [T],
@@ -35,16 +40,15 @@ where
     text_line_height: text::LineHeight,
     text_shaping: text::Shaping,
     font: Option<Renderer::Font>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, T, Message, Renderer> Menu<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> Menu<'a, T, Message, Theme, Renderer>
 where
     T: ToString + Clone,
     Message: 'a,
+    Theme: StyleSheet + container::StyleSheet + scrollable::StyleSheet + 'a,
     Renderer: text::Renderer + 'a,
-    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.
@@ -113,7 +117,7 @@ where
     /// Sets the style of the [`Menu`].
     pub fn style(
         mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+        style: impl Into<<Theme as StyleSheet>::Style>,
     ) -> Self {
         self.style = style.into();
         self
@@ -129,7 +133,7 @@ where
         self,
         position: Point,
         target_height: f32,
-    ) -> overlay::Element<'a, Message, Renderer> {
+    ) -> overlay::Element<'a, Message, Theme, Renderer> {
         overlay::Element::new(
             position,
             Box::new(Overlay::new(self, target_height)),
@@ -158,28 +162,26 @@ impl Default for State {
     }
 }
 
-struct Overlay<'a, Message, Renderer>
+struct Overlay<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet + container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     state: &'a mut Tree,
-    container: Container<'a, Message, Renderer>,
+    container: Container<'a, Message, Theme, Renderer>,
     width: f32,
     target_height: f32,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: <Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Overlay<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Renderer: 'a,
-    Renderer: text::Renderer,
-    Renderer::Theme:
-        StyleSheet + container::StyleSheet + scrollable::StyleSheet,
+    Theme: StyleSheet + container::StyleSheet + scrollable::StyleSheet + 'a,
+    Renderer: text::Renderer + 'a,
 {
     pub fn new<T>(
-        menu: Menu<'a, T, Message, Renderer>,
+        menu: Menu<'a, T, Message, Theme, Renderer>,
         target_height: f32,
     ) -> Self
     where
@@ -213,7 +215,7 @@ where
             style: style.clone(),
         }));
 
-        state.tree.diff(&container as &dyn Widget<_, _>);
+        state.tree.diff(&container as &dyn Widget<_, _, _>);
 
         Self {
             state: &mut state.tree,
@@ -225,11 +227,12 @@ where
     }
 }
 
-impl<'a, Message, Renderer> crate::core::Overlay<Message, Renderer>
-    for Overlay<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer>
+    crate::core::Overlay<Message, Theme, Renderer>
+    for Overlay<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet + container::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn layout(
         &mut self,
@@ -295,12 +298,12 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
     ) {
-        let appearance = theme.appearance(&self.style);
+        let appearance = StyleSheet::appearance(theme, &self.style);
         let bounds = layout.bounds();
 
         renderer.fill_quad(
@@ -317,10 +320,10 @@ where
     }
 }
 
-struct List<'a, T, Message, Renderer>
+struct List<'a, T, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
@@ -331,15 +334,15 @@ where
     text_line_height: text::LineHeight,
     text_shaping: text::Shaping,
     font: Option<Renderer::Font>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, T, Message, Renderer> Widget<Message, Renderer>
-    for List<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for List<'a, T, Message, Theme, Renderer>
 where
     T: Clone + ToString,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn size(&self) -> Size<Length> {
         Size {
@@ -475,7 +478,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor: mouse::Cursor,
@@ -545,15 +548,16 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<List<'a, T, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer>
+    From<List<'a, T, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     T: ToString + Clone,
     Message: 'a,
+    Theme: StyleSheet + 'a,
     Renderer: 'a + text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
-    fn from(list: List<'a, T, Message, Renderer>) -> Self {
+    fn from(list: List<'a, T, Message, Theme, Renderer>) -> Self {
         Element::new(list)
     }
 }
diff --git a/widget/src/pane_grid.rs b/widget/src/pane_grid.rs
index 3fda0e32..c20d959a 100644
--- a/widget/src/pane_grid.rs
+++ b/widget/src/pane_grid.rs
@@ -71,7 +71,7 @@ use crate::core::{
 /// # use iced_widget::{pane_grid, text};
 /// #
 /// # type PaneGrid<'a, Message> =
-/// #     iced_widget::PaneGrid<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::PaneGrid<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// enum PaneState {
 ///     SomePane,
@@ -96,25 +96,29 @@ use crate::core::{
 ///     .on_resize(10, Message::PaneResized);
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct PaneGrid<'a, Message, Renderer = crate::Renderer>
-where
+pub struct PaneGrid<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet + container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
-    contents: Contents<'a, Content<'a, Message, Renderer>>,
+    contents: Contents<'a, Content<'a, Message, Theme, Renderer>>,
     width: Length,
     height: Length,
     spacing: f32,
     on_click: Option<Box<dyn Fn(Pane) -> Message + 'a>>,
     on_drag: Option<Box<dyn Fn(DragEvent) -> Message + 'a>>,
     on_resize: Option<(f32, Box<dyn Fn(ResizeEvent) -> Message + 'a>)>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: <Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> PaneGrid<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet + container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
     ///
@@ -122,7 +126,7 @@ where
     /// [`State`]. [`bool`] is set if the pane is maximized.
     pub fn new<T>(
         state: &'a State<T>,
-        view: impl Fn(Pane, &'a T, bool) -> Content<'a, Message, Renderer>,
+        view: impl Fn(Pane, &'a T, bool) -> Content<'a, Message, Theme, Renderer>,
     ) -> Self {
         let contents = if let Some((pane, pane_state)) =
             state.maximized.and_then(|pane| {
@@ -216,7 +220,7 @@ where
     /// Sets the style of the [`PaneGrid`].
     pub fn style(
         mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+        style: impl Into<<Theme as StyleSheet>::Style>,
     ) -> Self {
         self.style = style.into();
         self
@@ -229,11 +233,11 @@ where
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for PaneGrid<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for PaneGrid<'a, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet + container::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<state::Action>()
@@ -408,7 +412,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -443,7 +447,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'_, Message, Renderer>> {
+    ) -> Option<overlay::Element<'_, Message, Theme, Renderer>> {
         let children = self
             .contents
             .iter_mut()
@@ -458,16 +462,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<PaneGrid<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet + container::StyleSheet + 'a,
+    Renderer: crate::core::Renderer + 'a,
 {
     fn from(
-        pane_grid: PaneGrid<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        pane_grid: PaneGrid<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(pane_grid)
     }
 }
@@ -811,18 +815,18 @@ pub fn mouse_interaction(
 }
 
 /// Draws a [`PaneGrid`].
-pub fn draw<Renderer, T>(
+pub fn draw<Theme, Renderer, T>(
     action: &state::Action,
     node: &Node,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
     renderer: &mut Renderer,
-    theme: &Renderer::Theme,
+    theme: &Theme,
     default_style: &renderer::Style,
     viewport: &Rectangle,
     spacing: f32,
     resize_leeway: Option<f32>,
-    style: &<Renderer::Theme as StyleSheet>::Style,
+    style: &Theme::Style,
     contents: impl Iterator<Item = (Pane, T)>,
     draw_pane: impl Fn(
         T,
@@ -833,8 +837,8 @@ pub fn draw<Renderer, T>(
         &Rectangle,
     ),
 ) where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     let picked_pane = action.picked_pane();
 
diff --git a/widget/src/pane_grid/content.rs b/widget/src/pane_grid/content.rs
index ee00f186..415dcc3e 100644
--- a/widget/src/pane_grid/content.rs
+++ b/widget/src/pane_grid/content.rs
@@ -12,23 +12,27 @@ use crate::pane_grid::{Draggable, TitleBar};
 ///
 /// [`Pane`]: super::Pane
 #[allow(missing_debug_implementations)]
-pub struct Content<'a, Message, Renderer = crate::Renderer>
-where
+pub struct Content<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
-    title_bar: Option<TitleBar<'a, Message, Renderer>>,
-    body: Element<'a, Message, Renderer>,
-    style: <Renderer::Theme as container::StyleSheet>::Style,
+    title_bar: Option<TitleBar<'a, Message, Theme, Renderer>>,
+    body: Element<'a, Message, Theme, Renderer>,
+    style: Theme::Style,
 }
 
-impl<'a, Message, Renderer> Content<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`Content`] with the provided body.
-    pub fn new(body: impl Into<Element<'a, Message, Renderer>>) -> Self {
+    pub fn new(body: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self {
         Self {
             title_bar: None,
             body: body.into(),
@@ -39,26 +43,23 @@ where
     /// Sets the [`TitleBar`] of this [`Content`].
     pub fn title_bar(
         mut self,
-        title_bar: TitleBar<'a, Message, Renderer>,
+        title_bar: TitleBar<'a, Message, Theme, Renderer>,
     ) -> Self {
         self.title_bar = Some(title_bar);
         self
     }
 
     /// Sets the style of the [`Content`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Content<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     pub(super) fn state(&self) -> Tree {
         let children = if let Some(title_bar) = self.title_bar.as_ref() {
@@ -92,14 +93,12 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
         viewport: &Rectangle,
     ) {
-        use container::StyleSheet;
-
         let bounds = layout.bounds();
 
         {
@@ -331,7 +330,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         if let Some(title_bar) = self.title_bar.as_mut() {
             let mut children = layout.children();
             let title_bar_layout = children.next()?;
@@ -359,10 +358,11 @@ where
     }
 }
 
-impl<'a, Message, Renderer> Draggable for &Content<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Draggable
+    for &Content<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     fn can_be_dragged_at(
         &self,
@@ -380,11 +380,12 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<T> for Content<'a, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> From<T>
+    for Content<'a, Message, Theme, Renderer>
 where
-    T: Into<Element<'a, Message, Renderer>>,
+    T: Into<Element<'a, Message, Theme, Renderer>>,
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     fn from(element: T) -> Self {
         Self::new(element)
diff --git a/widget/src/pane_grid/title_bar.rs b/widget/src/pane_grid/title_bar.rs
index eb21b743..3cca6b33 100644
--- a/widget/src/pane_grid/title_bar.rs
+++ b/widget/src/pane_grid/title_bar.rs
@@ -13,27 +13,31 @@ use crate::core::{
 ///
 /// [`Pane`]: super::Pane
 #[allow(missing_debug_implementations)]
-pub struct TitleBar<'a, Message, Renderer = crate::Renderer>
-where
+pub struct TitleBar<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
-    content: Element<'a, Message, Renderer>,
-    controls: Option<Element<'a, Message, Renderer>>,
+    content: Element<'a, Message, Theme, Renderer>,
+    controls: Option<Element<'a, Message, Theme, Renderer>>,
     padding: Padding,
     always_show_controls: bool,
-    style: <Renderer::Theme as container::StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> TitleBar<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`TitleBar`] with the given content.
     pub fn new<E>(content: E) -> Self
     where
-        E: Into<Element<'a, Message, Renderer>>,
+        E: Into<Element<'a, Message, Theme, Renderer>>,
     {
         Self {
             content: content.into(),
@@ -47,7 +51,7 @@ where
     /// Sets the controls of the [`TitleBar`].
     pub fn controls(
         mut self,
-        controls: impl Into<Element<'a, Message, Renderer>>,
+        controls: impl Into<Element<'a, Message, Theme, Renderer>>,
     ) -> Self {
         self.controls = Some(controls.into());
         self
@@ -60,10 +64,7 @@ where
     }
 
     /// Sets the style of the [`TitleBar`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
@@ -82,10 +83,10 @@ where
     }
 }
 
-impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> TitleBar<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: container::StyleSheet,
 {
     pub(super) fn state(&self) -> Tree {
         let children = if let Some(controls) = self.controls.as_ref() {
@@ -119,15 +120,13 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
         viewport: &Rectangle,
         show_controls: bool,
     ) {
-        use container::StyleSheet;
-
         let bounds = layout.bounds();
         let style = theme.appearance(&self.style);
         let inherited_style = renderer::Style {
@@ -406,7 +405,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         let mut children = layout.children();
         let padded = children.next()?;
 
diff --git a/widget/src/pick_list.rs b/widget/src/pick_list.rs
index 4d4e14d3..70b1d4c0 100644
--- a/widget/src/pick_list.rs
+++ b/widget/src/pick_list.rs
@@ -23,11 +23,16 @@ pub use crate::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 = crate::Renderer>
-where
+pub struct PickList<
+    'a,
+    T,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
     [T]: ToOwned<Owned = Vec<T>>,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     on_selected: Box<dyn Fn(T) -> Message + 'a>,
     options: Cow<'a, [T]>,
@@ -40,20 +45,20 @@ where
     text_shaping: text::Shaping,
     font: Option<Renderer::Font>,
     handle: Handle<Renderer::Font>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
+impl<'a, T: 'a, Message, Theme, Renderer>
+    PickList<'a, T, Message, Theme, Renderer>
 where
     T: ToString + PartialEq,
     [T]: ToOwned<Owned = Vec<T>>,
-    Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet
+    Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
         + container::StyleSheet,
-    <Renderer::Theme as menu::StyleSheet>::Style:
-        From<<Renderer::Theme as StyleSheet>::Style>,
+    <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
+    Renderer: text::Renderer,
 {
     /// The default padding of a [`PickList`].
     pub const DEFAULT_PADDING: Padding = Padding::new(5.0);
@@ -135,26 +140,25 @@ where
     /// Sets the style of the [`PickList`].
     pub fn style(
         mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+        style: impl Into<<Theme as StyleSheet>::Style>,
     ) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, T: 'a, Message, Renderer> Widget<Message, Renderer>
-    for PickList<'a, T, Message, Renderer>
+impl<'a, T: 'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for PickList<'a, T, Message, Theme, Renderer>
 where
     T: Clone + ToString + PartialEq + 'static,
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
-    Renderer: text::Renderer + 'a,
-    Renderer::Theme: StyleSheet
+    Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
         + container::StyleSheet,
-    <Renderer::Theme as menu::StyleSheet>::Style:
-        From<<Renderer::Theme as StyleSheet>::Style>,
+    <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
+    Renderer: text::Renderer + 'a,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State<Renderer::Paragraph>>()
@@ -230,7 +234,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -261,7 +265,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         let state = tree.state.downcast_mut::<State<Renderer::Paragraph>>();
 
         overlay(
@@ -278,21 +282,22 @@ where
     }
 }
 
-impl<'a, T: 'a, Message, Renderer> From<PickList<'a, T, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, T: 'a, Message, Theme, Renderer>
+    From<PickList<'a, T, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     T: Clone + ToString + PartialEq + 'static,
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
-    Renderer: text::Renderer + 'a,
-    Renderer::Theme: StyleSheet
+    Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
-        + container::StyleSheet,
-    <Renderer::Theme as menu::StyleSheet>::Style:
-        From<<Renderer::Theme as StyleSheet>::Style>,
+        + container::StyleSheet
+        + 'a,
+    <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
+    Renderer: text::Renderer + 'a,
 {
-    fn from(pick_list: PickList<'a, T, Message, Renderer>) -> Self {
+    fn from(pick_list: PickList<'a, T, Message, Theme, Renderer>) -> Self {
         Self::new(pick_list)
     }
 }
@@ -566,7 +571,7 @@ pub fn mouse_interaction(
 }
 
 /// Returns the current overlay of a [`PickList`].
-pub fn overlay<'a, T, Message, Renderer>(
+pub fn overlay<'a, T, Message, Theme, Renderer>(
     layout: Layout<'_>,
     state: &'a mut State<Renderer::Paragraph>,
     padding: Padding,
@@ -575,18 +580,18 @@ pub fn overlay<'a, T, Message, Renderer>(
     font: Renderer::Font,
     options: &'a [T],
     on_selected: &'a dyn Fn(T) -> Message,
-    style: <Renderer::Theme as StyleSheet>::Style,
-) -> Option<overlay::Element<'a, Message, Renderer>>
+    style: <Theme as StyleSheet>::Style,
+) -> Option<overlay::Element<'a, Message, Theme, Renderer>>
 where
     T: Clone + ToString,
     Message: 'a,
-    Renderer: text::Renderer + 'a,
-    Renderer::Theme: StyleSheet
+    Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
-        + container::StyleSheet,
-    <Renderer::Theme as menu::StyleSheet>::Style:
-        From<<Renderer::Theme as StyleSheet>::Style>,
+        + container::StyleSheet
+        + 'a,
+    <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
+    Renderer: text::Renderer + 'a,
 {
     if state.is_open {
         let bounds = layout.bounds();
@@ -619,9 +624,9 @@ where
 }
 
 /// Draws a [`PickList`].
-pub fn draw<'a, T, Renderer>(
+pub fn draw<'a, T, Theme, Renderer>(
     renderer: &mut Renderer,
-    theme: &Renderer::Theme,
+    theme: &Theme,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
     padding: Padding,
@@ -632,12 +637,12 @@ pub fn draw<'a, T, Renderer>(
     placeholder: Option<&str>,
     selected: Option<&T>,
     handle: &Handle<Renderer::Font>,
-    style: &<Renderer::Theme as StyleSheet>::Style,
+    style: &Theme::Style,
     state: impl FnOnce() -> &'a State<Renderer::Paragraph>,
     viewport: &Rectangle,
 ) where
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
     T: ToString + 'a,
 {
     let bounds = layout.bounds();
diff --git a/widget/src/progress_bar.rs b/widget/src/progress_bar.rs
index eb15644e..694fdd28 100644
--- a/widget/src/progress_bar.rs
+++ b/widget/src/progress_bar.rs
@@ -13,8 +13,7 @@ pub use iced_style::progress_bar::{Appearance, StyleSheet};
 ///
 /// # Example
 /// ```no_run
-/// # type ProgressBar =
-/// #     iced_widget::ProgressBar<iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// # type ProgressBar = iced_widget::ProgressBar<iced_widget::style::Theme>;
 /// #
 /// let value = 50.0;
 ///
@@ -23,22 +22,20 @@ pub use iced_style::progress_bar::{Appearance, StyleSheet};
 ///
 /// ![Progress bar drawn with `iced_wgpu`](https://user-images.githubusercontent.com/18618951/71662391-a316c200-2d51-11ea-9cef-52758cab85e3.png)
 #[allow(missing_debug_implementations)]
-pub struct ProgressBar<Renderer = crate::Renderer>
+pub struct ProgressBar<Theme = crate::Theme>
 where
-    Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     range: RangeInclusive<f32>,
     value: f32,
     width: Length,
     height: Option<Length>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<Renderer> ProgressBar<Renderer>
+impl<Theme> ProgressBar<Theme>
 where
-    Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     /// The default height of a [`ProgressBar`].
     pub const DEFAULT_HEIGHT: f32 = 30.0;
@@ -71,19 +68,17 @@ where
     }
 
     /// Sets the style of the [`ProgressBar`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for ProgressBar<Theme>
 where
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     fn size(&self) -> Size<Length> {
         Size {
@@ -109,7 +104,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor: mouse::Cursor,
@@ -152,16 +147,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<ProgressBar<Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<ProgressBar<Theme>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: StyleSheet + 'a,
     Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn from(
-        progress_bar: ProgressBar<Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        progress_bar: ProgressBar<Theme>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(progress_bar)
     }
 }
diff --git a/widget/src/qr_code.rs b/widget/src/qr_code.rs
index a229eb59..91c0a97b 100644
--- a/widget/src/qr_code.rs
+++ b/widget/src/qr_code.rs
@@ -49,7 +49,7 @@ impl<'a> QRCode<'a> {
     }
 }
 
-impl<'a, Message, Theme> Widget<Message, Renderer<Theme>> for QRCode<'a> {
+impl<'a, Message, Theme> Widget<Message, Theme, Renderer> for QRCode<'a> {
     fn size(&self) -> Size<Length> {
         Size {
             width: Length::Shrink,
@@ -60,7 +60,7 @@ impl<'a, Message, Theme> Widget<Message, Renderer<Theme>> for QRCode<'a> {
     fn layout(
         &self,
         _tree: &mut Tree,
-        _renderer: &Renderer<Theme>,
+        _renderer: &Renderer,
         _limits: &layout::Limits,
     ) -> layout::Node {
         let side_length = (self.state.width + 2 * QUIET_ZONE) as f32
@@ -72,7 +72,7 @@ impl<'a, Message, Theme> Widget<Message, Renderer<Theme>> for QRCode<'a> {
     fn draw(
         &self,
         _state: &Tree,
-        renderer: &mut Renderer<Theme>,
+        renderer: &mut Renderer,
         _theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
@@ -128,7 +128,7 @@ impl<'a, Message, Theme> Widget<Message, Renderer<Theme>> for QRCode<'a> {
 }
 
 impl<'a, Message, Theme> From<QRCode<'a>>
-    for Element<'a, Message, Renderer<Theme>>
+    for Element<'a, Message, Theme, Renderer>
 {
     fn from(qr_code: QRCode<'a>) -> Self {
         Self::new(qr_code)
diff --git a/widget/src/radio.rs b/widget/src/radio.rs
index ceb51ead..68e9bc7e 100644
--- a/widget/src/radio.rs
+++ b/widget/src/radio.rs
@@ -20,7 +20,7 @@ pub use iced_style::radio::{Appearance, StyleSheet};
 /// # Example
 /// ```no_run
 /// # type Radio<Message> =
-/// #     iced_widget::Radio<Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::Radio<Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// # use iced_widget::column;
 /// #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -69,10 +69,10 @@ pub use iced_style::radio::{Appearance, StyleSheet};
 /// let content = column![a, b, c, all];
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct Radio<Message, Renderer = crate::Renderer>
+pub struct Radio<Message, Theme = crate::Theme, Renderer = crate::Renderer>
 where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     is_selected: bool,
     on_click: Message,
@@ -84,14 +84,14 @@ where
     text_line_height: text::LineHeight,
     text_shaping: text::Shaping,
     font: Option<Renderer::Font>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<Message, Renderer> Radio<Message, Renderer>
+impl<Message, Theme, Renderer> Radio<Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// The default size of a [`Radio`] button.
     pub const DEFAULT_SIZE: f32 = 28.0;
@@ -178,20 +178,18 @@ where
     }
 
     /// Sets the style of the [`Radio`] button.
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Radio<Message, Renderer>
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Radio<Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<widget::text::State<Renderer::Paragraph>>()
@@ -286,7 +284,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -356,14 +354,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Radio<Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Radio<Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a + Clone,
+    Theme: StyleSheet + crate::text::StyleSheet + 'a,
     Renderer: 'a + text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
 {
-    fn from(radio: Radio<Message, Renderer>) -> Element<'a, Message, Renderer> {
+    fn from(
+        radio: Radio<Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(radio)
     }
 }
diff --git a/widget/src/row.rs b/widget/src/row.rs
index 90fd2926..89f610c9 100644
--- a/widget/src/row.rs
+++ b/widget/src/row.rs
@@ -12,16 +12,16 @@ use crate::core::{
 
 /// A container that distributes its contents horizontally.
 #[allow(missing_debug_implementations)]
-pub struct Row<'a, Message, Renderer = crate::Renderer> {
+pub struct Row<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer> {
     spacing: f32,
     padding: Padding,
     width: Length,
     height: Length,
     align_items: Alignment,
-    children: Vec<Element<'a, Message, Renderer>>,
+    children: Vec<Element<'a, Message, Theme, Renderer>>,
 }
 
-impl<'a, Message, Renderer> Row<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Row<'a, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
 {
@@ -39,7 +39,7 @@ where
 
     /// Creates a [`Row`] with the given elements.
     pub fn with_children(
-        children: impl IntoIterator<Item = Element<'a, Message, Renderer>>,
+        children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
     ) -> Self {
         children.into_iter().fold(Self::new(), Self::push)
     }
@@ -81,7 +81,7 @@ where
     /// Adds an [`Element`] to the [`Row`].
     pub fn push(
         mut self,
-        child: impl Into<Element<'a, Message, Renderer>>,
+        child: impl Into<Element<'a, Message, Theme, Renderer>>,
     ) -> Self {
         let child = child.into();
         let size = child.as_widget().size_hint();
@@ -108,8 +108,8 @@ where
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Row<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Row<'a, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
 {
@@ -223,7 +223,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -248,18 +248,19 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         overlay::from_children(&mut self.children, tree, layout, renderer)
     }
 }
 
-impl<'a, Message, Renderer> From<Row<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Row<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: 'a,
     Renderer: crate::core::Renderer + 'a,
 {
-    fn from(row: Row<'a, Message, Renderer>) -> Self {
+    fn from(row: Row<'a, Message, Theme, Renderer>) -> Self {
         Self::new(row)
     }
 }
diff --git a/widget/src/rule.rs b/widget/src/rule.rs
index c958c44d..bca34541 100644
--- a/widget/src/rule.rs
+++ b/widget/src/rule.rs
@@ -11,21 +11,19 @@ pub use crate::style::rule::{Appearance, FillMode, StyleSheet};
 
 /// Display a horizontal or vertical rule for dividing content.
 #[allow(missing_debug_implementations)]
-pub struct Rule<Renderer = crate::Renderer>
+pub struct Rule<Theme = crate::Theme>
 where
-    Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     width: Length,
     height: Length,
     is_horizontal: bool,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<Renderer> Rule<Renderer>
+impl<Theme> Rule<Theme>
 where
-    Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     /// Creates a horizontal [`Rule`] with the given height.
     pub fn horizontal(height: impl Into<Pixels>) -> Self {
@@ -48,19 +46,16 @@ where
     }
 
     /// Sets the style of the [`Rule`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Rule<Renderer>
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Rule<Theme>
 where
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     fn size(&self) -> Size<Length> {
         Size {
@@ -82,7 +77,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor: mouse::Cursor,
@@ -132,14 +127,14 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Rule<Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Rule<Theme>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: StyleSheet + 'a,
     Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
-    fn from(rule: Rule<Renderer>) -> Element<'a, Message, Renderer> {
+    fn from(rule: Rule<Theme>) -> Element<'a, Message, Theme, Renderer> {
         Element::new(rule)
     }
 }
diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs
index b7b6c3d2..509a6b34 100644
--- a/widget/src/scrollable.rs
+++ b/widget/src/scrollable.rs
@@ -21,27 +21,33 @@ pub use operation::scrollable::{AbsoluteOffset, RelativeOffset};
 /// A widget that can vertically display an infinite amount of content with a
 /// scrollbar.
 #[allow(missing_debug_implementations)]
-pub struct Scrollable<'a, Message, Renderer = crate::Renderer>
-where
+pub struct Scrollable<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     id: Option<Id>,
     width: Length,
     height: Length,
     direction: Direction,
-    content: Element<'a, Message, Renderer>,
+    content: Element<'a, Message, Theme, Renderer>,
     on_scroll: Option<Box<dyn Fn(Viewport) -> Message + 'a>>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Scrollable<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`Scrollable`].
-    pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
+    pub fn new(
+        content: impl Into<Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
         Scrollable {
             id: None,
             width: Length::Shrink,
@@ -86,10 +92,7 @@ where
     }
 
     /// Sets the style of the [`Scrollable`] .
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
@@ -198,11 +201,11 @@ pub enum Alignment {
     End,
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Scrollable<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Scrollable<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State>()
@@ -324,7 +327,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -382,7 +385,7 @@ where
         tree: &'b mut Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         self.content
             .as_widget_mut()
             .overlay(
@@ -404,16 +407,17 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Scrollable<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer>
+    From<Scrollable<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
+    Theme: StyleSheet + 'a,
     Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn from(
-        text_input: Scrollable<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        text_input: Scrollable<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(text_input)
     }
 }
@@ -841,18 +845,18 @@ pub fn mouse_interaction(
 }
 
 /// Draws a [`Scrollable`].
-pub fn draw<Renderer>(
+pub fn draw<Theme, Renderer>(
     state: &State,
     renderer: &mut Renderer,
-    theme: &Renderer::Theme,
+    theme: &Theme,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
     direction: Direction,
-    style: &<Renderer::Theme as StyleSheet>::Style,
+    style: &Theme::Style,
     draw_content: impl FnOnce(&mut Renderer, Layout<'_>, mouse::Cursor, &Rectangle),
 ) where
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     let bounds = layout.bounds();
     let content_layout = layout.children().next().unwrap();
diff --git a/widget/src/shader.rs b/widget/src/shader.rs
index 16b68c55..68112f83 100644
--- a/widget/src/shader.rs
+++ b/widget/src/shader.rs
@@ -56,7 +56,8 @@ impl<Message, P: Program<Message>> Shader<Message, P> {
     }
 }
 
-impl<P, Message, Renderer> Widget<Message, Renderer> for Shader<Message, P>
+impl<P, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Shader<Message, P>
 where
     P: Program<Message>,
     Renderer: pipeline::Renderer,
@@ -150,7 +151,7 @@ where
         &self,
         tree: &widget::Tree,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        _theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: mouse::Cursor,
@@ -166,14 +167,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer, P> From<Shader<Message, P>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer, P> From<Shader<Message, P>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
     Renderer: pipeline::Renderer,
     P: Program<Message> + 'a,
 {
-    fn from(custom: Shader<Message, P>) -> Element<'a, Message, Renderer> {
+    fn from(
+        custom: Shader<Message, P>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(custom)
     }
 }
diff --git a/widget/src/slider.rs b/widget/src/slider.rs
index 79b0a7d8..5c3b6384 100644
--- a/widget/src/slider.rs
+++ b/widget/src/slider.rs
@@ -29,7 +29,7 @@ pub use iced_style::slider::{
 /// # Example
 /// ```no_run
 /// # type Slider<'a, T, Message> =
-/// #     iced_widget::Slider<'a, Message, T, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::Slider<'a, Message, T, iced_widget::style::Theme>;
 /// #
 /// #[derive(Clone)]
 /// pub enum Message {
@@ -43,10 +43,9 @@ pub use iced_style::slider::{
 ///
 /// ![Slider drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/slider.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Slider<'a, T, Message, Renderer = crate::Renderer>
+pub struct Slider<'a, T, Message, Theme = crate::Theme>
 where
-    Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     range: RangeInclusive<T>,
     step: T,
@@ -55,15 +54,14 @@ where
     on_release: Option<Message>,
     width: Length,
     height: f32,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, T, Message, Renderer> Slider<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme> Slider<'a, T, Message, Theme>
 where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
-    Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     /// The default height of a [`Slider`].
     pub const DEFAULT_HEIGHT: f32 = 22.0;
@@ -128,10 +126,7 @@ where
     }
 
     /// Sets the style of the [`Slider`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
@@ -143,13 +138,13 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> Widget<Message, Renderer>
-    for Slider<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Slider<'a, T, Message, Theme>
 where
     T: Copy + Into<f64> + num_traits::FromPrimitive,
     Message: Clone,
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State>()
@@ -204,7 +199,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -234,17 +229,17 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<Slider<'a, T, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> From<Slider<'a, T, Message, Theme>>
+    for Element<'a, Message, Theme, Renderer>
 where
-    T: 'a + Copy + Into<f64> + num_traits::FromPrimitive,
-    Message: 'a + Clone,
-    Renderer: 'a + crate::core::Renderer,
-    Renderer::Theme: StyleSheet,
+    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
+    Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
+    Renderer: crate::core::Renderer + 'a,
 {
     fn from(
-        slider: Slider<'a, T, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        slider: Slider<'a, T, Message, Theme>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(slider)
     }
 }
@@ -338,29 +333,29 @@ where
 }
 
 /// Draws a [`Slider`].
-pub fn draw<T, R>(
-    renderer: &mut R,
+pub fn draw<T, Theme, Renderer>(
+    renderer: &mut Renderer,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
     state: &State,
     value: T,
     range: &RangeInclusive<T>,
-    style_sheet: &dyn StyleSheet<Style = <R::Theme as StyleSheet>::Style>,
-    style: &<R::Theme as StyleSheet>::Style,
+    theme: &Theme,
+    style: &Theme::Style,
 ) where
     T: Into<f64> + Copy,
-    R: crate::core::Renderer,
-    R::Theme: StyleSheet,
+    Theme: StyleSheet,
+    Renderer: crate::core::Renderer,
 {
     let bounds = layout.bounds();
     let is_mouse_over = cursor.is_over(bounds);
 
     let style = if state.is_dragging {
-        style_sheet.dragging(style)
+        theme.dragging(style)
     } else if is_mouse_over {
-        style_sheet.hovered(style)
+        theme.hovered(style)
     } else {
-        style_sheet.active(style)
+        theme.active(style)
     };
 
     let (handle_width, handle_height, handle_border_radius) =
diff --git a/widget/src/space.rs b/widget/src/space.rs
index eef990d1..aeec91f9 100644
--- a/widget/src/space.rs
+++ b/widget/src/space.rs
@@ -41,7 +41,7 @@ impl Space {
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Space
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Space
 where
     Renderer: core::Renderer,
 {
@@ -65,7 +65,7 @@ where
         &self,
         _state: &Tree,
         _renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        _theme: &Theme,
         _style: &renderer::Style,
         _layout: Layout<'_>,
         _cursor: mouse::Cursor,
@@ -74,12 +74,13 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Space> for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Space>
+    for Element<'a, Message, Theme, Renderer>
 where
     Renderer: core::Renderer,
     Message: 'a,
 {
-    fn from(space: Space) -> Element<'a, Message, Renderer> {
+    fn from(space: Space) -> Element<'a, Message, Theme, Renderer> {
         Element::new(space)
     }
 }
diff --git a/widget/src/svg.rs b/widget/src/svg.rs
index 2357cf65..12ef3d92 100644
--- a/widget/src/svg.rs
+++ b/widget/src/svg.rs
@@ -20,22 +20,20 @@ pub use svg::Handle;
 /// [`Svg`] images can have a considerable rendering cost when resized,
 /// specially when they are complex.
 #[allow(missing_debug_implementations)]
-pub struct Svg<Renderer = crate::Renderer>
+pub struct Svg<Theme = crate::Theme>
 where
-    Renderer: svg::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     handle: Handle,
     width: Length,
     height: Length,
     content_fit: ContentFit,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: <Theme as StyleSheet>::Style,
 }
 
-impl<Renderer> Svg<Renderer>
+impl<Theme> Svg<Theme>
 where
-    Renderer: svg::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     /// Creates a new [`Svg`] from the given [`Handle`].
     pub fn new(handle: impl Into<Handle>) -> Self {
@@ -82,19 +80,16 @@ where
 
     /// Sets the style variant of this [`Svg`].
     #[must_use]
-    pub fn style(
-        mut self,
-        style: <Renderer::Theme as StyleSheet>::Style,
-    ) -> Self {
-        self.style = style;
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
+        self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Svg<Renderer>
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Svg<Theme>
 where
+    Theme: iced_style::svg::StyleSheet,
     Renderer: svg::Renderer,
-    Renderer::Theme: iced_style::svg::StyleSheet,
 {
     fn size(&self) -> Size<Length> {
         Size {
@@ -138,7 +133,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -186,13 +181,13 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Svg<Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Svg<Theme>>
+    for Element<'a, Message, Theme, Renderer>
 where
+    Theme: iced_style::svg::StyleSheet + 'a,
     Renderer: svg::Renderer + 'a,
-    Renderer::Theme: iced_style::svg::StyleSheet,
 {
-    fn from(icon: Svg<Renderer>) -> Element<'a, Message, Renderer> {
+    fn from(icon: Svg<Theme>) -> Element<'a, Message, Theme, Renderer> {
         Element::new(icon)
     }
 }
diff --git a/widget/src/text.rs b/widget/src/text.rs
index ce4f44bd..0d689295 100644
--- a/widget/src/text.rs
+++ b/widget/src/text.rs
@@ -2,5 +2,5 @@
 pub use crate::core::widget::text::*;
 
 /// A paragraph.
-pub type Text<'a, Renderer = crate::Renderer> =
-    crate::core::widget::Text<'a, Renderer>;
+pub type Text<'a, Theme = crate::Theme, Renderer = crate::Renderer> =
+    crate::core::widget::Text<'a, Theme, Renderer>;
diff --git a/widget/src/text_editor.rs b/widget/src/text_editor.rs
index 6b716238..c3a17bd2 100644
--- a/widget/src/text_editor.rs
+++ b/widget/src/text_editor.rs
@@ -23,11 +23,16 @@ pub use text::editor::{Action, Edit, Motion};
 
 /// A multi-line text input.
 #[allow(missing_debug_implementations)]
-pub struct TextEditor<'a, Highlighter, Message, Renderer = crate::Renderer>
-where
+pub struct TextEditor<
+    'a,
+    Highlighter,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
     Highlighter: text::Highlighter,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     content: &'a Content<Renderer>,
     font: Option<Renderer::Font>,
@@ -36,20 +41,20 @@ where
     width: Length,
     height: Length,
     padding: Padding,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
     on_edit: Option<Box<dyn Fn(Action) -> Message + 'a>>,
     highlighter_settings: Highlighter::Settings,
     highlighter_format: fn(
         &Highlighter::Highlight,
-        &Renderer::Theme,
+        &Theme,
     ) -> highlighter::Format<Renderer::Font>,
 }
 
-impl<'a, Message, Renderer>
-    TextEditor<'a, highlighter::PlainText, Message, Renderer>
+impl<'a, Message, Theme, Renderer>
+    TextEditor<'a, highlighter::PlainText, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// Creates new [`TextEditor`] with the given [`Content`].
     pub fn new(content: &'a Content<Renderer>) -> Self {
@@ -71,12 +76,12 @@ where
     }
 }
 
-impl<'a, Highlighter, Message, Renderer>
-    TextEditor<'a, Highlighter, Message, Renderer>
+impl<'a, Highlighter, Message, Theme, Renderer>
+    TextEditor<'a, Highlighter, Message, Theme, Renderer>
 where
     Highlighter: text::Highlighter,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// Sets the message that should be produced when some action is performed in
     /// the [`TextEditor`].
@@ -111,9 +116,9 @@ where
         settings: H::Settings,
         to_format: fn(
             &H::Highlight,
-            &Renderer::Theme,
+            &Theme,
         ) -> highlighter::Format<Renderer::Font>,
-    ) -> TextEditor<'a, H, Message, Renderer> {
+    ) -> TextEditor<'a, H, Message, Theme, Renderer> {
         TextEditor {
             content: self.content,
             font: self.font,
@@ -130,10 +135,7 @@ where
     }
 
     /// Sets the style of the [`TextEditor`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
@@ -292,12 +294,12 @@ struct State<Highlighter: text::Highlighter> {
     highlighter_format_address: usize,
 }
 
-impl<'a, Highlighter, Message, Renderer> Widget<Message, Renderer>
-    for TextEditor<'a, Highlighter, Message, Renderer>
+impl<'a, Highlighter, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for TextEditor<'a, Highlighter, Message, Theme, Renderer>
 where
     Highlighter: text::Highlighter,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> widget::tree::Tag {
         widget::tree::Tag::of::<State<Highlighter>>()
@@ -433,7 +435,7 @@ where
         &self,
         tree: &widget::Tree,
         renderer: &mut Renderer,
-        theme: &<Renderer as renderer::Renderer>::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -551,17 +553,17 @@ where
     }
 }
 
-impl<'a, Highlighter, Message, Renderer>
-    From<TextEditor<'a, Highlighter, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Highlighter, Message, Theme, Renderer>
+    From<TextEditor<'a, Highlighter, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Highlighter: text::Highlighter,
     Message: 'a,
+    Theme: StyleSheet + 'a,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn from(
-        text_editor: TextEditor<'a, Highlighter, Message, Renderer>,
+        text_editor: TextEditor<'a, Highlighter, Message, Theme, Renderer>,
     ) -> Self {
         Self::new(text_editor)
     }
diff --git a/widget/src/text_input.rs b/widget/src/text_input.rs
index 02715989..2cf4ef77 100644
--- a/widget/src/text_input.rs
+++ b/widget/src/text_input.rs
@@ -38,7 +38,7 @@ pub use iced_style::text_input::{Appearance, StyleSheet};
 /// # Example
 /// ```no_run
 /// # pub type TextInput<'a, Message> =
-/// #     iced_widget::TextInput<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::TextInput<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// #[derive(Debug, Clone)]
 /// enum Message {
@@ -56,10 +56,14 @@ pub use iced_style::text_input::{Appearance, StyleSheet};
 /// ```
 /// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct TextInput<'a, Message, Renderer = crate::Renderer>
-where
+pub struct TextInput<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     id: Option<Id>,
     placeholder: String,
@@ -74,17 +78,17 @@ where
     on_paste: Option<Box<dyn Fn(String) -> Message + 'a>>,
     on_submit: Option<Message>,
     icon: Option<Icon<Renderer::Font>>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
 /// The default [`Padding`] of a [`TextInput`].
 pub const DEFAULT_PADDING: Padding = Padding::new(5.0);
 
-impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> TextInput<'a, Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`TextInput`].
     ///
@@ -193,10 +197,7 @@ where
     }
 
     /// Sets the style of the [`TextInput`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
@@ -235,7 +236,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
         value: Option<&Value>,
@@ -257,12 +258,12 @@ where
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for TextInput<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for TextInput<'a, Message, Theme, Renderer>
 where
     Message: Clone,
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State<Renderer::Paragraph>>()
@@ -360,7 +361,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -393,16 +394,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<TextInput<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a + Clone,
-    Renderer: 'a + text::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet + 'a,
+    Renderer: text::Renderer + 'a,
 {
     fn from(
-        text_input: TextInput<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        text_input: TextInput<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(text_input)
     }
 }
@@ -1043,9 +1044,9 @@ where
 /// [`Value`] if provided.
 ///
 /// [`Renderer`]: text::Renderer
-pub fn draw<Renderer>(
+pub fn draw<Theme, Renderer>(
     renderer: &mut Renderer,
-    theme: &Renderer::Theme,
+    theme: &Theme,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
     state: &State<Renderer::Paragraph>,
@@ -1053,11 +1054,11 @@ pub fn draw<Renderer>(
     is_disabled: bool,
     is_secure: bool,
     icon: Option<&Icon<Renderer::Font>>,
-    style: &<Renderer::Theme as StyleSheet>::Style,
+    style: &Theme::Style,
     viewport: &Rectangle,
 ) where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     let secure_value = is_secure.then(|| value.secure());
     let value = secure_value.as_ref().unwrap_or(value);
diff --git a/widget/src/toggler.rs b/widget/src/toggler.rs
index 58cd38ab..1d313df3 100644
--- a/widget/src/toggler.rs
+++ b/widget/src/toggler.rs
@@ -21,7 +21,7 @@ pub use crate::style::toggler::{Appearance, StyleSheet};
 ///
 /// ```no_run
 /// # type Toggler<'a, Message> =
-/// #     iced_widget::Toggler<'a, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::Toggler<'a, Message, iced_widget::style::Theme, iced_widget::renderer::Renderer>;
 /// #
 /// pub enum Message {
 ///     TogglerToggled(bool),
@@ -32,10 +32,14 @@ pub use crate::style::toggler::{Appearance, StyleSheet};
 /// Toggler::new(String::from("Toggle me!"), is_toggled, |b| Message::TogglerToggled(b));
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct Toggler<'a, Message, Renderer = crate::Renderer>
-where
+pub struct Toggler<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     is_toggled: bool,
     on_toggle: Box<dyn Fn(bool) -> Message + 'a>,
@@ -48,13 +52,13 @@ where
     text_shaping: text::Shaping,
     spacing: f32,
     font: Option<Renderer::Font>,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, Message, Renderer> Toggler<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Toggler<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     /// The default size of a [`Toggler`].
     pub const DEFAULT_SIZE: f32 = 20.0;
@@ -145,20 +149,17 @@ where
     }
 
     /// Sets the style of the [`Toggler`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Toggler<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Toggler<'a, Message, Theme, Renderer>
 where
+    Theme: StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<widget::text::State<Renderer::Paragraph>>()
@@ -261,7 +262,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -349,16 +350,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Toggler<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Toggler<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Renderer: 'a + text::Renderer,
-    Renderer::Theme: StyleSheet + crate::text::StyleSheet,
+    Theme: StyleSheet + crate::text::StyleSheet + 'a,
+    Renderer: text::Renderer + 'a,
 {
     fn from(
-        toggler: Toggler<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        toggler: Toggler<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(toggler)
     }
 }
diff --git a/widget/src/tooltip.rs b/widget/src/tooltip.rs
index d09a9255..44cfc4b3 100644
--- a/widget/src/tooltip.rs
+++ b/widget/src/tooltip.rs
@@ -17,24 +17,28 @@ use std::borrow::Cow;
 
 /// An element to display a widget over another.
 #[allow(missing_debug_implementations)]
-pub struct Tooltip<'a, Message, Renderer = crate::Renderer>
-where
+pub struct Tooltip<
+    'a,
+    Message,
+    Theme = crate::Theme,
+    Renderer = crate::Renderer,
+> where
+    Theme: container::StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet + crate::text::StyleSheet,
 {
-    content: Element<'a, Message, Renderer>,
-    tooltip: Text<'a, Renderer>,
+    content: Element<'a, Message, Theme, Renderer>,
+    tooltip: Text<'a, Theme, Renderer>,
     position: Position,
     gap: f32,
     padding: f32,
     snap_within_viewport: bool,
-    style: <Renderer::Theme as container::StyleSheet>::Style,
+    style: <Theme as container::StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer> Tooltip<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Tooltip<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet + crate::text::StyleSheet,
 {
     /// The default padding of a [`Tooltip`] drawn by this renderer.
     const DEFAULT_PADDING: f32 = 5.0;
@@ -43,7 +47,7 @@ where
     ///
     /// [`Tooltip`]: struct.Tooltip.html
     pub fn new(
-        content: impl Into<Element<'a, Message, Renderer>>,
+        content: impl Into<Element<'a, Message, Theme, Renderer>>,
         tooltip: impl Into<Cow<'a, str>>,
         position: Position,
     ) -> Self {
@@ -99,23 +103,23 @@ where
     /// Sets the style of the [`Tooltip`].
     pub fn style(
         mut self,
-        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
+        style: impl Into<<Theme as container::StyleSheet>::Style>,
     ) -> Self {
         self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Tooltip<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Tooltip<'a, Message, Theme, Renderer>
 where
+    Theme: container::StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet + crate::text::StyleSheet,
 {
     fn children(&self) -> Vec<widget::Tree> {
         vec![
             widget::Tree::new(&self.content),
-            widget::Tree::new(&self.tooltip as &dyn Widget<Message, _>),
+            widget::Tree::new(&self.tooltip as &dyn Widget<Message, _, _>),
         ]
     }
 
@@ -205,7 +209,7 @@ where
         &self,
         tree: &widget::Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -227,7 +231,7 @@ where
         tree: &'b mut widget::Tree,
         layout: Layout<'_>,
         renderer: &Renderer,
-    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
         let state = tree.state.downcast_ref::<State>();
 
         let mut children = tree.children.iter_mut();
@@ -270,16 +274,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Tooltip<'a, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, Message, Theme, Renderer> From<Tooltip<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Renderer: 'a + text::Renderer,
-    Renderer::Theme: container::StyleSheet + crate::text::StyleSheet,
+    Theme: container::StyleSheet + crate::text::StyleSheet + 'a,
+    Renderer: text::Renderer + 'a,
 {
     fn from(
-        tooltip: Tooltip<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        tooltip: Tooltip<'a, Message, Theme, Renderer>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(tooltip)
     }
 }
@@ -308,12 +312,12 @@ enum State {
     },
 }
 
-struct Overlay<'a, 'b, Renderer>
+struct Overlay<'a, 'b, Theme, Renderer>
 where
+    Theme: container::StyleSheet + widget::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
-    tooltip: &'b Text<'a, Renderer>,
+    tooltip: &'b Text<'a, Theme, Renderer>,
     state: &'b mut widget::Tree,
     cursor_position: Point,
     content_bounds: Rectangle,
@@ -321,14 +325,15 @@ where
     position: Position,
     gap: f32,
     padding: f32,
-    style: &'b <Renderer::Theme as container::StyleSheet>::Style,
+    style: &'b <Theme as container::StyleSheet>::Style,
 }
 
-impl<'a, 'b, Message, Renderer> overlay::Overlay<Message, Renderer>
-    for Overlay<'a, 'b, Renderer>
+impl<'a, 'b, Message, Theme, Renderer>
+    overlay::Overlay<Message, Theme, Renderer>
+    for Overlay<'a, 'b, Theme, Renderer>
 where
+    Theme: container::StyleSheet + widget::text::StyleSheet,
     Renderer: text::Renderer,
-    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     fn layout(
         &mut self,
@@ -339,7 +344,7 @@ where
     ) -> layout::Node {
         let viewport = Rectangle::with_size(bounds);
 
-        let text_layout = Widget::<(), Renderer>::layout(
+        let text_layout = Widget::<(), Theme, Renderer>::layout(
             self.tooltip,
             self.state,
             renderer,
@@ -430,14 +435,12 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        theme: &<Renderer as renderer::Renderer>::Theme,
+        theme: &Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: mouse::Cursor,
     ) {
-        let style = <Renderer::Theme as container::StyleSheet>::appearance(
-            theme, self.style,
-        );
+        let style = container::StyleSheet::appearance(theme, self.style);
 
         container::draw_background(renderer, &style, layout.bounds());
 
@@ -445,7 +448,7 @@ where
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
         };
 
-        Widget::<(), Renderer>::draw(
+        Widget::<(), Theme, Renderer>::draw(
             self.tooltip,
             self.state,
             renderer,
diff --git a/widget/src/vertical_slider.rs b/widget/src/vertical_slider.rs
index 52428c10..d3086a81 100644
--- a/widget/src/vertical_slider.rs
+++ b/widget/src/vertical_slider.rs
@@ -28,7 +28,7 @@ use crate::core::{
 /// # Example
 /// ```no_run
 /// # type VerticalSlider<'a, T, Message> =
-/// #     iced_widget::VerticalSlider<'a, T, Message, iced_widget::renderer::Renderer<iced_widget::style::Theme>>;
+/// #     iced_widget::VerticalSlider<'a, T, Message, iced_widget::style::Theme>;
 /// #
 /// #[derive(Clone)]
 /// pub enum Message {
@@ -40,10 +40,9 @@ use crate::core::{
 /// VerticalSlider::new(0.0..=100.0, value, Message::SliderChanged);
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct VerticalSlider<'a, T, Message, Renderer = crate::Renderer>
+pub struct VerticalSlider<'a, T, Message, Theme = crate::Theme>
 where
-    Renderer: core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     range: RangeInclusive<T>,
     step: T,
@@ -52,15 +51,14 @@ where
     on_release: Option<Message>,
     width: f32,
     height: Length,
-    style: <Renderer::Theme as StyleSheet>::Style,
+    style: Theme::Style,
 }
 
-impl<'a, T, Message, Renderer> VerticalSlider<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme> VerticalSlider<'a, T, Message, Theme>
 where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
-    Renderer: core::Renderer,
-    Renderer::Theme: StyleSheet,
+    Theme: StyleSheet,
 {
     /// The default width of a [`VerticalSlider`].
     pub const DEFAULT_WIDTH: f32 = 22.0;
@@ -125,10 +123,7 @@ where
     }
 
     /// Sets the style of the [`VerticalSlider`].
-    pub fn style(
-        mut self,
-        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
-    ) -> Self {
+    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
         self.style = style.into();
         self
     }
@@ -140,13 +135,13 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> Widget<Message, Renderer>
-    for VerticalSlider<'a, T, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for VerticalSlider<'a, T, Message, Theme>
 where
     T: Copy + Into<f64> + num_traits::FromPrimitive,
     Message: Clone,
+    Theme: StyleSheet,
     Renderer: core::Renderer,
-    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State>()
@@ -201,7 +196,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
-        theme: &Renderer::Theme,
+        theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor: mouse::Cursor,
@@ -231,17 +226,18 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<VerticalSlider<'a, T, Message, Renderer>>
-    for Element<'a, Message, Renderer>
+impl<'a, T, Message, Theme, Renderer>
+    From<VerticalSlider<'a, T, Message, Theme>>
+    for Element<'a, Message, Theme, Renderer>
 where
-    T: 'a + Copy + Into<f64> + num_traits::FromPrimitive,
-    Message: 'a + Clone,
-    Renderer: 'a + core::Renderer,
-    Renderer::Theme: StyleSheet,
+    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
+    Message: Clone + 'a,
+    Theme: StyleSheet + 'a,
+    Renderer: core::Renderer + 'a,
 {
     fn from(
-        slider: VerticalSlider<'a, T, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+        slider: VerticalSlider<'a, T, Message, Theme>,
+    ) -> Element<'a, Message, Theme, Renderer> {
         Element::new(slider)
     }
 }
@@ -337,19 +333,19 @@ where
 }
 
 /// Draws a [`VerticalSlider`].
-pub fn draw<T, R>(
-    renderer: &mut R,
+pub fn draw<T, Theme, Renderer>(
+    renderer: &mut Renderer,
     layout: Layout<'_>,
     cursor: mouse::Cursor,
     state: &State,
     value: T,
     range: &RangeInclusive<T>,
-    style_sheet: &dyn StyleSheet<Style = <R::Theme as StyleSheet>::Style>,
-    style: &<R::Theme as StyleSheet>::Style,
+    style_sheet: &Theme,
+    style: &Theme::Style,
 ) where
     T: Into<f64> + Copy,
-    R: core::Renderer,
-    R::Theme: StyleSheet,
+    Theme: StyleSheet,
+    Renderer: core::Renderer,
 {
     let bounds = layout.bounds();
     let is_mouse_over = cursor.is_over(bounds);