Draft first-class `Theme` support

RFC: https://github.com/iced-rs/rfcs/pull/6

113 files changed, 767 insertions, 878 deletions

diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs
index 3b8a1d6a..fa4181a9 100644
--- a/examples/clock/src/main.rs
+++ b/examples/clock/src/main.rs
@@ -1,7 +1,10 @@
+use iced::canvas::{
+    self, Cache, Canvas, Cursor, Geometry, LineCap, Path, Stroke,
+};
+use iced::executor;
 use iced::{
-    canvas::{self, Cache, Canvas, Cursor, Geometry, LineCap, Path, Stroke},
-    executor, Application, Color, Command, Container, Element, Length, Point,
-    Rectangle, Settings, Subscription, Vector,
+    Application, Color, Command, Container, Element, Length, Point, Rectangle,
+    Settings, Subscription, Theme, Vector,
 };
 
 pub fn main() -> iced::Result {
@@ -22,8 +25,9 @@ enum Message {
 }
 
 impl Application for Clock {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
diff --git a/examples/component/src/main.rs b/examples/component/src/main.rs
index 39335cf1..d863c58f 100644
--- a/examples/component/src/main.rs
+++ b/examples/component/src/main.rs
@@ -95,6 +95,8 @@ mod numeric_input {
         for NumericInput<'a, Message>
     where
         Renderer: 'a + text::Renderer,
+        Renderer::Theme: button::StyleSheet,
+        <Renderer::Theme as button::StyleSheet>::Variant: Default + Copy,
     {
         type Event = Event;
 
@@ -172,6 +174,8 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: text::Renderer + 'a,
+        Renderer::Theme: button::StyleSheet,
+        <Renderer::Theme as button::StyleSheet>::Variant: Default + Copy,
     {
         fn from(numeric_input: NumericInput<'a, Message>) -> Self {
             component::view(numeric_input)
diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
index 931cf5e1..e92f07f2 100644
--- a/examples/counter/src/main.rs
+++ b/examples/counter/src/main.rs
@@ -1,6 +1,5 @@
-use iced::{
-    button, Alignment, Button, Column, Element, Sandbox, Settings, Text,
-};
+use iced::button::{self, Button};
+use iced::{Alignment, Column, Element, Sandbox, Settings, Text};
 
 pub fn main() -> iced::Result {
     Counter::run(Settings::default())
diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs
index 28edf256..ce5306ba 100644
--- a/examples/custom_widget/src/main.rs
+++ b/examples/custom_widget/src/main.rs
@@ -46,6 +46,7 @@ mod circle {
         fn draw(
             &self,
             renderer: &mut Renderer,
+            _theme: &Renderer::Theme,
             _style: &renderer::Style,
             layout: Layout<'_>,
             _cursor_position: Point,
diff --git a/examples/download_progress/src/main.rs b/examples/download_progress/src/main.rs
index 21804a0a..4a801ba4 100644
--- a/examples/download_progress/src/main.rs
+++ b/examples/download_progress/src/main.rs
@@ -1,6 +1,8 @@
+use iced::button;
+use iced::executor;
 use iced::{
-    button, executor, Alignment, Application, Button, Column, Command,
-    Container, Element, Length, ProgressBar, Settings, Subscription, Text,
+    Alignment, Application, Button, Column, Command, Container, Element,
+    Length, ProgressBar, Settings, Subscription, Text, Theme,
 };
 
 mod download;
@@ -24,8 +26,9 @@ pub enum Message {
 }
 
 impl Application for Example {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Example, Command<Message>) {
diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs
index 7f024c56..c87fbc72 100644
--- a/examples/events/src/main.rs
+++ b/examples/events/src/main.rs
@@ -1,6 +1,9 @@
+use iced::alignment;
+use iced::button;
+use iced::executor;
 use iced::{
-    alignment, button, executor, Alignment, Application, Button, Checkbox,
-    Column, Command, Container, Element, Length, Settings, Subscription, Text,
+    Alignment, Application, Button, Checkbox, Column, Command, Container,
+    Element, Length, Settings, Subscription, Text, Theme,
 };
 use iced_native::{window, Event};
 
@@ -27,8 +30,9 @@ enum Message {
 }
 
 impl Application for Events {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Events, Command<Message>) {
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index ab8b80e4..3e9c24a0 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -8,6 +8,7 @@ use iced::button::{self, Button};
 use iced::executor;
 use iced::pick_list::{self, PickList};
 use iced::slider::{self, Slider};
+use iced::theme::{self, Theme};
 use iced::time;
 use iced::window;
 use iced::{
@@ -55,6 +56,7 @@ enum Message {
 
 impl Application for GameOfLife {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -836,12 +838,12 @@ impl Controls {
                     Text::new(if is_playing { "Pause" } else { "Play" }),
                 )
                 .on_press(Message::TogglePlayback)
-                .style(style::Button),
+                .style(theme::Button::Primary),
             )
             .push(
                 Button::new(&mut self.next_button, Text::new("Next"))
                     .on_press(Message::Next)
-                    .style(style::Button),
+                    .style(theme::Button::Secondary),
             );
 
         let speed_controls = Row::new()
@@ -885,7 +887,7 @@ impl Controls {
             .push(
                 Button::new(&mut self.clear_button, Text::new("Clear"))
                     .on_press(Message::Clear)
-                    .style(style::Clear),
+                    .style(theme::Button::Destructive),
             )
             .into()
     }
diff --git a/examples/game_of_life/src/style.rs b/examples/game_of_life/src/style.rs
index be9a0e96..688635e0 100644
--- a/examples/game_of_life/src/style.rs
+++ b/examples/game_of_life/src/style.rs
@@ -1,4 +1,4 @@
-use iced::{button, container, pick_list, slider, Background, Color};
+use iced::{container, pick_list, slider, Background, Color};
 
 const ACTIVE: Color = Color::from_rgb(
     0x72 as f32 / 255.0,
@@ -6,12 +6,6 @@ const ACTIVE: Color = Color::from_rgb(
     0xDA as f32 / 255.0,
 );
 
-const DESTRUCTIVE: Color = Color::from_rgb(
-    0xC0 as f32 / 255.0,
-    0x47 as f32 / 255.0,
-    0x47 as f32 / 255.0,
-);
-
 const HOVERED: Color = Color::from_rgb(
     0x67 as f32 / 255.0,
     0x7B as f32 / 255.0,
@@ -38,67 +32,6 @@ impl container::StyleSheet for Container {
     }
 }
 
-pub struct Button;
-
-impl button::StyleSheet for Button {
-    fn active(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(ACTIVE)),
-            border_radius: 3.0,
-            text_color: Color::WHITE,
-            ..button::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(HOVERED)),
-            text_color: Color::WHITE,
-            ..self.active()
-        }
-    }
-
-    fn pressed(&self) -> button::Style {
-        button::Style {
-            border_width: 1.0,
-            border_color: Color::WHITE,
-            ..self.hovered()
-        }
-    }
-}
-
-pub struct Clear;
-
-impl button::StyleSheet for Clear {
-    fn active(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(DESTRUCTIVE)),
-            border_radius: 3.0,
-            text_color: Color::WHITE,
-            ..button::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(Color {
-                a: 0.5,
-                ..DESTRUCTIVE
-            })),
-            text_color: Color::WHITE,
-            ..self.active()
-        }
-    }
-
-    fn pressed(&self) -> button::Style {
-        button::Style {
-            border_width: 1.0,
-            border_color: Color::WHITE,
-            ..self.hovered()
-        }
-    }
-}
-
 pub struct Slider;
 
 impl slider::StyleSheet for Slider {
diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs
index 58dfa3ad..ba4b808e 100644
--- a/examples/geometry/src/main.rs
+++ b/examples/geometry/src/main.rs
@@ -25,7 +25,7 @@ mod rainbow {
         }
     }
 
-    impl<Message, B> Widget<Message, Renderer<B>> for Rainbow
+    impl<Message, B, T> Widget<Message, Renderer<B, T>> for Rainbow
     where
         B: Backend,
     {
@@ -39,7 +39,7 @@ mod rainbow {
 
         fn layout(
             &self,
-            _renderer: &Renderer<B>,
+            _renderer: &Renderer<B, T>,
             limits: &layout::Limits,
         ) -> layout::Node {
             let size = limits.width(Length::Fill).resolve(Size::ZERO);
@@ -49,7 +49,8 @@ mod rainbow {
 
         fn draw(
             &self,
-            renderer: &mut Renderer<B>,
+            renderer: &mut Renderer<B, T>,
+            _theme: &T,
             _style: &renderer::Style,
             layout: Layout<'_>,
             cursor_position: Point,
@@ -147,11 +148,11 @@ mod rainbow {
         }
     }
 
-    impl<'a, Message, B> Into<Element<'a, Message, Renderer<B>>> for Rainbow
+    impl<'a, Message, B, T> Into<Element<'a, Message, Renderer<B, T>>> for Rainbow
     where
         B: Backend,
     {
-        fn into(self) -> Element<'a, Message, Renderer<B>> {
+        fn into(self) -> Element<'a, Message, Renderer<B, T>> {
             Element::new(self)
         }
     }
diff --git a/examples/integration_opengl/src/main.rs b/examples/integration_opengl/src/main.rs
index 1007b90f..cd46e9fd 100644
--- a/examples/integration_opengl/src/main.rs
+++ b/examples/integration_opengl/src/main.rs
@@ -125,6 +125,7 @@ pub fn main() {
                             viewport.scale_factor(),
                         ),
                         &mut renderer,
+                        &iced_glow::Theme::Dark,
                         &mut clipboard,
                         &mut debug,
                     );
diff --git a/examples/integration_wgpu/src/main.rs b/examples/integration_wgpu/src/main.rs
index 045ee0d3..76f35eef 100644
--- a/examples/integration_wgpu/src/main.rs
+++ b/examples/integration_wgpu/src/main.rs
@@ -188,6 +188,7 @@ pub fn main() {
                             viewport.scale_factor(),
                         ),
                         &mut renderer,
+                        &iced_wgpu::Theme::Dark,
                         &mut clipboard,
                         &mut debug,
                     );
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 2962ca25..4c955b6a 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -4,6 +4,7 @@ use iced::executor;
 use iced::keyboard;
 use iced::pane_grid::{self, PaneGrid};
 use iced::scrollable::{self, Scrollable};
+use iced::theme::{self, Theme};
 use iced::{
     Application, Color, Column, Command, Container, Element, Length, Row,
     Settings, Size, Subscription, Text,
@@ -36,6 +37,7 @@ enum Message {
 
 impl Application for Example {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -171,7 +173,7 @@ impl Application for Example {
             let text = if *is_pinned { "Unpin" } else { "Pin" };
             let pin_button = Button::new(pin_button, Text::new(text).size(14))
                 .on_press(Message::TogglePin(id))
-                .style(style::Button::Pin)
+                .style(theme::Button::Secondary)
                 .padding(3);
 
             let title = Row::with_children(vec![
@@ -309,7 +311,7 @@ impl Content {
             ..
         } = self;
 
-        let button = |state, label, message, style| {
+        let button = |state, label, message| {
             Button::new(
                 state,
                 Text::new(label)
@@ -320,7 +322,6 @@ impl Content {
             .width(Length::Fill)
             .padding(8)
             .on_press(message)
-            .style(style)
         };
 
         let mut controls = Column::new()
@@ -330,22 +331,18 @@ impl Content {
                 split_horizontally,
                 "Split horizontally",
                 Message::Split(pane_grid::Axis::Horizontal, pane),
-                style::Button::Primary,
             ))
             .push(button(
                 split_vertically,
                 "Split vertically",
                 Message::Split(pane_grid::Axis::Vertical, pane),
-                style::Button::Primary,
             ));
 
         if total_panes > 1 && !is_pinned {
-            controls = controls.push(button(
-                close,
-                "Close",
-                Message::Close(pane),
-                style::Button::Destructive,
-            ));
+            controls = controls.push(
+                button(close, "Close", Message::Close(pane))
+                    .style(theme::Button::Destructive),
+            );
         }
 
         let content = Scrollable::new(scroll)
@@ -379,8 +376,9 @@ impl Controls {
     ) -> Element<Message> {
         let mut button =
             Button::new(&mut self.close, Text::new("Close").size(14))
-                .style(style::Button::Control)
+                .style(theme::Button::Destructive)
                 .padding(3);
+
         if total_panes > 1 && !is_pinned {
             button = button.on_press(Message::Close(pane));
         }
@@ -389,8 +387,7 @@ impl Controls {
 }
 
 mod style {
-    use crate::PANE_ID_COLOR_FOCUSED;
-    use iced::{button, container, Background, Color, Vector};
+    use iced::{container, Background, Color};
 
     const SURFACE: Color = Color::from_rgb(
         0xF2 as f32 / 255.0,
@@ -398,18 +395,6 @@ mod style {
         0xF5 as f32 / 255.0,
     );
 
-    const ACTIVE: Color = Color::from_rgb(
-        0x72 as f32 / 255.0,
-        0x89 as f32 / 255.0,
-        0xDA as f32 / 255.0,
-    );
-
-    const HOVERED: Color = Color::from_rgb(
-        0x67 as f32 / 255.0,
-        0x7B as f32 / 255.0,
-        0xC4 as f32 / 255.0,
-    );
-
     pub enum TitleBar {
         Active,
         Focused,
@@ -449,51 +434,4 @@ mod style {
             }
         }
     }
-
-    pub enum Button {
-        Primary,
-        Destructive,
-        Control,
-        Pin,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            let (background, text_color) = match self {
-                Button::Primary => (Some(ACTIVE), Color::WHITE),
-                Button::Destructive => {
-                    (None, Color::from_rgb8(0xFF, 0x47, 0x47))
-                }
-                Button::Control => (Some(PANE_ID_COLOR_FOCUSED), Color::WHITE),
-                Button::Pin => (Some(ACTIVE), Color::WHITE),
-            };
-
-            button::Style {
-                text_color,
-                background: background.map(Background::Color),
-                border_radius: 5.0,
-                shadow_offset: Vector::new(0.0, 0.0),
-                ..button::Style::default()
-            }
-        }
-
-        fn hovered(&self) -> button::Style {
-            let active = self.active();
-
-            let background = match self {
-                Button::Primary => Some(HOVERED),
-                Button::Destructive => Some(Color {
-                    a: 0.2,
-                    ..active.text_color
-                }),
-                Button::Control => Some(PANE_ID_COLOR_FOCUSED),
-                Button::Pin => Some(HOVERED),
-            };
-
-            button::Style {
-                background: background.map(Background::Color),
-                ..active
-            }
-        }
-    }
 }
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index 85c26987..4b0e913d 100644
--- a/examples/pokedex/src/main.rs
+++ b/examples/pokedex/src/main.rs
@@ -1,6 +1,9 @@
+use iced::button;
+use iced::futures;
+use iced::image;
 use iced::{
-    button, futures, image, Alignment, Application, Button, Column, Command,
-    Container, Element, Length, Row, Settings, Text,
+    Alignment, Application, Button, Column, Command, Container, Element,
+    Length, Row, Settings, Text, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -26,8 +29,9 @@ enum Message {
 }
 
 impl Application for Pokedex {
-    type Executor = iced::executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = iced::executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Pokedex, Command<Message>) {
@@ -238,29 +242,5 @@ impl From<reqwest::Error> for Error {
 }
 
 fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
-    Button::new(state, Text::new(text))
-        .padding(10)
-        .style(style::Button::Primary)
-}
-
-mod style {
-    use iced::{button, Background, Color, Vector};
-
-    pub enum Button {
-        Primary,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            button::Style {
-                background: Some(Background::Color(match self {
-                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
-                })),
-                border_radius: 12.0,
-                shadow_offset: Vector::new(1.0, 1.0),
-                text_color: Color::WHITE,
-                ..button::Style::default()
-            }
-        }
-    }
+    Button::new(state, Text::new(text)).padding(10)
 }
diff --git a/examples/pure/component/src/main.rs b/examples/pure/component/src/main.rs
index b38d6fca..2f98f768 100644
--- a/examples/pure/component/src/main.rs
+++ b/examples/pure/component/src/main.rs
@@ -47,12 +47,13 @@ impl Sandbox for Component {
 }
 
 mod numeric_input {
-    use iced::pure::{button, row, text, text_input};
     use iced_lazy::pure::{self, Component};
     use iced_native::alignment::{self, Alignment};
     use iced_native::text;
+    use iced_native::widget;
     use iced_native::Length;
     use iced_pure::Element;
+    use iced_pure::{button, row, text, text_input};
 
     pub struct NumericInput<Message> {
         value: Option<u32>,
@@ -88,6 +89,9 @@ mod numeric_input {
     impl<Message, Renderer> Component<Message, Renderer> for NumericInput<Message>
     where
         Renderer: text::Renderer + 'static,
+        Renderer::Theme: widget::button::StyleSheet,
+        <Renderer::Theme as widget::button::StyleSheet>::Variant:
+            Default + Copy,
     {
         type State = ();
         type Event = Event;
@@ -158,6 +162,9 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: 'static + text::Renderer,
+        Renderer::Theme: widget::button::StyleSheet,
+        <Renderer::Theme as widget::button::StyleSheet>::Variant:
+            Default + Copy,
     {
         fn from(numeric_input: NumericInput<Message>) -> Self {
             pure::component(numeric_input)
diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs
index a3164701..a3e46888 100644
--- a/examples/pure/game_of_life/src/main.rs
+++ b/examples/pure/game_of_life/src/main.rs
@@ -9,6 +9,7 @@ use iced::pure::{
     button, checkbox, column, container, pick_list, row, slider, text,
 };
 use iced::pure::{Application, Element};
+use iced::theme::{self, Theme};
 use iced::time;
 use iced::window;
 use iced::{Alignment, Color, Command, Length, Settings, Subscription};
@@ -52,6 +53,7 @@ enum Message {
 
 impl Application for GameOfLife {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -168,10 +170,13 @@ fn view_controls<'a>(
         .spacing(10)
         .push(
             button(if is_playing { "Pause" } else { "Play" })
-                .on_press(Message::TogglePlayback)
-                .style(style::Button),
+                .on_press(Message::TogglePlayback),
         )
-        .push(button("Next").on_press(Message::Next).style(style::Button));
+        .push(
+            button("Next")
+                .on_press(Message::Next)
+                .style(theme::Button::Secondary),
+        );
 
     let speed_controls = row()
         .width(Length::Fill)
@@ -201,7 +206,11 @@ fn view_controls<'a>(
                 .text_size(16)
                 .style(style::PickList),
         )
-        .push(button("Clear").on_press(Message::Clear).style(style::Clear))
+        .push(
+            button("Clear")
+                .on_press(Message::Clear)
+                .style(theme::Button::Destructive),
+        )
         .into()
 }
 
diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs
index 1a64cf4a..dbd70c26 100644
--- a/examples/pure/game_of_life/src/style.rs
+++ b/examples/pure/game_of_life/src/style.rs
@@ -1,4 +1,4 @@
-use iced::{button, container, pick_list, slider, Background, Color};
+use iced::{container, pick_list, slider, Color};
 
 const ACTIVE: Color = Color::from_rgb(
     0x72 as f32 / 255.0,
@@ -6,12 +6,6 @@ const ACTIVE: Color = Color::from_rgb(
     0xDA as f32 / 255.0,
 );
 
-const DESTRUCTIVE: Color = Color::from_rgb(
-    0xC0 as f32 / 255.0,
-    0x47 as f32 / 255.0,
-    0x47 as f32 / 255.0,
-);
-
 const HOVERED: Color = Color::from_rgb(
     0x67 as f32 / 255.0,
     0x7B as f32 / 255.0,
@@ -35,67 +29,6 @@ impl container::StyleSheet for Container {
     }
 }
 
-pub struct Button;
-
-impl button::StyleSheet for Button {
-    fn active(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(ACTIVE)),
-            border_radius: 3.0,
-            text_color: Color::WHITE,
-            ..button::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(HOVERED)),
-            text_color: Color::WHITE,
-            ..self.active()
-        }
-    }
-
-    fn pressed(&self) -> button::Style {
-        button::Style {
-            border_width: 1.0,
-            border_color: Color::WHITE,
-            ..self.hovered()
-        }
-    }
-}
-
-pub struct Clear;
-
-impl button::StyleSheet for Clear {
-    fn active(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(DESTRUCTIVE)),
-            border_radius: 3.0,
-            text_color: Color::WHITE,
-            ..button::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> button::Style {
-        button::Style {
-            background: Some(Background::Color(Color {
-                a: 0.5,
-                ..DESTRUCTIVE
-            })),
-            text_color: Color::WHITE,
-            ..self.active()
-        }
-    }
-
-    fn pressed(&self) -> button::Style {
-        button::Style {
-            border_width: 1.0,
-            border_color: Color::WHITE,
-            ..self.hovered()
-        }
-    }
-}
-
 pub struct Slider;
 
 impl slider::StyleSheet for Slider {
diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs
index 65516956..2825a5c2 100644
--- a/examples/pure/pane_grid/src/main.rs
+++ b/examples/pure/pane_grid/src/main.rs
@@ -4,6 +4,7 @@ use iced::keyboard;
 use iced::pure::widget::pane_grid::{self, PaneGrid};
 use iced::pure::{button, column, container, row, scrollable, text};
 use iced::pure::{Application, Element};
+use iced::theme::{self, Theme};
 use iced::{Color, Command, Length, Settings, Size, Subscription};
 use iced_lazy::pure::responsive;
 use iced_native::{event, subscription, Event};
@@ -33,6 +34,7 @@ enum Message {
 
 impl Application for Example {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -161,7 +163,6 @@ impl Application for Example {
                 text(if pane.is_pinned { "Unpin" } else { "Pin" }).size(14),
             )
             .on_press(Message::TogglePin(id))
-            .style(style::Button::Pin)
             .padding(3);
 
             let title = row()
@@ -259,7 +260,7 @@ fn view_content<'a>(
     is_pinned: bool,
     size: Size,
 ) -> Element<'a, Message> {
-    let button = |label, message, style| {
+    let button = |label, message| {
         button(
             text(label)
                 .width(Length::Fill)
@@ -269,7 +270,6 @@ fn view_content<'a>(
         .width(Length::Fill)
         .padding(8)
         .on_press(message)
-        .style(style)
     };
 
     let mut controls = column()
@@ -278,20 +278,17 @@ fn view_content<'a>(
         .push(button(
             "Split horizontally",
             Message::Split(pane_grid::Axis::Horizontal, pane),
-            style::Button::Primary,
         ))
         .push(button(
             "Split vertically",
             Message::Split(pane_grid::Axis::Vertical, pane),
-            style::Button::Primary,
         ));
 
     if total_panes > 1 && !is_pinned {
-        controls = controls.push(button(
-            "Close",
-            Message::Close(pane),
-            style::Button::Destructive,
-        ));
+        controls = controls.push(
+            button("Close", Message::Close(pane))
+                .style(theme::Button::Destructive),
+        );
     }
 
     let content = column()
@@ -315,7 +312,7 @@ fn view_controls<'a>(
     is_pinned: bool,
 ) -> Element<'a, Message> {
     let mut button = button(text("Close").size(14))
-        .style(style::Button::Control)
+        .style(theme::Button::Destructive)
         .padding(3);
 
     if total_panes > 1 && !is_pinned {
@@ -326,8 +323,7 @@ fn view_controls<'a>(
 }
 
 mod style {
-    use crate::PANE_ID_COLOR_FOCUSED;
-    use iced::{button, container, Background, Color, Vector};
+    use iced::{container, Background, Color};
 
     const SURFACE: Color = Color::from_rgb(
         0xF2 as f32 / 255.0,
@@ -335,18 +331,6 @@ mod style {
         0xF5 as f32 / 255.0,
     );
 
-    const ACTIVE: Color = Color::from_rgb(
-        0x72 as f32 / 255.0,
-        0x89 as f32 / 255.0,
-        0xDA as f32 / 255.0,
-    );
-
-    const HOVERED: Color = Color::from_rgb(
-        0x67 as f32 / 255.0,
-        0x7B as f32 / 255.0,
-        0xC4 as f32 / 255.0,
-    );
-
     pub enum TitleBar {
         Active,
         Focused,
@@ -386,51 +370,4 @@ mod style {
             }
         }
     }
-
-    pub enum Button {
-        Primary,
-        Destructive,
-        Control,
-        Pin,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            let (background, text_color) = match self {
-                Button::Primary => (Some(ACTIVE), Color::WHITE),
-                Button::Destructive => {
-                    (None, Color::from_rgb8(0xFF, 0x47, 0x47))
-                }
-                Button::Control => (Some(PANE_ID_COLOR_FOCUSED), Color::WHITE),
-                Button::Pin => (Some(ACTIVE), Color::WHITE),
-            };
-
-            button::Style {
-                text_color,
-                background: background.map(Background::Color),
-                border_radius: 5.0,
-                shadow_offset: Vector::new(0.0, 0.0),
-                ..button::Style::default()
-            }
-        }
-
-        fn hovered(&self) -> button::Style {
-            let active = self.active();
-
-            let background = match self {
-                Button::Primary => Some(HOVERED),
-                Button::Destructive => Some(Color {
-                    a: 0.2,
-                    ..active.text_color
-                }),
-                Button::Control => Some(PANE_ID_COLOR_FOCUSED),
-                Button::Pin => Some(HOVERED),
-            };
-
-            button::Style {
-                background: background.map(Background::Color),
-                ..active
-            }
-        }
-    }
 }
diff --git a/examples/pure/todos/src/main.rs b/examples/pure/todos/src/main.rs
index 6a6c6300..ea772def 100644
--- a/examples/pure/todos/src/main.rs
+++ b/examples/pure/todos/src/main.rs
@@ -4,6 +4,7 @@ use iced::pure::{
     button, checkbox, column, container, row, scrollable, text, text_input,
     Application, Element,
 };
+use iced::theme::{self, Theme};
 use iced::window;
 use iced::{Command, Font, Length, Settings};
 use serde::{Deserialize, Serialize};
@@ -44,8 +45,9 @@ enum Message {
 }
 
 impl Application for Todos {
-    type Executor = iced::executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = iced::executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Todos, Command<Message>) {
@@ -287,7 +289,7 @@ impl Task {
                         button(edit_icon())
                             .on_press(TaskMessage::Edit)
                             .padding(10)
-                            .style(style::Button::Icon),
+                            .style(theme::Button::Text),
                     )
                     .into()
             }
@@ -313,7 +315,7 @@ impl Task {
                         )
                         .on_press(TaskMessage::Delete)
                         .padding(10)
-                        .style(style::Button::Destructive),
+                        .style(theme::Button::Destructive),
                     )
                     .into()
             }
@@ -328,9 +330,9 @@ fn view_controls(tasks: &[Task], current_filter: Filter) -> Element<Message> {
         let label = text(label).size(16);
 
         let button = button(label).style(if filter == current_filter {
-            style::Button::FilterSelected
+            theme::Button::Primary
         } else {
-            style::Button::FilterActive
+            theme::Button::Text
         });
 
         button.on_press(Message::FilterChanged(filter)).padding(8)
@@ -552,57 +554,3 @@ impl SavedState {
         Ok(())
     }
 }
-
-mod style {
-    use iced::{button, Background, Color, Vector};
-
-    pub enum Button {
-        FilterActive,
-        FilterSelected,
-        Icon,
-        Destructive,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            match self {
-                Button::FilterActive => button::Style::default(),
-                Button::FilterSelected => button::Style {
-                    background: Some(Background::Color(Color::from_rgb(
-                        0.2, 0.2, 0.7,
-                    ))),
-                    border_radius: 10.0,
-                    text_color: Color::WHITE,
-                    ..button::Style::default()
-                },
-                Button::Icon => button::Style {
-                    text_color: Color::from_rgb(0.5, 0.5, 0.5),
-                    ..button::Style::default()
-                },
-                Button::Destructive => button::Style {
-                    background: Some(Background::Color(Color::from_rgb(
-                        0.8, 0.2, 0.2,
-                    ))),
-                    border_radius: 5.0,
-                    text_color: Color::WHITE,
-                    shadow_offset: Vector::new(1.0, 1.0),
-                    ..button::Style::default()
-                },
-            }
-        }
-
-        fn hovered(&self) -> button::Style {
-            let active = self.active();
-
-            button::Style {
-                text_color: match self {
-                    Button::Icon => Color::from_rgb(0.2, 0.2, 0.7),
-                    Button::FilterActive => Color::from_rgb(0.2, 0.2, 0.7),
-                    _ => active.text_color,
-                },
-                shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
-                ..active
-            }
-        }
-    }
-}
diff --git a/examples/pure/tour/src/main.rs b/examples/pure/tour/src/main.rs
index a44d99f3..2002ad98 100644
--- a/examples/pure/tour/src/main.rs
+++ b/examples/pure/tour/src/main.rs
@@ -5,6 +5,7 @@ use iced::pure::{
     scrollable, slider, text, text_input, toggler, vertical_space,
 };
 use iced::pure::{Element, Sandbox};
+use iced::theme;
 use iced::{Color, Length, Settings};
 
 pub fn main() -> iced::Result {
@@ -55,7 +56,7 @@ impl Sandbox for Tour {
             controls = controls.push(
                 button("Back")
                     .on_press(Message::BackPressed)
-                    .style(style::Button::Secondary),
+                    .style(theme::Button::Secondary),
             );
         }
 
@@ -65,7 +66,7 @@ impl Sandbox for Tour {
             controls = controls.push(
                 button("Next")
                     .on_press(Message::NextPressed)
-                    .style(style::Button::Primary),
+                    .style(theme::Button::Primary),
             );
         }
 
@@ -669,35 +670,3 @@ pub enum Layout {
     Row,
     Column,
 }
-
-mod style {
-    use iced::{button, Background, Color, Vector};
-
-    pub enum Button {
-        Primary,
-        Secondary,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            button::Style {
-                background: Some(Background::Color(match self {
-                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
-                    Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
-                })),
-                border_radius: 12.0,
-                shadow_offset: Vector::new(1.0, 1.0),
-                text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
-                ..button::Style::default()
-            }
-        }
-
-        fn hovered(&self) -> button::Style {
-            button::Style {
-                text_color: Color::WHITE,
-                shadow_offset: Vector::new(1.0, 2.0),
-                ..self.active()
-            }
-        }
-    }
-}
diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs
index 12184dd1..308c8c39 100644
--- a/examples/solar_system/src/main.rs
+++ b/examples/solar_system/src/main.rs
@@ -6,10 +6,13 @@
 //! Inspired by the example found in the MDN docs[1].
 //!
 //! [1]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations#An_animated_solar_system
+use iced::canvas::{self, Cursor, Path, Stroke};
+use iced::executor;
+use iced::time;
+use iced::window;
 use iced::{
-    canvas::{self, Cursor, Path, Stroke},
-    executor, time, window, Application, Canvas, Color, Command, Element,
-    Length, Point, Rectangle, Settings, Size, Subscription, Vector,
+    Application, Canvas, Color, Command, Element, Length, Point, Rectangle,
+    Settings, Size, Subscription, Theme, Vector,
 };
 
 use std::time::Instant;
@@ -31,8 +34,9 @@ enum Message {
 }
 
 impl Application for SolarSystem {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
index 377d7a2d..b83b92ec 100644
--- a/examples/stopwatch/src/main.rs
+++ b/examples/stopwatch/src/main.rs
@@ -1,7 +1,13 @@
+use iced::alignment;
+use iced::button;
+use iced::executor;
+use iced::theme::{self, Theme};
+use iced::time;
 use iced::{
-    alignment, button, executor, time, Alignment, Application, Button, Column,
-    Command, Container, Element, Length, Row, Settings, Subscription, Text,
+    Alignment, Application, Button, Column, Command, Container, Element,
+    Length, Row, Settings, Subscription, Text,
 };
+
 use std::time::{Duration, Instant};
 
 pub fn main() -> iced::Result {
@@ -28,8 +34,9 @@ enum Message {
 }
 
 impl Application for Stopwatch {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Stopwatch, Command<Message>) {
@@ -99,7 +106,7 @@ impl Application for Stopwatch {
         ))
         .size(40);
 
-        let button = |state, label, style| {
+        let button = |state, label| {
             Button::new(
                 state,
                 Text::new(label)
@@ -107,21 +114,20 @@ impl Application for Stopwatch {
             )
             .padding(10)
             .width(Length::Units(80))
-            .style(style)
         };
 
         let toggle_button = {
-            let (label, color) = match self.state {
-                State::Idle => ("Start", style::Button::Primary),
-                State::Ticking { .. } => ("Stop", style::Button::Destructive),
+            let label = match self.state {
+                State::Idle => "Start",
+                State::Ticking { .. } => "Stop",
             };
 
-            button(&mut self.toggle, label, color).on_press(Message::Toggle)
+            button(&mut self.toggle, label).on_press(Message::Toggle)
         };
 
-        let reset_button =
-            button(&mut self.reset, "Reset", style::Button::Secondary)
-                .on_press(Message::Reset);
+        let reset_button = button(&mut self.reset, "Reset")
+            .style(theme::Button::Destructive)
+            .on_press(Message::Reset);
 
         let controls = Row::new()
             .spacing(20)
@@ -142,29 +148,3 @@ impl Application for Stopwatch {
             .into()
     }
 }
-
-mod style {
-    use iced::{button, Background, Color, Vector};
-
-    pub enum Button {
-        Primary,
-        Secondary,
-        Destructive,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            button::Style {
-                background: Some(Background::Color(match self {
-                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
-                    Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
-                    Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2),
-                })),
-                border_radius: 12.0,
-                shadow_offset: Vector::new(1.0, 1.0),
-                text_color: Color::WHITE,
-                ..button::Style::default()
-            }
-        }
-    }
-}
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index b4ef3e87..e6c4ac37 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -1,7 +1,11 @@
+use iced::button;
+use iced::scrollable;
+use iced::slider;
+use iced::text_input;
 use iced::{
-    button, scrollable, slider, text_input, Alignment, Button, Checkbox,
-    Column, Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox,
-    Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
+    Alignment, Button, Checkbox, Column, Container, Element, Length,
+    ProgressBar, Radio, Row, Rule, Sandbox, Scrollable, Settings, Slider,
+    Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -81,8 +85,7 @@ impl Sandbox for Styling {
 
         let button = Button::new(&mut self.button, Text::new("Submit"))
             .padding(10)
-            .on_press(Message::ButtonPressed)
-            .style(self.theme);
+            .on_press(Message::ButtonPressed);
 
         let slider = Slider::new(
             &mut self.slider,
@@ -156,8 +159,8 @@ impl Sandbox for Styling {
 
 mod style {
     use iced::{
-        button, checkbox, container, progress_bar, radio, rule, scrollable,
-        slider, text_input, toggler,
+        checkbox, container, progress_bar, radio, rule, scrollable, slider,
+        text_input, toggler,
     };
 
     #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -203,15 +206,6 @@ mod style {
         }
     }
 
-    impl<'a> From<Theme> for Box<dyn button::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => light::Button.into(),
-                Theme::Dark => dark::Button.into(),
-            }
-        }
-    }
-
     impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
         fn from(theme: Theme) -> Self {
             match theme {
@@ -266,36 +260,10 @@ mod style {
         }
     }
 
-    mod light {
-        use iced::{button, Color, Vector};
-
-        pub struct Button;
-
-        impl button::StyleSheet for Button {
-            fn active(&self) -> button::Style {
-                button::Style {
-                    background: Color::from_rgb(0.11, 0.42, 0.87).into(),
-                    border_radius: 12.0,
-                    shadow_offset: Vector::new(1.0, 1.0),
-                    text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
-                    ..button::Style::default()
-                }
-            }
-
-            fn hovered(&self) -> button::Style {
-                button::Style {
-                    text_color: Color::WHITE,
-                    shadow_offset: Vector::new(1.0, 2.0),
-                    ..self.active()
-                }
-            }
-        }
-    }
-
     mod dark {
         use iced::{
-            button, checkbox, container, progress_bar, radio, rule, scrollable,
-            slider, text_input, toggler, Color,
+            checkbox, container, progress_bar, radio, rule, scrollable, slider,
+            text_input, toggler, Color,
         };
 
         const SURFACE: Color = Color::from_rgb(
@@ -396,35 +364,6 @@ mod style {
             }
         }
 
-        pub struct Button;
-
-        impl button::StyleSheet for Button {
-            fn active(&self) -> button::Style {
-                button::Style {
-                    background: ACTIVE.into(),
-                    border_radius: 3.0,
-                    text_color: Color::WHITE,
-                    ..button::Style::default()
-                }
-            }
-
-            fn hovered(&self) -> button::Style {
-                button::Style {
-                    background: HOVERED.into(),
-                    text_color: Color::WHITE,
-                    ..self.active()
-                }
-            }
-
-            fn pressed(&self) -> button::Style {
-                button::Style {
-                    border_width: 1.0,
-                    border_color: Color::WHITE,
-                    ..self.hovered()
-                }
-            }
-        }
-
         pub struct Scrollable;
 
         impl scrollable::StyleSheet for Scrollable {
diff --git a/examples/system_information/src/main.rs b/examples/system_information/src/main.rs
index 560220b8..9e6a2f61 100644
--- a/examples/system_information/src/main.rs
+++ b/examples/system_information/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
     button, executor, system, Application, Button, Column, Command, Container,
-    Element, Length, Settings, Text,
+    Element, Length, Settings, Text, Theme,
 };
 
 use bytesize::ByteSize;
@@ -25,6 +25,7 @@ enum Message {
 
 impl Application for Example {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs
index 0b889407..453cddc3 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -2,6 +2,7 @@ use iced::alignment::{self, Alignment};
 use iced::button::{self, Button};
 use iced::scrollable::{self, Scrollable};
 use iced::text_input::{self, TextInput};
+use iced::theme::{self, Theme};
 use iced::{
     Application, Checkbox, Column, Command, Container, Element, Font, Length,
     Row, Settings, Text,
@@ -42,6 +43,7 @@ enum Message {
 
 impl Application for Todos {
     type Executor = iced::executor::Default;
+    type Theme = Theme;
     type Message = Message;
     type Flags = ();
 
@@ -304,7 +306,7 @@ impl Task {
                         Button::new(edit_button, edit_icon())
                             .on_press(TaskMessage::Edit)
                             .padding(10)
-                            .style(style::Button::Icon),
+                            .style(theme::Button::Text),
                     )
                     .into()
             }
@@ -335,7 +337,7 @@ impl Task {
                         )
                         .on_press(TaskMessage::Delete)
                         .padding(10)
-                        .style(style::Button::Destructive),
+                        .style(theme::Button::Destructive),
                     )
                     .into()
             }
@@ -364,9 +366,9 @@ impl Controls {
             let label = Text::new(label).size(16);
             let button =
                 Button::new(state, label).style(if filter == current_filter {
-                    style::Button::FilterSelected
+                    theme::Button::Primary
                 } else {
-                    style::Button::FilterActive
+                    theme::Button::Text
                 });
 
             button.on_press(Message::FilterChanged(filter)).padding(8)
@@ -599,57 +601,3 @@ impl SavedState {
         Ok(())
     }
 }
-
-mod style {
-    use iced::{button, Background, Color, Vector};
-
-    pub enum Button {
-        FilterActive,
-        FilterSelected,
-        Icon,
-        Destructive,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            match self {
-                Button::FilterActive => button::Style::default(),
-                Button::FilterSelected => button::Style {
-                    background: Some(Background::Color(Color::from_rgb(
-                        0.2, 0.2, 0.7,
-                    ))),
-                    border_radius: 10.0,
-                    text_color: Color::WHITE,
-                    ..button::Style::default()
-                },
-                Button::Icon => button::Style {
-                    text_color: Color::from_rgb(0.5, 0.5, 0.5),
-                    ..button::Style::default()
-                },
-                Button::Destructive => button::Style {
-                    background: Some(Background::Color(Color::from_rgb(
-                        0.8, 0.2, 0.2,
-                    ))),
-                    border_radius: 5.0,
-                    text_color: Color::WHITE,
-                    shadow_offset: Vector::new(1.0, 1.0),
-                    ..button::Style::default()
-                },
-            }
-        }
-
-        fn hovered(&self) -> button::Style {
-            let active = self.active();
-
-            button::Style {
-                text_color: match self {
-                    Button::Icon => Color::from_rgb(0.2, 0.2, 0.7),
-                    Button::FilterActive => Color::from_rgb(0.2, 0.2, 0.7),
-                    _ => active.text_color,
-                },
-                shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
-                ..active
-            }
-        }
-    }
-}
diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index 2024d25a..8bdc7f1d 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -1,7 +1,13 @@
+use iced::alignment;
+use iced::button;
+use iced::scrollable;
+use iced::slider;
+use iced::text_input;
+use iced::theme;
 use iced::{
-    alignment, button, scrollable, slider, text_input, Button, Checkbox, Color,
-    Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox,
-    Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
+    Button, Checkbox, Color, Column, Container, ContentFit, Element, Image,
+    Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Space, Text,
+    TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -64,7 +70,7 @@ impl Sandbox for Tour {
             controls = controls.push(
                 button(back_button, "Back")
                     .on_press(Message::BackPressed)
-                    .style(style::Button::Secondary),
+                    .style(theme::Button::Secondary),
             );
         }
 
@@ -74,7 +80,7 @@ impl Sandbox for Tour {
             controls = controls.push(
                 button(next_button, "Next")
                     .on_press(Message::NextPressed)
-                    .style(style::Button::Primary),
+                    .style(theme::Button::Primary),
             );
         }
 
@@ -818,36 +824,3 @@ pub enum Layout {
     Row,
     Column,
 }
-
-mod style {
-    use iced::button;
-    use iced::{Background, Color, Vector};
-
-    pub enum Button {
-        Primary,
-        Secondary,
-    }
-
-    impl button::StyleSheet for Button {
-        fn active(&self) -> button::Style {
-            button::Style {
-                background: Some(Background::Color(match self {
-                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
-                    Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
-                })),
-                border_radius: 12.0,
-                shadow_offset: Vector::new(1.0, 1.0),
-                text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
-                ..button::Style::default()
-            }
-        }
-
-        fn hovered(&self) -> button::Style {
-            button::Style {
-                text_color: Color::WHITE,
-                shadow_offset: Vector::new(1.0, 2.0),
-                ..self.active()
-            }
-        }
-    }
-}
diff --git a/examples/url_handler/src/main.rs b/examples/url_handler/src/main.rs
index ee2d249a..b544c30d 100644
--- a/examples/url_handler/src/main.rs
+++ b/examples/url_handler/src/main.rs
@@ -1,6 +1,7 @@
+use iced::executor;
 use iced::{
-    executor, Application, Command, Container, Element, Length, Settings,
-    Subscription, Text,
+    Application, Command, Container, Element, Length, Settings, Subscription,
+    Text, Theme,
 };
 use iced_native::{
     event::{MacOS, PlatformSpecific},
@@ -22,8 +23,9 @@ enum Message {
 }
 
 impl Application for App {
-    type Executor = executor::Default;
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (App, Command<Message>) {
diff --git a/examples/websocket/src/main.rs b/examples/websocket/src/main.rs
index c03a9f3a..65120710 100644
--- a/examples/websocket/src/main.rs
+++ b/examples/websocket/src/main.rs
@@ -7,7 +7,7 @@ use iced::scrollable::{self, Scrollable};
 use iced::text_input::{self, TextInput};
 use iced::{
     Application, Color, Column, Command, Container, Element, Length, Row,
-    Settings, Subscription, Text,
+    Settings, Subscription, Text, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -34,6 +34,7 @@ enum Message {
 
 impl Application for WebSocket {
     type Message = Message;
+    type Theme = Theme;
     type Flags = ();
     type Executor = executor::Default;
 
diff --git a/glow/src/lib.rs b/glow/src/lib.rs
index d7c0854d..043c5b13 100644
--- a/glow/src/lib.rs
+++ b/glow/src/lib.rs
@@ -30,6 +30,7 @@ pub use settings::Settings;
 pub(crate) use iced_graphics::Transformation;
 
 pub use iced_graphics::{Error, Viewport};
+pub use iced_native::Theme;
 
 pub use iced_native::alignment;
 pub use iced_native::{Alignment, Background, Color, Command, Length, Vector};
@@ -38,4 +39,5 @@ pub use iced_native::{Alignment, Background, Color, Command, Length, Vector};
 ///
 /// [`glow`]: https://github.com/grovesNL/glow
 /// [`iced`]: https://github.com/iced-rs/iced
-pub type Renderer = iced_graphics::Renderer<Backend>;
+pub type Renderer<Theme = iced_native::Theme> =
+    iced_graphics::Renderer<Backend, Theme>;
diff --git a/glow/src/window/compositor.rs b/glow/src/window/compositor.rs
index 622d7fc0..f6afaa68 100644
--- a/glow/src/window/compositor.rs
+++ b/glow/src/window/compositor.rs
@@ -1,18 +1,21 @@
 use crate::{Backend, Color, Error, Renderer, Settings, Viewport};
 
-use core::ffi::c_void;
 use glow::HasContext;
 use iced_graphics::{compositor, Antialiasing, Size};
 
+use core::ffi::c_void;
+use std::marker::PhantomData;
+
 /// A window graphics backend for iced powered by `glow`.
 #[allow(missing_debug_implementations)]
-pub struct Compositor {
+pub struct Compositor<Theme> {
     gl: glow::Context,
+    theme: PhantomData<Theme>,
 }
 
-impl iced_graphics::window::GLCompositor for Compositor {
+impl<Theme> iced_graphics::window::GLCompositor for Compositor<Theme> {
     type Settings = Settings;
-    type Renderer = Renderer;
+    type Renderer = Renderer<Theme>;
 
     unsafe fn new(
         settings: Self::Settings,
@@ -46,7 +49,13 @@ impl iced_graphics::window::GLCompositor for Compositor {
 
         let renderer = Renderer::new(Backend::new(&gl, settings));
 
-        Ok((Self { gl }, renderer))
+        Ok((
+            Self {
+                gl,
+                theme: PhantomData,
+            },
+            renderer,
+        ))
     }
 
     fn sample_count(settings: &Settings) -> u32 {
diff --git a/glutin/src/application.rs b/glutin/src/application.rs
index dbc9b580..d93059e5 100644
--- a/glutin/src/application.rs
+++ b/glutin/src/application.rs
@@ -209,6 +209,8 @@ async fn run_instance<A, E, C>(
 
     let mut state = application::State::new(&application, context.window());
     let mut viewport_version = state.viewport_version();
+    let theme = application.theme();
+
     let mut user_interface =
         ManuallyDrop::new(application::build_user_interface(
             &mut application,
@@ -288,8 +290,11 @@ async fn run_instance<A, E, C>(
                 }
 
                 debug.draw_started();
-                let new_mouse_interaction =
-                    user_interface.draw(&mut renderer, state.cursor_position());
+                let new_mouse_interaction = user_interface.draw(
+                    &mut renderer,
+                    &theme,
+                    state.cursor_position(),
+                );
                 debug.draw_finished();
 
                 if new_mouse_interaction != mouse_interaction {
@@ -341,8 +346,11 @@ async fn run_instance<A, E, C>(
                     debug.layout_finished();
 
                     debug.draw_started();
-                    let new_mouse_interaction = user_interface
-                        .draw(&mut renderer, state.cursor_position());
+                    let new_mouse_interaction = user_interface.draw(
+                        &mut renderer,
+                        &theme,
+                        state.cursor_position(),
+                    );
                     debug.draw_finished();
 
                     if new_mouse_interaction != mouse_interaction {
diff --git a/graphics/src/renderer.rs b/graphics/src/renderer.rs
index cb31ea5f..3c19fbfb 100644
--- a/graphics/src/renderer.rs
+++ b/graphics/src/renderer.rs
@@ -10,19 +10,23 @@ use iced_native::{Background, Element, Font, Point, Rectangle, Size};
 
 pub use iced_native::renderer::Style;
 
+use std::marker::PhantomData;
+
 /// A backend-agnostic renderer that supports all the built-in widgets.
 #[derive(Debug)]
-pub struct Renderer<B: Backend> {
+pub struct Renderer<B: Backend, Theme> {
     backend: B,
     primitives: Vec<Primitive>,
+    theme: PhantomData<Theme>,
 }
 
-impl<B: Backend> Renderer<B> {
+impl<B: Backend, T> Renderer<B, T> {
     /// Creates a new [`Renderer`] from the given [`Backend`].
     pub fn new(backend: B) -> Self {
         Self {
             backend,
             primitives: Vec::new(),
+            theme: PhantomData,
         }
     }
 
@@ -43,10 +47,12 @@ impl<B: Backend> Renderer<B> {
     }
 }
 
-impl<B> iced_native::Renderer for Renderer<B>
+impl<B, T> iced_native::Renderer for Renderer<B, T>
 where
     B: Backend,
 {
+    type Theme = T;
+
     fn layout<'a, Message>(
         &mut self,
         element: &Element<'a, Message, Self>,
@@ -114,7 +120,7 @@ where
     }
 }
 
-impl<B> text::Renderer for Renderer<B>
+impl<B, T> text::Renderer for Renderer<B, T>
 where
     B: Backend + backend::Text,
 {
@@ -171,7 +177,7 @@ where
     }
 }
 
-impl<B> image::Renderer for Renderer<B>
+impl<B, T> image::Renderer for Renderer<B, T>
 where
     B: Backend + backend::Image,
 {
@@ -186,7 +192,7 @@ where
     }
 }
 
-impl<B> svg::Renderer for Renderer<B>
+impl<B, T> svg::Renderer for Renderer<B, T>
 where
     B: Backend + backend::Svg,
 {
diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs
index 23444b2b..0de08b01 100644
--- a/graphics/src/widget/canvas.rs
+++ b/graphics/src/widget/canvas.rs
@@ -127,7 +127,7 @@ impl<Message, P: Program<Message>> Canvas<Message, P> {
     }
 }
 
-impl<Message, P, B> Widget<Message, Renderer<B>> for Canvas<Message, P>
+impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, P>
 where
     P: Program<Message>,
     B: Backend,
@@ -142,7 +142,7 @@ where
 
     fn layout(
         &self,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
         limits: &layout::Limits,
     ) -> layout::Node {
         let limits = limits.width(self.width).height(self.height);
@@ -156,7 +156,7 @@ where
         event: iced_native::Event,
         layout: Layout<'_>,
         cursor_position: Point,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
         _clipboard: &mut dyn Clipboard,
         shell: &mut Shell<'_, Message>,
     ) -> event::Status {
@@ -193,7 +193,7 @@ where
         layout: Layout<'_>,
         cursor_position: Point,
         _viewport: &Rectangle,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
     ) -> mouse::Interaction {
         let bounds = layout.bounds();
         let cursor = Cursor::from_window_position(cursor_position);
@@ -203,7 +203,8 @@ where
 
     fn draw(
         &self,
-        renderer: &mut Renderer<B>,
+        renderer: &mut Renderer<B, T>,
+        _theme: &T,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -233,14 +234,16 @@ where
     }
 }
 
-impl<'a, Message, P, B> From<Canvas<Message, P>>
-    for Element<'a, Message, Renderer<B>>
+impl<'a, Message, P, B, T> From<Canvas<Message, P>>
+    for Element<'a, Message, Renderer<B, T>>
 where
     Message: 'static,
     P: Program<Message> + 'a,
     B: Backend,
 {
-    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer<B>> {
+    fn from(
+        canvas: Canvas<Message, P>,
+    ) -> Element<'a, Message, Renderer<B, T>> {
         Element::new(canvas)
     }
 }
diff --git a/graphics/src/widget/pure/canvas.rs b/graphics/src/widget/pure/canvas.rs
index 2e3e7ede..d53b20f6 100644
--- a/graphics/src/widget/pure/canvas.rs
+++ b/graphics/src/widget/pure/canvas.rs
@@ -103,7 +103,7 @@ where
     }
 }
 
-impl<Message, P, B> Widget<Message, Renderer<B>> for Canvas<Message, P>
+impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, P>
 where
     P: Program<Message>,
     B: Backend,
@@ -126,7 +126,7 @@ where
 
     fn layout(
         &self,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
         limits: &layout::Limits,
     ) -> layout::Node {
         let limits = limits.width(self.width).height(self.height);
@@ -141,7 +141,7 @@ where
         event: iced_native::Event,
         layout: Layout<'_>,
         cursor_position: Point,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
         _clipboard: &mut dyn Clipboard,
         shell: &mut Shell<'_, Message>,
     ) -> event::Status {
@@ -181,7 +181,7 @@ where
         layout: Layout<'_>,
         cursor_position: Point,
         _viewport: &Rectangle,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
     ) -> mouse::Interaction {
         let bounds = layout.bounds();
         let cursor = Cursor::from_window_position(cursor_position);
@@ -193,7 +193,8 @@ where
     fn draw(
         &self,
         tree: &Tree,
-        renderer: &mut Renderer<B>,
+        renderer: &mut Renderer<B, T>,
+        _theme: &T,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -224,14 +225,16 @@ where
     }
 }
 
-impl<'a, Message, P, B> From<Canvas<Message, P>>
-    for Element<'a, Message, Renderer<B>>
+impl<'a, Message, P, B, T> From<Canvas<Message, P>>
+    for Element<'a, Message, Renderer<B, T>>
 where
     Message: 'a,
     P: Program<Message> + 'a,
     B: Backend,
 {
-    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer<B>> {
+    fn from(
+        canvas: Canvas<Message, P>,
+    ) -> Element<'a, Message, Renderer<B, T>> {
         Element::new(canvas)
     }
 }
diff --git a/graphics/src/widget/pure/qr_code.rs b/graphics/src/widget/pure/qr_code.rs
index 9d517374..23a8ceb6 100644
--- a/graphics/src/widget/pure/qr_code.rs
+++ b/graphics/src/widget/pure/qr_code.rs
@@ -9,24 +9,24 @@ use iced_native::{Length, Point, Rectangle};
 use iced_pure::widget::tree::Tree;
 use iced_pure::{Element, Widget};
 
-impl<'a, Message, B> Widget<Message, Renderer<B>> for QRCode<'a>
+impl<'a, Message, B, T> Widget<Message, Renderer<B, T>> for QRCode<'a>
 where
     B: Backend,
 {
     fn width(&self) -> Length {
-        <Self as iced_native::Widget<Message, Renderer<B>>>::width(self)
+        <Self as iced_native::Widget<Message, Renderer<B, T>>>::width(self)
     }
 
     fn height(&self) -> Length {
-        <Self as iced_native::Widget<Message, Renderer<B>>>::height(self)
+        <Self as iced_native::Widget<Message, Renderer<B, T>>>::height(self)
     }
 
     fn layout(
         &self,
-        renderer: &Renderer<B>,
+        renderer: &Renderer<B, T>,
         limits: &layout::Limits,
     ) -> layout::Node {
-        <Self as iced_native::Widget<Message, Renderer<B>>>::layout(
+        <Self as iced_native::Widget<Message, Renderer<B, T>>>::layout(
             self, renderer, limits,
         )
     }
@@ -34,15 +34,17 @@ where
     fn draw(
         &self,
         _tree: &Tree,
-        renderer: &mut Renderer<B>,
+        renderer: &mut Renderer<B, T>,
+        theme: &T,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        <Self as iced_native::Widget<Message, Renderer<B>>>::draw(
+        <Self as iced_native::Widget<Message, Renderer<B, T>>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -51,11 +53,12 @@ where
     }
 }
 
-impl<'a, Message, B> Into<Element<'a, Message, Renderer<B>>> for QRCode<'a>
+impl<'a, Message, B, T> Into<Element<'a, Message, Renderer<B, T>>>
+    for QRCode<'a>
 where
     B: Backend,
 {
-    fn into(self) -> Element<'a, Message, Renderer<B>> {
+    fn into(self) -> Element<'a, Message, Renderer<B, T>> {
         Element::new(self)
     }
 }
diff --git a/graphics/src/widget/qr_code.rs b/graphics/src/widget/qr_code.rs
index 907794b7..1eb862ba 100644
--- a/graphics/src/widget/qr_code.rs
+++ b/graphics/src/widget/qr_code.rs
@@ -47,7 +47,7 @@ impl<'a> QRCode<'a> {
     }
 }
 
-impl<'a, Message, B> Widget<Message, Renderer<B>> for QRCode<'a>
+impl<'a, Message, B, T> Widget<Message, Renderer<B, T>> for QRCode<'a>
 where
     B: Backend,
 {
@@ -61,7 +61,7 @@ where
 
     fn layout(
         &self,
-        _renderer: &Renderer<B>,
+        _renderer: &Renderer<B, T>,
         _limits: &layout::Limits,
     ) -> layout::Node {
         let side_length = (self.state.width + 2 * QUIET_ZONE) as f32
@@ -75,7 +75,8 @@ where
 
     fn draw(
         &self,
-        renderer: &mut Renderer<B>,
+        renderer: &mut Renderer<B, T>,
+        _theme: &T,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
@@ -127,11 +128,12 @@ where
     }
 }
 
-impl<'a, Message, B> Into<Element<'a, Message, Renderer<B>>> for QRCode<'a>
+impl<'a, Message, B, T> Into<Element<'a, Message, Renderer<B, T>>>
+    for QRCode<'a>
 where
     B: Backend,
 {
-    fn into(self) -> Element<'a, Message, Renderer<B>> {
+    fn into(self) -> Element<'a, Message, Renderer<B, T>> {
         Element::new(self)
     }
 }
diff --git a/lazy/src/component.rs b/lazy/src/component.rs
index 9e5937e9..3f22bc7d 100644
--- a/lazy/src/component.rs
+++ b/lazy/src/component.rs
@@ -206,13 +206,21 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
         self.with_element(|element| {
-            element.draw(renderer, style, layout, cursor_position, viewport);
+            element.draw(
+                renderer,
+                theme,
+                style,
+                layout,
+                cursor_position,
+                viewport,
+            );
         });
     }
 
@@ -337,12 +345,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
         self.with_overlay_maybe(|overlay| {
-            overlay.draw(renderer, style, layout, cursor_position);
+            overlay.draw(renderer, theme, style, layout, cursor_position);
         });
     }
 
diff --git a/lazy/src/pure/component.rs b/lazy/src/pure/component.rs
index 2971d2b7..b19913ae 100644
--- a/lazy/src/pure/component.rs
+++ b/lazy/src/pure/component.rs
@@ -233,6 +233,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -242,6 +243,7 @@ where
             element.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 style,
                 layout,
                 cursor_position,
@@ -376,12 +378,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
         self.with_overlay_maybe(|overlay| {
-            overlay.draw(renderer, style, layout, cursor_position);
+            overlay.draw(renderer, theme, style, layout, cursor_position);
         });
     }
 
diff --git a/lazy/src/pure/responsive.rs b/lazy/src/pure/responsive.rs
index e464d156..96b89fd6 100644
--- a/lazy/src/pure/responsive.rs
+++ b/lazy/src/pure/responsive.rs
@@ -53,7 +53,10 @@ struct Content<'a, Message, Renderer> {
     element: Element<'a, Message, Renderer>,
 }
 
-impl<'a, Message, Renderer> Content<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Content<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+{
     fn update(
         &mut self,
         tree: &mut Tree,
@@ -174,6 +177,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -191,6 +195,7 @@ where
                 element.as_widget().draw(
                     tree,
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
@@ -331,12 +336,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
         self.with_overlay_maybe(|overlay| {
-            overlay.draw(renderer, style, layout, cursor_position);
+            overlay.draw(renderer, theme, style, layout, cursor_position);
         });
     }
 
diff --git a/lazy/src/responsive.rs b/lazy/src/responsive.rs
index 20a80dac..86c8db6b 100644
--- a/lazy/src/responsive.rs
+++ b/lazy/src/responsive.rs
@@ -119,6 +119,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -129,6 +130,7 @@ where
         internal.resolve(renderer, |state, renderer, content| {
             content.draw(
                 renderer,
+                theme,
                 style,
                 state.layout(layout),
                 cursor_position,
@@ -356,12 +358,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
         self.with_overlay_maybe(|overlay| {
-            overlay.draw(renderer, style, layout, cursor_position);
+            overlay.draw(renderer, theme, style, layout, cursor_position);
         });
     }
 
diff --git a/native/src/element.rs b/native/src/element.rs
index 119b7892..425bddc2 100644
--- a/native/src/element.rs
+++ b/native/src/element.rs
@@ -244,13 +244,20 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        self.widget
-            .draw(renderer, style, layout, cursor_position, viewport)
+        self.widget.draw(
+            renderer,
+            theme,
+            style,
+            layout,
+            cursor_position,
+            viewport,
+        )
     }
 
     /// Returns the current [`mouse::Interaction`] of the [`Element`].
@@ -350,13 +357,20 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        self.widget
-            .draw(renderer, style, layout, cursor_position, viewport)
+        self.widget.draw(
+            renderer,
+            theme,
+            style,
+            layout,
+            cursor_position,
+            viewport,
+        )
     }
 
     fn mouse_interaction(
@@ -444,6 +458,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -471,6 +486,7 @@ where
 
         self.element.widget.draw(
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/native/src/lib.rs b/native/src/lib.rs
index db60976f..948fdff0 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -76,6 +76,7 @@ pub use iced_core::{
     Rectangle, Size, Vector,
 };
 pub use iced_futures::{executor, futures};
+pub use iced_style::theme;
 
 #[doc(no_inline)]
 pub use executor::Executor;
@@ -93,5 +94,6 @@ pub use renderer::Renderer;
 pub use runtime::Runtime;
 pub use shell::Shell;
 pub use subscription::Subscription;
+pub use theme::Theme;
 pub use user_interface::UserInterface;
 pub use widget::Widget;
diff --git a/native/src/overlay.rs b/native/src/overlay.rs
index 86878f6a..792d2905 100644
--- a/native/src/overlay.rs
+++ b/native/src/overlay.rs
@@ -34,6 +34,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/overlay/element.rs b/native/src/overlay/element.rs
index 24c0fe01..de2e1f37 100644
--- a/native/src/overlay/element.rs
+++ b/native/src/overlay/element.rs
@@ -94,11 +94,13 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
-        self.overlay.draw(renderer, style, layout, cursor_position)
+        self.overlay
+            .draw(renderer, theme, style, layout, cursor_position)
     }
 }
 
@@ -173,10 +175,12 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
-        self.content.draw(renderer, style, layout, cursor_position)
+        self.content
+            .draw(renderer, theme, style, layout, cursor_position)
     }
 }
diff --git a/native/src/overlay/menu.rs b/native/src/overlay/menu.rs
index 13fa7beb..78d65d13 100644
--- a/native/src/overlay/menu.rs
+++ b/native/src/overlay/menu.rs
@@ -241,6 +241,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -257,8 +258,14 @@ where
             self.style.background,
         );
 
-        self.container
-            .draw(renderer, style, layout, cursor_position, &bounds);
+        self.container.draw(
+            renderer,
+            theme,
+            style,
+            layout,
+            cursor_position,
+            &bounds,
+        );
     }
 }
 
@@ -389,6 +396,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/program/state.rs b/native/src/program/state.rs
index cb87a628..6ab6051b 100644
--- a/native/src/program/state.rs
+++ b/native/src/program/state.rs
@@ -86,6 +86,7 @@ where
         bounds: Size,
         cursor_position: Point,
         renderer: &mut P::Renderer,
+        theme: &<P::Renderer as crate::Renderer>::Theme,
         clipboard: &mut dyn Clipboard,
         debug: &mut Debug,
     ) -> Option<Command<P::Message>> {
@@ -115,7 +116,7 @@ where
         if messages.is_empty() {
             debug.draw_started();
             self.mouse_interaction =
-                user_interface.draw(renderer, cursor_position);
+                user_interface.draw(renderer, theme, cursor_position);
             debug.draw_finished();
 
             self.cache = Some(user_interface.into_cache());
@@ -147,7 +148,7 @@ where
 
             debug.draw_started();
             self.mouse_interaction =
-                user_interface.draw(renderer, cursor_position);
+                user_interface.draw(renderer, theme, cursor_position);
             debug.draw_finished();
 
             self.cache = Some(user_interface.into_cache());
diff --git a/native/src/renderer.rs b/native/src/renderer.rs
index 73d2f401..a7305a55 100644
--- a/native/src/renderer.rs
+++ b/native/src/renderer.rs
@@ -9,6 +9,9 @@ use crate::{Background, Color, Element, Rectangle, Vector};
 
 /// A component that can be used by widgets to draw themselves on a screen.
 pub trait Renderer: Sized {
+    /// The supported theme of the [`Renderer`].
+    type Theme;
+
     /// Lays out the elements of a user interface.
     ///
     /// You should override this if you need to perform any operations before or
diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs
index a5b2f277..c591f4e2 100644
--- a/native/src/renderer/null.rs
+++ b/native/src/renderer/null.rs
@@ -1,6 +1,6 @@
 use crate::renderer::{self, Renderer};
 use crate::text::{self, Text};
-use crate::{Background, Font, Point, Rectangle, Size, Vector};
+use crate::{Background, Font, Point, Rectangle, Size, Theme, Vector};
 
 /// A renderer that does nothing.
 ///
@@ -16,6 +16,8 @@ impl Null {
 }
 
 impl Renderer for Null {
+    type Theme = Theme;
+
     fn with_layer(&mut self, _bounds: Rectangle, _f: impl FnOnce(&mut Self)) {}
 
     fn with_translation(
diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs
index f80786aa..12f9827d 100644
--- a/native/src/user_interface.rs
+++ b/native/src/user_interface.rs
@@ -274,7 +274,7 @@ where
     /// [completing the last example](#example-1):
     ///
     /// ```no_run
-    /// use iced_native::{clipboard, Size, Point};
+    /// use iced_native::{clipboard, Size, Point, Theme};
     /// use iced_native::user_interface::{self, UserInterface};
     /// use iced_wgpu::Renderer;
     ///
@@ -322,7 +322,7 @@ where
     ///     );
     ///
     ///     // Draw the user interface
-    ///     let mouse_cursor = user_interface.draw(&mut renderer, cursor_position);
+    ///     let mouse_cursor = user_interface.draw(&mut renderer, &Theme::default(), cursor_position);
     ///
     ///     cache = user_interface.into_cache();
     ///
@@ -337,6 +337,7 @@ where
     pub fn draw(
         &mut self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         cursor_position: Point,
     ) -> mouse::Interaction {
         // TODO: Move to shell level (?)
@@ -368,6 +369,7 @@ where
 
         self.root.widget.draw(
             renderer,
+            theme,
             &renderer::Style::default(),
             Layout::new(&self.base),
             base_cursor,
@@ -409,6 +411,7 @@ where
                     renderer.with_layer(overlay_bounds, |renderer| {
                         overlay.draw(
                             renderer,
+                            theme,
                             &renderer::Style::default(),
                             Layout::new(layout),
                             cursor_position,
diff --git a/native/src/widget.rs b/native/src/widget.rs
index 8417dad1..9fe96e33 100644
--- a/native/src/widget.rs
+++ b/native/src/widget.rs
@@ -125,6 +125,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs
index b03d9f27..09c59cbe 100644
--- a/native/src/widget/button.rs
+++ b/native/src/widget/button.rs
@@ -55,20 +55,26 @@ pub use iced_style::button::{Style, StyleSheet};
 /// }
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct Button<'a, Message, Renderer> {
+pub struct Button<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     content: Element<'a, Message, Renderer>,
     on_press: Option<Message>,
     width: Length,
     height: Length,
     padding: Padding,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    variant: <Renderer::Theme as StyleSheet>::Variant,
 }
 
 impl<'a, Message, Renderer> Button<'a, Message, Renderer>
 where
     Message: Clone,
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+    <Renderer::Theme as StyleSheet>::Variant: Default,
 {
     /// Creates a new [`Button`] with some local [`State`] and the given
     /// content.
@@ -83,7 +89,7 @@ where
             width: Length::Shrink,
             height: Length::Shrink,
             padding: Padding::new(5),
-            style_sheet: Default::default(),
+            variant: <Renderer::Theme as StyleSheet>::Variant::default(),
         }
     }
 
@@ -112,12 +118,12 @@ where
         self
     }
 
-    /// Sets the style of the [`Button`].
+    /// Sets the style variant of this [`Button`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        variant: <Renderer::Theme as StyleSheet>::Variant,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.variant = variant;
         self
     }
 }
@@ -190,28 +196,29 @@ pub fn update<'a, Message: Clone>(
 }
 
 /// Draws a [`Button`].
-pub fn draw<'a, Renderer: crate::Renderer>(
+pub fn draw<'a, Renderer: crate::Renderer, Variant>(
     renderer: &mut Renderer,
     bounds: Rectangle,
     cursor_position: Point,
     is_enabled: bool,
-    style_sheet: &dyn StyleSheet,
+    style_sheet: &dyn StyleSheet<Variant = Variant>,
+    variation: Variant,
     state: impl FnOnce() -> &'a State,
 ) -> Style {
     let is_mouse_over = bounds.contains(cursor_position);
 
     let styling = if !is_enabled {
-        style_sheet.disabled()
+        style_sheet.disabled(variation)
     } else if is_mouse_over {
         let state = state();
 
         if state.is_pressed {
-            style_sheet.pressed()
+            style_sheet.pressed(variation)
         } else {
-            style_sheet.hovered()
+            style_sheet.hovered(variation)
         }
     } else {
-        style_sheet.active()
+        style_sheet.active(variation)
     };
 
     if styling.background.is_some() || styling.border_width > 0.0 {
@@ -287,6 +294,8 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Message: Clone,
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+    <Renderer::Theme as StyleSheet>::Variant: Copy,
 {
     fn width(&self) -> Length {
         self.width
@@ -354,6 +363,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -367,12 +377,14 @@ where
             bounds,
             cursor_position,
             self.on_press.is_some(),
-            self.style_sheet.as_ref(),
+            theme,
+            self.variant,
             || &self.state,
         );
 
         self.content.draw(
             renderer,
+            theme,
             &renderer::Style {
                 text_color: styling.text_color,
             },
@@ -397,6 +409,8 @@ impl<'a, Message, Renderer> From<Button<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
+    <Renderer::Theme as StyleSheet>::Variant: Copy,
 {
     fn from(
         button: Button<'a, Message, Renderer>,
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index b6d920df..290cb114 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -197,6 +197,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs
index 268218b1..01ddd9f1 100644
--- a/native/src/widget/column.rs
+++ b/native/src/widget/column.rs
@@ -187,13 +187,21 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
         for (child, layout) in self.children.iter().zip(layout.children()) {
-            child.draw(renderer, style, layout, cursor_position, viewport);
+            child.draw(
+                renderer,
+                theme,
+                style,
+                layout,
+                cursor_position,
+                viewport,
+            );
         }
     }
 
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index 0e7c301e..efcecb1e 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -209,6 +209,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -220,6 +221,7 @@ where
 
         self.content.draw(
             renderer,
+            theme,
             &renderer::Style {
                 text_color: style
                     .text_color
diff --git a/native/src/widget/image.rs b/native/src/widget/image.rs
index 8e7a28e5..1e753219 100644
--- a/native/src/widget/image.rs
+++ b/native/src/widget/image.rs
@@ -136,6 +136,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/image/viewer.rs b/native/src/widget/image/viewer.rs
index 840b88e5..1aa75aa0 100644
--- a/native/src/widget/image/viewer.rs
+++ b/native/src/widget/image/viewer.rs
@@ -303,6 +303,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/pane_grid.rs b/native/src/widget/pane_grid.rs
index 0ceec83e..fb056f79 100644
--- a/native/src/widget/pane_grid.rs
+++ b/native/src/widget/pane_grid.rs
@@ -754,6 +754,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -772,7 +773,14 @@ where
             self.style_sheet.as_ref(),
             self.elements.iter().map(|(pane, content)| (*pane, content)),
             |pane, renderer, style, layout, cursor_position, rectangle| {
-                pane.draw(renderer, style, layout, cursor_position, rectangle);
+                pane.draw(
+                    renderer,
+                    theme,
+                    style,
+                    layout,
+                    cursor_position,
+                    rectangle,
+                );
             },
         )
     }
diff --git a/native/src/widget/pane_grid/content.rs b/native/src/widget/pane_grid/content.rs
index 407f5458..6b3ff680 100644
--- a/native/src/widget/pane_grid/content.rs
+++ b/native/src/widget/pane_grid/content.rs
@@ -59,6 +59,7 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -81,6 +82,7 @@ where
 
             title_bar.draw(
                 renderer,
+                theme,
                 style,
                 title_bar_layout,
                 cursor_position,
@@ -90,14 +92,21 @@ where
 
             self.body.draw(
                 renderer,
+                theme,
                 style,
                 body_layout,
                 cursor_position,
                 viewport,
             );
         } else {
-            self.body
-                .draw(renderer, style, layout, cursor_position, viewport);
+            self.body.draw(
+                renderer,
+                theme,
+                style,
+                layout,
+                cursor_position,
+                viewport,
+            );
         }
     }
 
diff --git a/native/src/widget/pane_grid/title_bar.rs b/native/src/widget/pane_grid/title_bar.rs
index a10181af..1392d505 100644
--- a/native/src/widget/pane_grid/title_bar.rs
+++ b/native/src/widget/pane_grid/title_bar.rs
@@ -86,6 +86,7 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -108,6 +109,7 @@ where
 
         self.content.draw(
             renderer,
+            theme,
             &inherited_style,
             title_layout,
             cursor_position,
@@ -120,6 +122,7 @@ where
             if show_controls || self.always_show_controls {
                 controls.draw(
                     renderer,
+                    theme,
                     &inherited_style,
                     controls_layout,
                     cursor_position,
diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs
index 0374aef7..64a236e7 100644
--- a/native/src/widget/pick_list.rs
+++ b/native/src/widget/pick_list.rs
@@ -490,6 +490,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/progress_bar.rs b/native/src/widget/progress_bar.rs
index c26c38fa..2963451c 100644
--- a/native/src/widget/progress_bar.rs
+++ b/native/src/widget/progress_bar.rs
@@ -97,6 +97,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index 657ae786..5d936eaf 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -211,6 +211,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs
index 7a7c70c6..9cff74c6 100644
--- a/native/src/widget/row.rs
+++ b/native/src/widget/row.rs
@@ -187,13 +187,21 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
         for (child, layout) in self.children.iter().zip(layout.children()) {
-            child.draw(renderer, style, layout, cursor_position, viewport);
+            child.draw(
+                renderer,
+                theme,
+                style,
+                layout,
+                cursor_position,
+                viewport,
+            );
         }
     }
 
diff --git a/native/src/widget/rule.rs b/native/src/widget/rule.rs
index 69619583..fc3b0202 100644
--- a/native/src/widget/rule.rs
+++ b/native/src/widget/rule.rs
@@ -70,6 +70,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 8958f6da..5c59b8b2 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -702,6 +702,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -719,6 +720,7 @@ where
             |renderer, layout, cursor_position, viewport| {
                 self.content.draw(
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index f2e84ea9..3143aed9 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -410,6 +410,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/space.rs b/native/src/widget/space.rs
index 4135d1b8..81338306 100644
--- a/native/src/widget/space.rs
+++ b/native/src/widget/space.rs
@@ -60,6 +60,7 @@ where
     fn draw(
         &self,
         _renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         _style: &renderer::Style,
         _layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/svg.rs b/native/src/widget/svg.rs
index 008ab356..76b3eb8b 100644
--- a/native/src/widget/svg.rs
+++ b/native/src/widget/svg.rs
@@ -110,6 +110,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs
index a7855c30..5f7e9159 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -130,6 +130,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs
index 5ecd68e9..8230398c 100644
--- a/native/src/widget/text_input.rs
+++ b/native/src/widget/text_input.rs
@@ -812,6 +812,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
index 6d7592f3..c19b9a32 100644
--- a/native/src/widget/toggler.rs
+++ b/native/src/widget/toggler.rs
@@ -208,6 +208,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/tooltip.rs b/native/src/widget/tooltip.rs
index c929395f..141aa5c8 100644
--- a/native/src/widget/tooltip.rs
+++ b/native/src/widget/tooltip.rs
@@ -267,6 +267,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -274,6 +275,7 @@ where
     ) {
         self.content.draw(
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -299,6 +301,7 @@ where
                 Widget::<(), Renderer>::draw(
                     tooltip,
                     renderer,
+                    theme,
                     defaults,
                     layout,
                     cursor_position,
diff --git a/pure/src/element.rs b/pure/src/element.rs
index 5450db20..35c68716 100644
--- a/pure/src/element.rs
+++ b/pure/src/element.rs
@@ -25,7 +25,10 @@ pub struct Element<'a, Message, Renderer> {
 
 impl<'a, Message, Renderer> Element<'a, Message, Renderer> {
     /// Creates a new [`Element`] containing the given [`Widget`].
-    pub fn new(widget: impl Widget<Message, Renderer> + 'a) -> Self {
+    pub fn new(widget: impl Widget<Message, Renderer> + 'a) -> Self
+    where
+        Renderer: iced_native::Renderer,
+    {
         Self {
             widget: Box::new(widget),
         }
@@ -278,6 +281,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -286,6 +290,7 @@ where
         self.widget.draw(
             tree,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/helpers.rs b/pure/src/helpers.rs
index 746b807d..ad6f10b1 100644
--- a/pure/src/helpers.rs
+++ b/pure/src/helpers.rs
@@ -50,7 +50,12 @@ where
 /// [`Button`]: widget::Button
 pub fn button<'a, Message, Renderer>(
     content: impl Into<Element<'a, Message, Renderer>>,
-) -> widget::Button<'a, Message, Renderer> {
+) -> widget::Button<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::button::StyleSheet,
+    <Renderer::Theme as widget::button::StyleSheet>::Variant: Default,
+{
     widget::Button::new(content)
 }
 
diff --git a/pure/src/lib.rs b/pure/src/lib.rs
index fa5fd46f..95aa3098 100644
--- a/pure/src/lib.rs
+++ b/pure/src/lib.rs
@@ -174,7 +174,9 @@ impl State {
     fn diff<Message, Renderer>(
         &mut self,
         new_element: &Element<'_, Message, Renderer>,
-    ) {
+    ) where
+        Renderer: iced_native::Renderer,
+    {
         self.state_tree.diff(new_element);
     }
 }
@@ -224,6 +226,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -232,6 +235,7 @@ where
         self.element.as_widget().draw(
             &self.state.state_tree,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/overlay.rs b/pure/src/overlay.rs
index fecaa2ac..b82d8a67 100644
--- a/pure/src/overlay.rs
+++ b/pure/src/overlay.rs
@@ -14,7 +14,10 @@ pub fn from_children<'a, Message, Renderer>(
     tree: &'a mut Tree,
     layout: Layout<'_>,
     renderer: &Renderer,
-) -> Option<Element<'a, Message, Renderer>> {
+) -> Option<Element<'a, Message, Renderer>>
+where
+    Renderer: iced_native::Renderer,
+{
     children
         .iter()
         .zip(&mut tree.children)
diff --git a/pure/src/widget.rs b/pure/src/widget.rs
index cc04cc96..ab63f7cc 100644
--- a/pure/src/widget.rs
+++ b/pure/src/widget.rs
@@ -53,7 +53,10 @@ use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 ///
 /// If you want to build your own widgets, you will need to implement this
 /// trait.
-pub trait Widget<Message, Renderer> {
+pub trait Widget<Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+{
     /// Returns the width of the [`Widget`].
     fn width(&self) -> Length;
 
@@ -75,6 +78,7 @@ pub trait Widget<Message, Renderer> {
         &self,
         state: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/pure/src/widget/button.rs b/pure/src/widget/button.rs
index 456c2509..45f4a6aa 100644
--- a/pure/src/widget/button.rs
+++ b/pure/src/widget/button.rs
@@ -50,25 +50,34 @@ use button::State;
 ///     disabled_button().on_press(Message::ButtonPressed)
 /// }
 /// ```
-pub struct Button<'a, Message, Renderer> {
+pub struct Button<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     on_press: Option<Message>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
     width: Length,
     height: Length,
     padding: Padding,
+    variant: <Renderer::Theme as StyleSheet>::Variant,
 }
 
-impl<'a, Message, Renderer> Button<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Button<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
+    <Renderer::Theme as StyleSheet>::Variant: Default,
+{
     /// Creates a new [`Button`] with the given content.
     pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
         Button {
             content: content.into(),
             on_press: None,
-            style_sheet: Default::default(),
             width: Length::Shrink,
             height: Length::Shrink,
             padding: Padding::new(5),
+            variant: <Renderer::Theme as StyleSheet>::Variant::default(),
         }
     }
 
@@ -98,12 +107,12 @@ impl<'a, Message, Renderer> Button<'a, Message, Renderer> {
         self
     }
 
-    /// Sets the style of the [`Button`].
+    /// Sets the style variant of this [`Button`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        variant: <Renderer::Theme as StyleSheet>::Variant,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.variant = variant;
         self
     }
 }
@@ -113,6 +122,8 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Message: 'a + Clone,
     Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
+    <Renderer::Theme as StyleSheet>::Variant: Copy,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State>()
@@ -191,6 +202,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -204,13 +216,15 @@ where
             bounds,
             cursor_position,
             self.on_press.is_some(),
-            self.style_sheet.as_ref(),
+            theme,
+            self.variant,
             || tree.state.downcast_ref::<State>(),
         );
 
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             &renderer::Style {
                 text_color: styling.text_color,
             },
@@ -254,6 +268,8 @@ impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
 where
     Message: Clone + 'a,
     Renderer: iced_native::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
+    <Renderer::Theme as StyleSheet>::Variant: Copy,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/widget/checkbox.rs b/pure/src/widget/checkbox.rs
index 98f55a56..a6a6f8de 100644
--- a/pure/src/widget/checkbox.rs
+++ b/pure/src/widget/checkbox.rs
@@ -59,6 +59,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -67,6 +68,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/column.rs b/pure/src/widget/column.rs
index 7256f474..74d789a1 100644
--- a/pure/src/widget/column.rs
+++ b/pure/src/widget/column.rs
@@ -194,6 +194,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -208,6 +209,7 @@ where
             child.as_widget().draw(
                 state,
                 renderer,
+                theme,
                 style,
                 layout,
                 cursor_position,
diff --git a/pure/src/widget/container.rs b/pure/src/widget/container.rs
index 91db1f3f..0ec2351a 100644
--- a/pure/src/widget/container.rs
+++ b/pure/src/widget/container.rs
@@ -201,6 +201,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -213,6 +214,7 @@ where
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             &renderer::Style {
                 text_color: style
                     .text_color
diff --git a/pure/src/widget/image.rs b/pure/src/widget/image.rs
index ef764ec2..c42113dc 100644
--- a/pure/src/widget/image.rs
+++ b/pure/src/widget/image.rs
@@ -38,6 +38,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -46,6 +47,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/pane_grid.rs b/pure/src/widget/pane_grid.rs
index c532a6de..168fe12b 100644
--- a/pure/src/widget/pane_grid.rs
+++ b/pure/src/widget/pane_grid.rs
@@ -331,6 +331,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -360,6 +361,7 @@ where
                 content.draw(
                     tree,
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
diff --git a/pure/src/widget/pane_grid/content.rs b/pure/src/widget/pane_grid/content.rs
index e66ac40b..5069bd4a 100644
--- a/pure/src/widget/pane_grid/content.rs
+++ b/pure/src/widget/pane_grid/content.rs
@@ -89,6 +89,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -112,6 +113,7 @@ where
             title_bar.draw(
                 &tree.children[1],
                 renderer,
+                theme,
                 style,
                 title_bar_layout,
                 cursor_position,
@@ -122,6 +124,7 @@ where
             self.body.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 style,
                 body_layout,
                 cursor_position,
@@ -131,6 +134,7 @@ where
             self.body.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 style,
                 layout,
                 cursor_position,
diff --git a/pure/src/widget/pane_grid/title_bar.rs b/pure/src/widget/pane_grid/title_bar.rs
index 4a7c8c17..28a3d7fc 100644
--- a/pure/src/widget/pane_grid/title_bar.rs
+++ b/pure/src/widget/pane_grid/title_bar.rs
@@ -113,6 +113,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -136,6 +137,7 @@ where
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             &inherited_style,
             title_layout,
             cursor_position,
@@ -149,6 +151,7 @@ where
                 controls.as_widget().draw(
                     &tree.children[1],
                     renderer,
+                    theme,
                     &inherited_style,
                     controls_layout,
                     cursor_position,
diff --git a/pure/src/widget/pick_list.rs b/pure/src/widget/pick_list.rs
index 255e3681..78302a7d 100644
--- a/pure/src/widget/pick_list.rs
+++ b/pure/src/widget/pick_list.rs
@@ -181,6 +181,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        _theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/pure/src/widget/progress_bar.rs b/pure/src/widget/progress_bar.rs
index 3016a81a..47a299ac 100644
--- a/pure/src/widget/progress_bar.rs
+++ b/pure/src/widget/progress_bar.rs
@@ -57,6 +57,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -65,6 +66,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/radio.rs b/pure/src/widget/radio.rs
index 7c98c937..c92c8dbc 100644
--- a/pure/src/widget/radio.rs
+++ b/pure/src/widget/radio.rs
@@ -60,6 +60,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -68,6 +69,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/row.rs b/pure/src/widget/row.rs
index 0385b8bd..e747adfc 100644
--- a/pure/src/widget/row.rs
+++ b/pure/src/widget/row.rs
@@ -181,6 +181,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -195,6 +196,7 @@ where
             child.as_widget().draw(
                 state,
                 renderer,
+                theme,
                 style,
                 layout,
                 cursor_position,
diff --git a/pure/src/widget/rule.rs b/pure/src/widget/rule.rs
index ab8537ae..8e6af58e 100644
--- a/pure/src/widget/rule.rs
+++ b/pure/src/widget/rule.rs
@@ -57,6 +57,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -65,6 +66,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/scrollable.rs b/pure/src/widget/scrollable.rs
index 70e951ef..a0180dc0 100644
--- a/pure/src/widget/scrollable.rs
+++ b/pure/src/widget/scrollable.rs
@@ -171,6 +171,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -189,6 +190,7 @@ where
                 self.content.as_widget().draw(
                     &tree.children[0],
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
diff --git a/pure/src/widget/slider.rs b/pure/src/widget/slider.rs
index 4d8bbce4..2f934a48 100644
--- a/pure/src/widget/slider.rs
+++ b/pure/src/widget/slider.rs
@@ -195,6 +195,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/pure/src/widget/space.rs b/pure/src/widget/space.rs
index b408153b..7d95ebd7 100644
--- a/pure/src/widget/space.rs
+++ b/pure/src/widget/space.rs
@@ -56,6 +56,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -64,6 +65,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/svg.rs b/pure/src/widget/svg.rs
index 14180097..501d9bfa 100644
--- a/pure/src/widget/svg.rs
+++ b/pure/src/widget/svg.rs
@@ -36,6 +36,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -44,6 +45,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/text.rs b/pure/src/widget/text.rs
index 58a939c1..0a51b628 100644
--- a/pure/src/widget/text.rs
+++ b/pure/src/widget/text.rs
@@ -34,6 +34,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -42,6 +43,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/text_input.rs b/pure/src/widget/text_input.rs
index 57ad26d9..7d768513 100644
--- a/pure/src/widget/text_input.rs
+++ b/pure/src/widget/text_input.rs
@@ -190,6 +190,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/pure/src/widget/toggler.rs b/pure/src/widget/toggler.rs
index b9c5ec02..e08b5f47 100644
--- a/pure/src/widget/toggler.rs
+++ b/pure/src/widget/toggler.rs
@@ -38,6 +38,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -46,6 +47,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
diff --git a/pure/src/widget/tooltip.rs b/pure/src/widget/tooltip.rs
index 3887732a..15aa32fe 100644
--- a/pure/src/widget/tooltip.rs
+++ b/pure/src/widget/tooltip.rs
@@ -157,6 +157,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -165,6 +166,7 @@ where
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -191,6 +193,7 @@ where
                     tooltip,
                     &Tree::empty(),
                     renderer,
+                    theme,
                     defaults,
                     layout,
                     cursor_position,
diff --git a/pure/src/widget/tree.rs b/pure/src/widget/tree.rs
index 0bb3107a..2f876523 100644
--- a/pure/src/widget/tree.rs
+++ b/pure/src/widget/tree.rs
@@ -31,7 +31,10 @@ impl Tree {
     /// Creates a new [`Tree`] for the provided [`Element`].
     pub fn new<'a, Message, Renderer>(
         widget: impl Borrow<dyn Widget<Message, Renderer> + 'a>,
-    ) -> Self {
+    ) -> Self
+    where
+        Renderer: iced_native::Renderer,
+    {
         let widget = widget.borrow();
 
         Self {
@@ -52,7 +55,9 @@ impl Tree {
     pub fn diff<'a, Message, Renderer>(
         &mut self,
         new: impl Borrow<dyn Widget<Message, Renderer> + 'a>,
-    ) {
+    ) where
+        Renderer: iced_native::Renderer,
+    {
         if self.tag == new.borrow().tag() {
             new.borrow().diff(self)
         } else {
@@ -64,7 +69,9 @@ impl Tree {
     pub fn diff_children<'a, Message, Renderer>(
         &mut self,
         new_children: &[impl Borrow<dyn Widget<Message, Renderer> + 'a>],
-    ) {
+    ) where
+        Renderer: iced_native::Renderer,
+    {
         self.diff_children_custom(
             new_children,
             |tree, widget| tree.diff(widget.borrow()),
diff --git a/src/application.rs b/src/application.rs
index 11735b93..f05d2c4b 100644
--- a/src/application.rs
+++ b/src/application.rs
@@ -57,7 +57,7 @@ use crate::{Color, Command, Element, Executor, Settings, Subscription};
 /// says "Hello, world!":
 ///
 /// ```no_run
-/// use iced::{executor, Application, Command, Element, Settings, Text};
+/// use iced::{executor, Application, Command, Element, Settings, Text, Theme};
 ///
 /// pub fn main() -> iced::Result {
 ///     Hello::run(Settings::default())
@@ -67,8 +67,9 @@ use crate::{Color, Command, Element, Executor, Settings, Subscription};
 ///
 /// impl Application for Hello {
 ///     type Executor = executor::Default;
-///     type Message = ();
 ///     type Flags = ();
+///     type Message = ();
+///     type Theme = Theme;
 ///
 ///     fn new(_flags: ()) -> (Hello, Command<Self::Message>) {
 ///         (Hello, Command::none())
@@ -99,6 +100,9 @@ pub trait Application: Sized {
     /// The type of __messages__ your [`Application`] will produce.
     type Message: std::fmt::Debug + Send;
 
+    /// The theme of your [`Application`].
+    type Theme: Default;
+
     /// The data needed to initialize your [`Application`].
     type Flags;
 
@@ -129,6 +133,16 @@ pub trait Application: Sized {
     /// Any [`Command`] returned will be executed immediately in the background.
     fn update(&mut self, message: Self::Message) -> Command<Self::Message>;
 
+    /// Returns the widgets to display in the [`Application`].
+    ///
+    /// These widgets can produce __messages__ based on user interaction.
+    fn view(&mut self) -> Element<'_, Self::Message, Self::Theme>;
+
+    /// Returns the current [`Theme`] of the [`Application`].
+    fn theme(&self) -> Self::Theme {
+        Self::Theme::default()
+    }
+
     /// Returns the event [`Subscription`] for the current state of the
     /// application.
     ///
@@ -141,11 +155,6 @@ pub trait Application: Sized {
         Subscription::none()
     }
 
-    /// Returns the widgets to display in the [`Application`].
-    ///
-    /// These widgets can produce __messages__ based on user interaction.
-    fn view(&mut self) -> Element<'_, Self::Message>;
-
     /// Returns the current [`Application`] mode.
     ///
     /// The runtime will automatically transition your application if a new mode
@@ -213,7 +222,7 @@ pub trait Application: Sized {
         Ok(crate::runtime::application::run::<
             Instance<Self>,
             Self::Executor,
-            crate::renderer::window::Compositor,
+            crate::renderer::window::Compositor<Self::Theme>,
         >(settings.into(), renderer_settings)?)
     }
 }
@@ -224,14 +233,14 @@ impl<A> iced_winit::Program for Instance<A>
 where
     A: Application,
 {
-    type Renderer = crate::renderer::Renderer;
+    type Renderer = crate::renderer::Renderer<A::Theme>;
     type Message = A::Message;
 
     fn update(&mut self, message: Self::Message) -> Command<Self::Message> {
         self.0.update(message)
     }
 
-    fn view(&mut self) -> Element<'_, Self::Message> {
+    fn view(&mut self) -> Element<'_, Self::Message, A::Theme> {
         self.0.view()
     }
 }
@@ -252,6 +261,10 @@ where
         self.0.title()
     }
 
+    fn theme(&self) -> A::Theme {
+        self.0.theme()
+    }
+
     fn mode(&self) -> iced_winit::Mode {
         match self.0.mode() {
             window::Mode::Windowed => iced_winit::Mode::Windowed,
diff --git a/src/element.rs b/src/element.rs
index 8bad18c1..439a4508 100644
--- a/src/element.rs
+++ b/src/element.rs
@@ -1,5 +1,5 @@
 /// A generic widget.
 ///
 /// This is an alias of an `iced_native` element with a default `Renderer`.
-pub type Element<'a, Message> =
-    crate::runtime::Element<'a, Message, crate::renderer::Renderer>;
+pub type Element<'a, Message, Theme = iced_native::Theme> =
+    crate::runtime::Element<'a, Message, crate::Renderer<Theme>>;
diff --git a/src/lib.rs b/src/lib.rs
index 298beae3..df40ad3e 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -211,6 +211,8 @@ use iced_wgpu as renderer;
 #[cfg(feature = "glow")]
 use iced_glow as renderer;
 
+pub use iced_native::theme;
+
 #[doc(no_inline)]
 pub use widget::*;
 
@@ -222,6 +224,7 @@ pub use renderer::Renderer;
 pub use result::Result;
 pub use sandbox::Sandbox;
 pub use settings::Settings;
+pub use theme::Theme;
 
 pub use runtime::alignment;
 pub use runtime::futures;
diff --git a/src/pure.rs b/src/pure.rs
index 7785a104..b2b3ade7 100644
--- a/src/pure.rs
+++ b/src/pure.rs
@@ -108,5 +108,5 @@ pub use iced_pure::Widget;
 pub use iced_pure::{Pure, State};
 
 /// A generic, pure [`Widget`].
-pub type Element<'a, Message> =
-    iced_pure::Element<'a, Message, crate::Renderer>;
+pub type Element<'a, Message, Theme = crate::Theme> =
+    iced_pure::Element<'a, Message, crate::Renderer<Theme>>;
diff --git a/src/pure/application.rs b/src/pure/application.rs
index 5f400bea..77f68c9e 100644
--- a/src/pure/application.rs
+++ b/src/pure/application.rs
@@ -21,6 +21,9 @@ pub trait Application: Sized {
     /// The type of __messages__ your [`Application`] will produce.
     type Message: std::fmt::Debug + Send;
 
+    /// The theme of your [`Application`].
+    type Theme: Default;
+
     /// The data needed to initialize your [`Application`].
     type Flags;
 
@@ -51,6 +54,16 @@ pub trait Application: Sized {
     /// Any [`Command`] returned will be executed immediately in the background.
     fn update(&mut self, message: Self::Message) -> Command<Self::Message>;
 
+    /// Returns the widgets to display in the [`Application`].
+    ///
+    /// These widgets can produce __messages__ based on user interaction.
+    fn view(&self) -> pure::Element<'_, Self::Message, Self::Theme>;
+
+    /// Returns the current [`Theme`] of the [`Application`].
+    fn theme(&self) -> Self::Theme {
+        Self::Theme::default()
+    }
+
     /// Returns the event [`Subscription`] for the current state of the
     /// application.
     ///
@@ -63,11 +76,6 @@ pub trait Application: Sized {
         Subscription::none()
     }
 
-    /// Returns the widgets to display in the [`Application`].
-    ///
-    /// These widgets can produce __messages__ based on user interaction.
-    fn view(&self) -> pure::Element<'_, Self::Message>;
-
     /// Returns the current [`Application`] mode.
     ///
     /// The runtime will automatically transition your application if a new mode
@@ -137,6 +145,7 @@ where
     type Executor = A::Executor;
     type Message = A::Message;
     type Flags = A::Flags;
+    type Theme = A::Theme;
 
     fn new(flags: Self::Flags) -> (Self, Command<Self::Message>) {
         let (application, command) = A::new(flags);
@@ -162,12 +171,16 @@ where
         A::subscription(&self.application)
     }
 
-    fn view(&mut self) -> crate::Element<'_, Self::Message> {
+    fn view(&mut self) -> crate::Element<'_, Self::Message, Self::Theme> {
         let content = A::view(&self.application);
 
         Pure::new(&mut self.state, content).into()
     }
 
+    fn theme(&self) -> Self::Theme {
+        A::theme(&self.application)
+    }
+
     fn mode(&self) -> window::Mode {
         A::mode(&self.application)
     }
diff --git a/src/pure/sandbox.rs b/src/pure/sandbox.rs
index fbd1d7a8..207a32bd 100644
--- a/src/pure/sandbox.rs
+++ b/src/pure/sandbox.rs
@@ -1,5 +1,5 @@
 use crate::pure;
-use crate::{Color, Command, Error, Settings, Subscription};
+use crate::{Color, Command, Error, Settings, Subscription, Theme};
 
 /// A pure version of [`Sandbox`].
 ///
@@ -34,6 +34,16 @@ pub trait Sandbox {
     /// These widgets can produce __messages__ based on user interaction.
     fn view(&self) -> pure::Element<'_, Self::Message>;
 
+    /// Returns the current [`Theme`] of the [`Sandbox`].
+    ///
+    /// If you want to use your own custom theme type, you will have to use an
+    /// [`Application`].
+    ///
+    /// By default, it returns [`Theme::default`].
+    fn theme(&self) -> Theme {
+        Theme::default()
+    }
+
     /// Returns the background color of the [`Sandbox`].
     ///
     /// By default, it returns [`Color::WHITE`].
@@ -82,6 +92,7 @@ where
     type Executor = iced_futures::backend::null::Executor;
     type Flags = ();
     type Message = T::Message;
+    type Theme = Theme;
 
     fn new(_flags: ()) -> (Self, Command<T::Message>) {
         (T::new(), Command::none())
@@ -97,14 +108,18 @@ where
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<T::Message> {
-        Subscription::none()
-    }
-
     fn view(&self) -> pure::Element<'_, T::Message> {
         T::view(self)
     }
 
+    fn theme(&self) -> Self::Theme {
+        T::theme(self)
+    }
+
+    fn subscription(&self) -> Subscription<T::Message> {
+        Subscription::none()
+    }
+
     fn background_color(&self) -> Color {
         T::background_color(self)
     }
diff --git a/src/pure/widget.rs b/src/pure/widget.rs
index c84edde3..1c0a32a6 100644
--- a/src/pure/widget.rs
+++ b/src/pure/widget.rs
@@ -1,23 +1,24 @@
 //! Pure versions of the widgets.
 
 /// A container that distributes its contents vertically.
-pub type Column<'a, Message> =
-    iced_pure::widget::Column<'a, Message, crate::Renderer>;
+pub type Column<'a, Message, Theme = crate::Theme> =
+    iced_pure::widget::Column<'a, Message, crate::Renderer<Theme>>;
 
 /// A container that distributes its contents horizontally.
-pub type Row<'a, Message> =
-    iced_pure::widget::Row<'a, Message, crate::Renderer>;
+pub type Row<'a, Message, Theme = crate::Theme> =
+    iced_pure::widget::Row<'a, Message, crate::Renderer<Theme>>;
 
 /// A paragraph of text.
-pub type Text = iced_pure::widget::Text<crate::Renderer>;
+pub type Text<Theme = crate::Theme> =
+    iced_pure::widget::Text<crate::Renderer<Theme>>;
 
 pub mod button {
     //! Allow your users to perform actions by pressing a button.
     pub use iced_pure::widget::button::{Style, StyleSheet};
 
     /// A widget that produces a message when clicked.
-    pub type Button<'a, Message> =
-        iced_pure::widget::Button<'a, Message, crate::Renderer>;
+    pub type Button<'a, Message, Theme = crate::Theme> =
+        iced_pure::widget::Button<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod checkbox {
@@ -25,8 +26,8 @@ pub mod checkbox {
     pub use iced_pure::widget::checkbox::{Style, StyleSheet};
 
     /// A box that can be checked.
-    pub type Checkbox<'a, Message> =
-        iced_native::widget::Checkbox<'a, Message, crate::Renderer>;
+    pub type Checkbox<'a, Message, Theme> =
+        iced_native::widget::Checkbox<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod container {
@@ -34,8 +35,8 @@ pub mod container {
     pub use iced_pure::widget::container::{Style, StyleSheet};
 
     /// An element decorating some content.
-    pub type Container<'a, Message> =
-        iced_pure::widget::Container<'a, Message, crate::Renderer>;
+    pub type Container<'a, Message, Theme = crate::Theme> =
+        iced_pure::widget::Container<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod pane_grid {
@@ -57,16 +58,24 @@ pub mod pane_grid {
     /// to completely fill the space available.
     ///
     /// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
-    pub type PaneGrid<'a, Message> =
-        iced_pure::widget::PaneGrid<'a, Message, crate::Renderer>;
+    pub type PaneGrid<'a, Message, Theme> =
+        iced_pure::widget::PaneGrid<'a, Message, crate::Renderer<Theme>>;
 
     /// The content of a [`Pane`].
-    pub type Content<'a, Message> =
-        iced_pure::widget::pane_grid::Content<'a, Message, crate::Renderer>;
+    pub type Content<'a, Message, Theme> =
+        iced_pure::widget::pane_grid::Content<
+            'a,
+            Message,
+            crate::Renderer<Theme>,
+        >;
 
     /// The title bar of a [`Pane`].
-    pub type TitleBar<'a, Message> =
-        iced_pure::widget::pane_grid::TitleBar<'a, Message, crate::Renderer>;
+    pub type TitleBar<'a, Message, Theme> =
+        iced_pure::widget::pane_grid::TitleBar<
+            'a,
+            Message,
+            crate::Renderer<Theme>,
+        >;
 }
 
 pub mod pick_list {
@@ -75,8 +84,8 @@ pub mod pick_list {
     pub use iced_pure::widget::pick_list::{Style, StyleSheet};
 
     /// A widget allowing the selection of a single value from a list of options.
-    pub type PickList<'a, T, Message> =
-        iced_pure::widget::PickList<'a, T, Message, crate::Renderer>;
+    pub type PickList<'a, T, Message, Theme> =
+        iced_pure::widget::PickList<'a, T, Message, crate::Renderer<Theme>>;
 }
 
 pub mod radio {
@@ -84,8 +93,8 @@ pub mod radio {
     pub use iced_pure::widget::radio::{Style, StyleSheet};
 
     /// A circular button representing a choice.
-    pub type Radio<'a, Message> =
-        iced_pure::widget::Radio<'a, Message, crate::Renderer>;
+    pub type Radio<'a, Message, Theme> =
+        iced_pure::widget::Radio<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod scrollable {
@@ -94,8 +103,8 @@ pub mod scrollable {
 
     /// A widget that can vertically display an infinite amount of content
     /// with a scrollbar.
-    pub type Scrollable<'a, Message> =
-        iced_pure::widget::Scrollable<'a, Message, crate::Renderer>;
+    pub type Scrollable<'a, Message, Theme> =
+        iced_pure::widget::Scrollable<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod toggler {
@@ -103,8 +112,8 @@ pub mod toggler {
     pub use iced_pure::widget::toggler::{Style, StyleSheet};
 
     /// A toggler widget.
-    pub type Toggler<'a, Message> =
-        iced_pure::widget::Toggler<'a, Message, crate::Renderer>;
+    pub type Toggler<'a, Message, Theme> =
+        iced_pure::widget::Toggler<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod text_input {
@@ -114,8 +123,8 @@ pub mod text_input {
     pub use iced_pure::widget::text_input::{Style, StyleSheet};
 
     /// A field that can be filled with text.
-    pub type TextInput<'a, Message> =
-        iced_pure::widget::TextInput<'a, Message, Renderer>;
+    pub type TextInput<'a, Message, Theme> =
+        iced_pure::widget::TextInput<'a, Message, Renderer<Theme>>;
 }
 
 pub mod tooltip {
@@ -123,8 +132,8 @@ pub mod tooltip {
     pub use iced_pure::widget::tooltip::Position;
 
     /// A widget allowing the selection of a single value from a list of options.
-    pub type Tooltip<'a, Message> =
-        iced_pure::widget::Tooltip<'a, Message, crate::Renderer>;
+    pub type Tooltip<'a, Message, Theme> =
+        iced_pure::widget::Tooltip<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub use iced_pure::widget::progress_bar;
diff --git a/src/sandbox.rs b/src/sandbox.rs
index e7e97920..16819569 100644
--- a/src/sandbox.rs
+++ b/src/sandbox.rs
@@ -1,5 +1,5 @@
 use crate::{
-    Application, Color, Command, Element, Error, Settings, Subscription,
+    Application, Color, Command, Element, Error, Settings, Subscription, Theme,
 };
 
 /// A sandboxed [`Application`].
@@ -111,6 +111,16 @@ pub trait Sandbox {
     /// These widgets can produce __messages__ based on user interaction.
     fn view(&mut self) -> Element<'_, Self::Message>;
 
+    /// Returns the current [`Theme`] of the [`Sandbox`].
+    ///
+    /// If you want to use your own custom theme type, you will have to use an
+    /// [`Application`].
+    ///
+    /// By default, it returns [`Theme::default`].
+    fn theme(&self) -> Theme {
+        Theme::default()
+    }
+
     /// Returns the background color of the [`Sandbox`].
     ///
     /// By default, it returns [`Color::WHITE`].
@@ -159,6 +169,7 @@ where
     type Executor = iced_futures::backend::null::Executor;
     type Flags = ();
     type Message = T::Message;
+    type Theme = Theme;
 
     fn new(_flags: ()) -> (Self, Command<T::Message>) {
         (T::new(), Command::none())
@@ -174,14 +185,18 @@ where
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<T::Message> {
-        Subscription::none()
-    }
-
     fn view(&mut self) -> Element<'_, T::Message> {
         T::view(self)
     }
 
+    fn theme(&self) -> Self::Theme {
+        T::theme(self)
+    }
+
+    fn subscription(&self) -> Subscription<T::Message> {
+        Subscription::none()
+    }
+
     fn background_color(&self) -> Color {
         T::background_color(self)
     }
diff --git a/src/widget.rs b/src/widget.rs
index 5e2b63fc..e40ed108 100644
--- a/src/widget.rs
+++ b/src/widget.rs
@@ -15,15 +15,16 @@
 //! [`TextInput`] has some [`text_input::State`].
 
 /// A container that distributes its contents vertically.
-pub type Column<'a, Message> =
-    iced_native::widget::Column<'a, Message, crate::Renderer>;
+pub type Column<'a, Message, Theme = crate::Theme> =
+    iced_native::widget::Column<'a, Message, crate::Renderer<Theme>>;
 
 /// A container that distributes its contents horizontally.
-pub type Row<'a, Message> =
-    iced_native::widget::Row<'a, Message, crate::Renderer>;
+pub type Row<'a, Message, Theme = crate::Theme> =
+    iced_native::widget::Row<'a, Message, crate::Renderer<Theme>>;
 
 /// A paragraph of text.
-pub type Text = iced_native::widget::Text<crate::Renderer>;
+pub type Text<Theme = crate::Theme> =
+    iced_native::widget::Text<crate::Renderer<Theme>>;
 
 pub mod button {
     //! Allow your users to perform actions by pressing a button.
@@ -32,8 +33,8 @@ pub mod button {
     pub use iced_native::widget::button::{State, Style, StyleSheet};
 
     /// A widget that produces a message when clicked.
-    pub type Button<'a, Message> =
-        iced_native::widget::Button<'a, Message, crate::Renderer>;
+    pub type Button<'a, Message, Theme = crate::Theme> =
+        iced_native::widget::Button<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod checkbox {
@@ -41,8 +42,8 @@ pub mod checkbox {
     pub use iced_native::widget::checkbox::{Style, StyleSheet};
 
     /// A box that can be checked.
-    pub type Checkbox<'a, Message> =
-        iced_native::widget::Checkbox<'a, Message, crate::Renderer>;
+    pub type Checkbox<'a, Message, Theme> =
+        iced_native::widget::Checkbox<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod container {
@@ -50,8 +51,8 @@ pub mod container {
     pub use iced_native::widget::container::{Style, StyleSheet};
 
     /// An element decorating some content.
-    pub type Container<'a, Message> =
-        iced_native::widget::Container<'a, Message, crate::Renderer>;
+    pub type Container<'a, Message, Theme = crate::Theme> =
+        iced_native::widget::Container<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod pane_grid {
@@ -73,16 +74,24 @@ pub mod pane_grid {
     /// to completely fill the space available.
     ///
     /// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
-    pub type PaneGrid<'a, Message> =
-        iced_native::widget::PaneGrid<'a, Message, crate::Renderer>;
+    pub type PaneGrid<'a, Message, Theme> =
+        iced_native::widget::PaneGrid<'a, Message, crate::Renderer<Theme>>;
 
     /// The content of a [`Pane`].
-    pub type Content<'a, Message> =
-        iced_native::widget::pane_grid::Content<'a, Message, crate::Renderer>;
+    pub type Content<'a, Message, Theme> =
+        iced_native::widget::pane_grid::Content<
+            'a,
+            Message,
+            crate::Renderer<Theme>,
+        >;
 
     /// The title bar of a [`Pane`].
-    pub type TitleBar<'a, Message> =
-        iced_native::widget::pane_grid::TitleBar<'a, Message, crate::Renderer>;
+    pub type TitleBar<'a, Message, Theme> =
+        iced_native::widget::pane_grid::TitleBar<
+            'a,
+            Message,
+            crate::Renderer<Theme>,
+        >;
 }
 
 pub mod pick_list {
@@ -91,8 +100,8 @@ pub mod pick_list {
     pub use iced_native::widget::pick_list::{State, Style, StyleSheet};
 
     /// A widget allowing the selection of a single value from a list of options.
-    pub type PickList<'a, T, Message> =
-        iced_native::widget::PickList<'a, T, Message, crate::Renderer>;
+    pub type PickList<'a, T, Message, Theme> =
+        iced_native::widget::PickList<'a, T, Message, crate::Renderer<Theme>>;
 }
 
 pub mod radio {
@@ -100,8 +109,8 @@ pub mod radio {
     pub use iced_native::widget::radio::{Style, StyleSheet};
 
     /// A circular button representing a choice.
-    pub type Radio<'a, Message> =
-        iced_native::widget::Radio<'a, Message, crate::Renderer>;
+    pub type Radio<'a, Message, Theme> =
+        iced_native::widget::Radio<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod scrollable {
@@ -112,8 +121,8 @@ pub mod scrollable {
 
     /// A widget that can vertically display an infinite amount of content
     /// with a scrollbar.
-    pub type Scrollable<'a, Message> =
-        iced_native::widget::Scrollable<'a, Message, crate::Renderer>;
+    pub type Scrollable<'a, Message, Theme> =
+        iced_native::widget::Scrollable<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod toggler {
@@ -121,8 +130,8 @@ pub mod toggler {
     pub use iced_native::widget::toggler::{Style, StyleSheet};
 
     /// A toggler widget.
-    pub type Toggler<'a, Message> =
-        iced_native::widget::Toggler<'a, Message, crate::Renderer>;
+    pub type Toggler<'a, Message, Theme> =
+        iced_native::widget::Toggler<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub mod text_input {
@@ -134,8 +143,8 @@ pub mod text_input {
     pub use iced_native::widget::text_input::{State, Style, StyleSheet};
 
     /// A field that can be filled with text.
-    pub type TextInput<'a, Message> =
-        iced_native::widget::TextInput<'a, Message, Renderer>;
+    pub type TextInput<'a, Message, Theme> =
+        iced_native::widget::TextInput<'a, Message, Renderer<Theme>>;
 }
 
 pub mod tooltip {
@@ -143,8 +152,8 @@ pub mod tooltip {
     pub use iced_native::widget::tooltip::Position;
 
     /// A widget allowing the selection of a single value from a list of options.
-    pub type Tooltip<'a, Message> =
-        iced_native::widget::Tooltip<'a, Message, crate::Renderer>;
+    pub type Tooltip<'a, Message, Theme> =
+        iced_native::widget::Tooltip<'a, Message, crate::Renderer<Theme>>;
 }
 
 pub use iced_native::widget::progress_bar;
diff --git a/style/src/button.rs b/style/src/button.rs
index de2de4f4..9f00185c 100644
--- a/style/src/button.rs
+++ b/style/src/button.rs
@@ -27,10 +27,12 @@ impl std::default::Default for Style {
 
 /// A set of rules that dictate the style of a button.
 pub trait StyleSheet {
-    fn active(&self) -> Style;
+    type Variant;
 
-    fn hovered(&self) -> Style {
-        let active = self.active();
+    fn active(&self, variant: Self::Variant) -> Style;
+
+    fn hovered(&self, variant: Self::Variant) -> Style {
+        let active = self.active(variant);
 
         Style {
             shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
@@ -38,15 +40,15 @@ pub trait StyleSheet {
         }
     }
 
-    fn pressed(&self) -> Style {
+    fn pressed(&self, variant: Self::Variant) -> Style {
         Style {
             shadow_offset: Vector::default(),
-            ..self.active()
+            ..self.active(variant)
         }
     }
 
-    fn disabled(&self) -> Style {
-        let active = self.active();
+    fn disabled(&self, variant: Self::Variant) -> Style {
+        let active = self.active(variant);
 
         Style {
             shadow_offset: Vector::default(),
@@ -64,33 +66,3 @@ pub trait StyleSheet {
         }
     }
 }
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Style {
-        Style {
-            shadow_offset: Vector::new(0.0, 0.0),
-            background: Some(Background::Color([0.87, 0.87, 0.87].into())),
-            border_radius: 2.0,
-            border_width: 1.0,
-            border_color: [0.7, 0.7, 0.7].into(),
-            text_color: Color::BLACK,
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
-}
diff --git a/style/src/lib.rs b/style/src/lib.rs
index e4556f67..d9c3259e 100644
--- a/style/src/lib.rs
+++ b/style/src/lib.rs
@@ -21,4 +21,7 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod text_input;
+pub mod theme;
 pub mod toggler;
+
+pub use theme::Theme;
diff --git a/style/src/theme.rs b/style/src/theme.rs
new file mode 100644
index 00000000..7d420c8a
--- /dev/null
+++ b/style/src/theme.rs
@@ -0,0 +1,45 @@
+use crate::button;
+
+use iced_core::{Color, Vector};
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Theme {
+    Light,
+    Dark,
+}
+
+impl Default for Theme {
+    fn default() -> Self {
+        Self::Light
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Button {
+    Primary,
+    Secondary,
+    Positive,
+    Destructive,
+    Text,
+}
+
+impl Default for Button {
+    fn default() -> Self {
+        Self::Primary
+    }
+}
+
+impl button::StyleSheet for Theme {
+    type Variant = Button;
+
+    fn active(&self, _variant: Self::Variant) -> button::Style {
+        button::Style {
+            shadow_offset: Vector::default(),
+            background: None,
+            border_radius: 0.0,
+            border_width: 0.0,
+            border_color: Color::TRANSPARENT,
+            text_color: Color::BLACK,
+        }
+    }
+}
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index ebe48510..d1ad6cd9 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -39,6 +39,7 @@ mod quad;
 mod text;
 
 pub use iced_graphics::{Antialiasing, Color, Error, Primitive, Viewport};
+pub use iced_native::Theme;
 pub use wgpu;
 
 pub use backend::Backend;
@@ -53,4 +54,5 @@ mod image;
 ///
 /// [`wgpu`]: https://github.com/gfx-rs/wgpu-rs
 /// [`iced`]: https://github.com/iced-rs/iced
-pub type Renderer = iced_graphics::Renderer<Backend>;
+pub type Renderer<Theme = iced_native::Theme> =
+    iced_graphics::Renderer<Backend, Theme>;
diff --git a/wgpu/src/window/compositor.rs b/wgpu/src/window/compositor.rs
index 54ea8247..bfb18bfa 100644
--- a/wgpu/src/window/compositor.rs
+++ b/wgpu/src/window/compositor.rs
@@ -5,9 +5,11 @@ use iced_graphics::compositor;
 use iced_native::futures;
 use raw_window_handle::HasRawWindowHandle;
 
+use std::marker::PhantomData;
+
 /// A window graphics backend for iced powered by `wgpu`.
 #[allow(missing_debug_implementations)]
-pub struct Compositor {
+pub struct Compositor<Theme> {
     settings: Settings,
     instance: wgpu::Instance,
     adapter: wgpu::Adapter,
@@ -16,9 +18,10 @@ pub struct Compositor {
     staging_belt: wgpu::util::StagingBelt,
     local_pool: futures::executor::LocalPool,
     format: wgpu::TextureFormat,
+    theme: PhantomData<Theme>,
 }
 
-impl Compositor {
+impl<Theme> Compositor<Theme> {
     const CHUNK_SIZE: u64 = 10 * 1024;
 
     /// Requests a new [`Compositor`] with the given [`Settings`].
@@ -101,6 +104,7 @@ impl Compositor {
             staging_belt,
             local_pool,
             format,
+            theme: PhantomData,
         })
     }
 
@@ -110,15 +114,15 @@ impl Compositor {
     }
 }
 
-impl iced_graphics::window::Compositor for Compositor {
+impl<Theme> iced_graphics::window::Compositor for Compositor<Theme> {
     type Settings = Settings;
-    type Renderer = Renderer;
+    type Renderer = Renderer<Theme>;
     type Surface = wgpu::Surface;
 
     fn new<W: HasRawWindowHandle>(
         settings: Self::Settings,
         compatible_window: Option<&W>,
-    ) -> Result<(Self, Renderer), Error> {
+    ) -> Result<(Self, Self::Renderer), Error> {
         let compositor = futures::executor::block_on(Self::request(
             settings,
             compatible_window,
diff --git a/winit/src/application.rs b/winit/src/application.rs
index 90b03d56..abe6b8a9 100644
--- a/winit/src/application.rs
+++ b/winit/src/application.rs
@@ -51,6 +51,9 @@ pub trait Application: Program {
     /// title of your application when necessary.
     fn title(&self) -> String;
 
+    /// Returns the current [`Theme`] of the [`Application`].
+    fn theme(&self) -> <Self::Renderer as iced_native::Renderer>::Theme;
+
     /// Returns the event `Subscription` for the current state of the
     /// application.
     ///
@@ -255,6 +258,7 @@ async fn run_instance<A, E, C>(
 
     let mut state = State::new(&application, &window);
     let mut viewport_version = state.viewport_version();
+    let mut theme = application.theme();
 
     let physical_size = state.physical_size();
 
@@ -327,6 +331,7 @@ async fn run_instance<A, E, C>(
 
                     let should_exit = application.should_exit();
 
+                    theme = application.theme();
                     user_interface = ManuallyDrop::new(build_user_interface(
                         &mut application,
                         cache,
@@ -341,8 +346,11 @@ async fn run_instance<A, E, C>(
                 }
 
                 debug.draw_started();
-                let new_mouse_interaction =
-                    user_interface.draw(&mut renderer, state.cursor_position());
+                let new_mouse_interaction = user_interface.draw(
+                    &mut renderer,
+                    &theme,
+                    state.cursor_position(),
+                );
                 debug.draw_finished();
 
                 if new_mouse_interaction != mouse_interaction {
@@ -389,8 +397,11 @@ async fn run_instance<A, E, C>(
                     debug.layout_finished();
 
                     debug.draw_started();
-                    let new_mouse_interaction = user_interface
-                        .draw(&mut renderer, state.cursor_position());
+                    let new_mouse_interaction = user_interface.draw(
+                        &mut renderer,
+                        &theme,
+                        state.cursor_position(),
+                    );
 
                     if new_mouse_interaction != mouse_interaction {
                         window.set_cursor_icon(conversion::mouse_interaction(