Merge pull request #1362 from iced-rs/theming

Theming

142 files changed, 2896 insertions, 2873 deletions

diff --git a/examples/bezier_tool/src/main.rs b/examples/bezier_tool/src/main.rs
index 35b5182c..11e4828e 100644
--- a/examples/bezier_tool/src/main.rs
+++ b/examples/bezier_tool/src/main.rs
@@ -71,7 +71,7 @@ mod bezier {
     use iced::{
         canvas::event::{self, Event},
         canvas::{self, Canvas, Cursor, Frame, Geometry, Path, Stroke},
-        mouse, Element, Length, Point, Rectangle,
+        mouse, Element, Length, Point, Rectangle, Theme,
     };
 
     #[derive(Default)]
@@ -158,7 +158,12 @@ mod bezier {
             }
         }
 
-        fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> {
+        fn draw(
+            &self,
+            _theme: &Theme,
+            bounds: Rectangle,
+            cursor: Cursor,
+        ) -> Vec<Geometry> {
             let content =
                 self.state.cache.draw(bounds.size(), |frame: &mut Frame| {
                     Curve::draw_all(self.curves, frame);
diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs
index 3b8a1d6a..48b4cd7b 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>) {
@@ -77,7 +81,12 @@ impl Application for Clock {
 }
 
 impl<Message> canvas::Program<Message> for Clock {
-    fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry> {
+    fn draw(
+        &self,
+        _theme: &Theme,
+        bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Vec<Geometry> {
         let clock = self.clock.draw(bounds.size(), |frame| {
             let center = frame.center();
             let radius = frame.width().min(frame.height()) / 2.0;
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index f5fab251..16c87a75 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -236,7 +236,12 @@ impl Theme {
 }
 
 impl<Message> canvas::Program<Message> for Theme {
-    fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry> {
+    fn draw(
+        &self,
+        _theme: &iced::Theme,
+        bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Vec<Geometry> {
         let theme = self.canvas_cache.draw(bounds.size(), |frame| {
             self.draw(frame);
         });
@@ -288,7 +293,7 @@ impl<C: 'static + ColorSpace + Copy> ColorPicker<C> {
             range: RangeInclusive<f64>,
             component: f32,
             update: impl Fn(f32) -> C + 'static,
-        ) -> Slider<f64, C> {
+        ) -> Slider<f64, C, iced::Renderer> {
             Slider::new(state, range, f64::from(component), move |v| {
                 update(v as f32)
             })
diff --git a/examples/component/src/main.rs b/examples/component/src/main.rs
index 39335cf1..b6ff0600 100644
--- a/examples/component/src/main.rs
+++ b/examples/component/src/main.rs
@@ -54,7 +54,7 @@ mod numeric_input {
     use iced_native::text;
     use iced_native::widget::button::{self, Button};
     use iced_native::widget::text_input::{self, TextInput};
-    use iced_native::widget::{Row, Text};
+    use iced_native::widget::{self, Row, Text};
     use iced_native::{Element, Length};
 
     pub struct NumericInput<'a, Message> {
@@ -95,6 +95,9 @@ mod numeric_input {
         for NumericInput<'a, Message>
     where
         Renderer: 'a + text::Renderer,
+        Renderer::Theme: button::StyleSheet
+            + text_input::StyleSheet
+            + widget::text::StyleSheet,
     {
         type Event = Event;
 
@@ -172,6 +175,9 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: text::Renderer + 'a,
+        Renderer::Theme: button::StyleSheet
+            + text_input::StyleSheet
+            + widget::text::StyleSheet,
     {
         fn from(numeric_input: NumericInput<'a, Message>) -> Self {
             component::view(numeric_input)
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..35399584 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -1,18 +1,18 @@
 //! This example showcases an interactive version of the Game of Life, invented
 //! by John Conway. It leverages a `Canvas` together with other widgets.
 mod preset;
-mod style;
 
 use grid::Grid;
 use iced::button::{self, Button};
 use iced::executor;
 use iced::pick_list::{self, PickList};
 use iced::slider::{self, Slider};
+use iced::theme::{self, Theme};
 use iced::time;
 use iced::window;
 use iced::{
-    Alignment, Application, Checkbox, Column, Command, Container, Element,
-    Length, Row, Settings, Subscription, Text,
+    Alignment, Application, Checkbox, Column, Command, Element, Length, Row,
+    Settings, Subscription, Text,
 };
 use preset::Preset;
 use std::time::{Duration, Instant};
@@ -55,6 +55,7 @@ enum Message {
 
 impl Application for GameOfLife {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -141,20 +142,19 @@ impl Application for GameOfLife {
             self.grid.preset(),
         );
 
-        let content = Column::new()
+        Column::new()
             .push(
                 self.grid
                     .view()
                     .map(move |message| Message::Grid(message, version)),
             )
-            .push(controls);
-
-        Container::new(content)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .style(style::Container)
+            .push(controls)
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        Theme::Dark
+    }
 }
 
 mod grid {
@@ -163,7 +163,7 @@ mod grid {
         alignment,
         canvas::event::{self, Event},
         canvas::{self, Cache, Canvas, Cursor, Frame, Geometry, Path, Text},
-        mouse, Color, Element, Length, Point, Rectangle, Size, Vector,
+        mouse, Color, Element, Length, Point, Rectangle, Size, Theme, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -445,7 +445,12 @@ mod grid {
             }
         }
 
-        fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> {
+        fn draw(
+            &self,
+            _theme: &Theme,
+            bounds: Rectangle,
+            cursor: Cursor,
+        ) -> Vec<Geometry> {
             let center = Vector::new(bounds.width / 2.0, bounds.height / 2.0);
 
             let life = self.life_cache.draw(bounds.size(), |frame| {
@@ -836,27 +841,24 @@ impl Controls {
                     Text::new(if is_playing { "Pause" } else { "Play" }),
                 )
                 .on_press(Message::TogglePlayback)
-                .style(style::Button),
+                .style(theme::Button::Primary),
             )
             .push(
                 Button::new(&mut self.next_button, Text::new("Next"))
                     .on_press(Message::Next)
-                    .style(style::Button),
+                    .style(theme::Button::Secondary),
             );
 
         let speed_controls = Row::new()
             .width(Length::Fill)
             .align_items(Alignment::Center)
             .spacing(10)
-            .push(
-                Slider::new(
-                    &mut self.speed_slider,
-                    1.0..=1000.0,
-                    speed as f32,
-                    Message::SpeedChanged,
-                )
-                .style(style::Slider),
-            )
+            .push(Slider::new(
+                &mut self.speed_slider,
+                1.0..=1000.0,
+                speed as f32,
+                Message::SpeedChanged,
+            ))
             .push(Text::new(format!("x{}", speed)).size(16));
 
         Row::new()
@@ -879,13 +881,12 @@ impl Controls {
                     Message::PresetPicked,
                 )
                 .padding(8)
-                .text_size(16)
-                .style(style::PickList),
+                .text_size(16),
             )
             .push(
                 Button::new(&mut self.clear_button, Text::new("Clear"))
                     .on_press(Message::Clear)
-                    .style(style::Clear),
+                    .style(theme::Button::Destructive),
             )
             .into()
     }
diff --git a/examples/game_of_life/src/style.rs b/examples/game_of_life/src/style.rs
deleted file mode 100644
index be9a0e96..00000000
--- a/examples/game_of_life/src/style.rs
+++ /dev/null
@@ -1,189 +0,0 @@
-use iced::{button, container, pick_list, slider, Background, Color};
-
-const ACTIVE: Color = Color::from_rgb(
-    0x72 as f32 / 255.0,
-    0x89 as f32 / 255.0,
-    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,
-    0xC4 as f32 / 255.0,
-);
-
-const BACKGROUND: Color = Color::from_rgb(
-    0x2F as f32 / 255.0,
-    0x31 as f32 / 255.0,
-    0x36 as f32 / 255.0,
-);
-
-pub struct Container;
-
-impl container::StyleSheet for Container {
-    fn style(&self) -> container::Style {
-        container::Style {
-            background: Some(Background::Color(Color::from_rgb8(
-                0x36, 0x39, 0x3F,
-            ))),
-            text_color: Some(Color::WHITE),
-            ..container::Style::default()
-        }
-    }
-}
-
-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 {
-    fn active(&self) -> slider::Style {
-        slider::Style {
-            rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }),
-            handle: slider::Handle {
-                shape: slider::HandleShape::Circle { radius: 9.0 },
-                color: ACTIVE,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-            },
-        }
-    }
-
-    fn hovered(&self) -> slider::Style {
-        let active = self.active();
-
-        slider::Style {
-            handle: slider::Handle {
-                color: HOVERED,
-                ..active.handle
-            },
-            ..active
-        }
-    }
-
-    fn dragging(&self) -> slider::Style {
-        let active = self.active();
-
-        slider::Style {
-            handle: slider::Handle {
-                color: Color::from_rgb(0.85, 0.85, 0.85),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-}
-
-pub struct PickList;
-
-impl pick_list::StyleSheet for PickList {
-    fn menu(&self) -> pick_list::Menu {
-        pick_list::Menu {
-            text_color: Color::WHITE,
-            background: BACKGROUND.into(),
-            border_width: 1.0,
-            border_color: Color {
-                a: 0.7,
-                ..Color::BLACK
-            },
-            selected_background: Color {
-                a: 0.5,
-                ..Color::BLACK
-            }
-            .into(),
-            selected_text_color: Color::WHITE,
-        }
-    }
-
-    fn active(&self) -> pick_list::Style {
-        pick_list::Style {
-            text_color: Color::WHITE,
-            background: BACKGROUND.into(),
-            border_width: 1.0,
-            border_color: Color {
-                a: 0.6,
-                ..Color::BLACK
-            },
-            border_radius: 2.0,
-            icon_size: 0.5,
-            ..pick_list::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> pick_list::Style {
-        let active = self.active();
-
-        pick_list::Style {
-            border_color: Color {
-                a: 0.9,
-                ..Color::BLACK
-            },
-            ..active
-        }
-    }
-}
diff --git a/examples/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/controls.rs b/examples/integration_opengl/src/controls.rs
index f387b4e5..fdaa29d5 100644
--- a/examples/integration_opengl/src/controls.rs
+++ b/examples/integration_opengl/src/controls.rs
@@ -89,13 +89,13 @@ impl Program for Controls {
                             .spacing(10)
                             .push(
                                 Text::new("Background color")
-                                    .color(Color::WHITE),
+                                    .style(Color::WHITE),
                             )
                             .push(sliders)
                             .push(
                                 Text::new(format!("{:?}", background_color))
                                     .size(14)
-                                    .color(Color::WHITE),
+                                    .style(Color::WHITE),
                             ),
                     ),
             )
diff --git a/examples/integration_opengl/src/main.rs b/examples/integration_opengl/src/main.rs
index 1007b90f..1a78a493 100644
--- a/examples/integration_opengl/src/main.rs
+++ b/examples/integration_opengl/src/main.rs
@@ -12,7 +12,8 @@ use iced_glow::glow;
 use iced_glow::{Backend, Renderer, Settings, Viewport};
 use iced_glutin::conversion;
 use iced_glutin::glutin;
-use iced_glutin::{program, Clipboard, Debug, Size};
+use iced_glutin::renderer;
+use iced_glutin::{program, Clipboard, Color, Debug, Size};
 
 pub fn main() {
     env_logger::init();
@@ -125,6 +126,10 @@ pub fn main() {
                             viewport.scale_factor(),
                         ),
                         &mut renderer,
+                        &iced_glow::Theme::Dark,
+                        &renderer::Style {
+                            text_color: Color::WHITE,
+                        },
                         &mut clipboard,
                         &mut debug,
                     );
diff --git a/examples/integration_wgpu/src/controls.rs b/examples/integration_wgpu/src/controls.rs
index 9bca40eb..cb2c423f 100644
--- a/examples/integration_wgpu/src/controls.rs
+++ b/examples/integration_wgpu/src/controls.rs
@@ -100,13 +100,13 @@ impl Program for Controls {
                             .spacing(10)
                             .push(
                                 Text::new("Background color")
-                                    .color(Color::WHITE),
+                                    .style(Color::WHITE),
                             )
                             .push(sliders)
                             .push(
                                 Text::new(format!("{:?}", background_color))
                                     .size(14)
-                                    .color(Color::WHITE),
+                                    .style(Color::WHITE),
                             )
                             .push(TextInput::new(
                                 t,
diff --git a/examples/integration_wgpu/src/main.rs b/examples/integration_wgpu/src/main.rs
index 89ae03c6..3d27a0f0 100644
--- a/examples/integration_wgpu/src/main.rs
+++ b/examples/integration_wgpu/src/main.rs
@@ -5,7 +5,10 @@ use controls::Controls;
 use scene::Scene;
 
 use iced_wgpu::{wgpu, Backend, Renderer, Settings, Viewport};
-use iced_winit::{conversion, futures, program, winit, Clipboard, Debug, Size};
+use iced_winit::{
+    conversion, futures, program, renderer, winit, Clipboard, Color, Debug,
+    Size,
+};
 
 use winit::{
     dpi::PhysicalPosition,
@@ -188,6 +191,8 @@ pub fn main() {
                             viewport.scale_factor(),
                         ),
                         &mut renderer,
+                        &iced_wgpu::Theme::Dark,
+                        &renderer::Style { text_color: Color::WHITE },
                         &mut clipboard,
                         &mut debug,
                     );
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 2962ca25..5fbcea2c 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,14 +173,14 @@ 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![
                 pin_button.into(),
                 Text::new("Pane").into(),
                 Text::new(content.id.to_string())
-                    .color(if is_focused {
+                    .style(if is_focused {
                         PANE_ID_COLOR_FOCUSED
                     } else {
                         PANE_ID_COLOR_UNFOCUSED
@@ -191,9 +193,9 @@ impl Application for Example {
                 .controls(pane.controls.view(id, total_panes, *is_pinned))
                 .padding(10)
                 .style(if is_focused {
-                    style::TitleBar::Focused
+                    style::title_bar_focused
                 } else {
-                    style::TitleBar::Active
+                    style::title_bar_active
                 });
 
             pane_grid::Content::new(Responsive::new(responsive, move |size| {
@@ -201,9 +203,9 @@ impl Application for Example {
             }))
             .title_bar(title_bar)
             .style(if is_focused {
-                style::Pane::Focused
+                style::pane_focused
             } else {
-                style::Pane::Active
+                style::pane_active
             })
         })
         .width(Length::Fill)
@@ -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,111 +387,47 @@ impl Controls {
 }
 
 mod style {
-    use crate::PANE_ID_COLOR_FOCUSED;
-    use iced::{button, container, Background, Color, Vector};
-
-    const SURFACE: Color = Color::from_rgb(
-        0xF2 as f32 / 255.0,
-        0xF3 as f32 / 255.0,
-        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,
-    }
+    use iced::{container, Theme};
 
-    impl container::StyleSheet for TitleBar {
-        fn style(&self) -> container::Style {
-            let pane = match self {
-                Self::Active => Pane::Active,
-                Self::Focused => Pane::Focused,
-            }
-            .style();
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-            container::Style {
-                text_color: Some(Color::WHITE),
-                background: Some(pane.border_color.into()),
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Pane {
-        Active,
-        Focused,
-    }
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    impl container::StyleSheet for Pane {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Some(Background::Color(SURFACE)),
-                border_width: 2.0,
-                border_color: match self {
-                    Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
-                    Self::Focused => Color::BLACK,
-                },
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Button {
-        Primary,
-        Destructive,
-        Control,
-        Pin,
-    }
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    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()
-            }
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::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
-            }
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
         }
     }
 }
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index 85c26987..89d865e4 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, Color, 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>) {
@@ -139,7 +143,7 @@ impl Pokemon {
                             .push(
                                 Text::new(format!("#{}", self.number))
                                     .size(20)
-                                    .color([0.5, 0.5, 0.5]),
+                                    .style(Color::from([0.5, 0.5, 0.5])),
                             ),
                     )
                     .push(Text::new(&self.description)),
@@ -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..64935afd 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
+            + widget::text_input::StyleSheet
+            + widget::text::StyleSheet,
     {
         type State = ();
         type Event = Event;
@@ -158,6 +162,9 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: 'static + text::Renderer,
+        Renderer::Theme: widget::button::StyleSheet
+            + widget::text_input::StyleSheet
+            + widget::text::StyleSheet,
     {
         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..851fbd47 100644
--- a/examples/pure/game_of_life/src/main.rs
+++ b/examples/pure/game_of_life/src/main.rs
@@ -1,18 +1,19 @@
 //! This example showcases an interactive version of the Game of Life, invented
 //! by John Conway. It leverages a `Canvas` together with other widgets.
 mod preset;
-mod style;
 
 use grid::Grid;
+use preset::Preset;
+
 use iced::executor;
 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};
-use preset::Preset;
+use iced::{Alignment, Command, Length, Settings, Subscription};
 use std::time::{Duration, Instant};
 
 pub fn main() -> iced::Result {
@@ -52,6 +53,7 @@ enum Message {
 
 impl Application for GameOfLife {
     type Message = Message;
+    type Theme = Theme;
     type Executor = executor::Default;
     type Flags = ();
 
@@ -69,10 +71,6 @@ impl Application for GameOfLife {
         String::from("Game of Life - Iced")
     }
 
-    fn background_color(&self) -> Color {
-        style::BACKGROUND
-    }
-
     fn update(&mut self, message: Message) -> Command<Message> {
         match message {
             Message::Grid(message, version) => {
@@ -153,9 +151,12 @@ impl Application for GameOfLife {
         container(content)
             .width(Length::Fill)
             .height(Length::Fill)
-            .style(style::Container)
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        Theme::Dark
+    }
 }
 
 fn view_controls<'a>(
@@ -168,19 +169,19 @@ 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)
         .align_items(Alignment::Center)
         .spacing(10)
-        .push(
-            slider(1.0..=1000.0, speed as f32, Message::SpeedChanged)
-                .style(style::Slider),
-        )
+        .push(slider(1.0..=1000.0, speed as f32, Message::SpeedChanged))
         .push(text(format!("x{}", speed)).size(16));
 
     row()
@@ -198,10 +199,13 @@ fn view_controls<'a>(
         .push(
             pick_list(preset::ALL, Some(preset), Message::PresetPicked)
                 .padding(8)
-                .text_size(16)
-                .style(style::PickList),
+                .text_size(16),
+        )
+        .push(
+            button("Clear")
+                .on_press(Message::Clear)
+                .style(theme::Button::Destructive),
         )
-        .push(button("Clear").on_press(Message::Clear).style(style::Clear))
         .into()
 }
 
@@ -213,7 +217,7 @@ mod grid {
     };
     use iced::pure::Element;
     use iced::{
-        alignment, mouse, Color, Length, Point, Rectangle, Size, Vector,
+        alignment, mouse, Color, Length, Point, Rectangle, Size, Theme, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -522,6 +526,7 @@ mod grid {
         fn draw(
             &self,
             _interaction: &Interaction,
+            _theme: &Theme,
             bounds: Rectangle,
             cursor: Cursor,
         ) -> Vec<Geometry> {
diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs
deleted file mode 100644
index 1a64cf4a..00000000
--- a/examples/pure/game_of_life/src/style.rs
+++ /dev/null
@@ -1,186 +0,0 @@
-use iced::{button, container, pick_list, slider, Background, Color};
-
-const ACTIVE: Color = Color::from_rgb(
-    0x72 as f32 / 255.0,
-    0x89 as f32 / 255.0,
-    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,
-    0xC4 as f32 / 255.0,
-);
-
-pub const BACKGROUND: Color = Color::from_rgb(
-    0x2F as f32 / 255.0,
-    0x31 as f32 / 255.0,
-    0x36 as f32 / 255.0,
-);
-
-pub struct Container;
-
-impl container::StyleSheet for Container {
-    fn style(&self) -> container::Style {
-        container::Style {
-            text_color: Some(Color::WHITE),
-            ..container::Style::default()
-        }
-    }
-}
-
-pub struct 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 {
-    fn active(&self) -> slider::Style {
-        slider::Style {
-            rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }),
-            handle: slider::Handle {
-                shape: slider::HandleShape::Circle { radius: 9.0 },
-                color: ACTIVE,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-            },
-        }
-    }
-
-    fn hovered(&self) -> slider::Style {
-        let active = self.active();
-
-        slider::Style {
-            handle: slider::Handle {
-                color: HOVERED,
-                ..active.handle
-            },
-            ..active
-        }
-    }
-
-    fn dragging(&self) -> slider::Style {
-        let active = self.active();
-
-        slider::Style {
-            handle: slider::Handle {
-                color: Color::from_rgb(0.85, 0.85, 0.85),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-}
-
-pub struct PickList;
-
-impl pick_list::StyleSheet for PickList {
-    fn menu(&self) -> pick_list::Menu {
-        pick_list::Menu {
-            text_color: Color::WHITE,
-            background: BACKGROUND.into(),
-            border_width: 1.0,
-            border_color: Color {
-                a: 0.7,
-                ..Color::BLACK
-            },
-            selected_background: Color {
-                a: 0.5,
-                ..Color::BLACK
-            }
-            .into(),
-            selected_text_color: Color::WHITE,
-        }
-    }
-
-    fn active(&self) -> pick_list::Style {
-        pick_list::Style {
-            text_color: Color::WHITE,
-            background: BACKGROUND.into(),
-            border_width: 1.0,
-            border_color: Color {
-                a: 0.6,
-                ..Color::BLACK
-            },
-            border_radius: 2.0,
-            icon_size: 0.5,
-            ..pick_list::Style::default()
-        }
-    }
-
-    fn hovered(&self) -> pick_list::Style {
-        let active = self.active();
-
-        pick_list::Style {
-            border_color: Color {
-                a: 0.9,
-                ..Color::BLACK
-            },
-            ..active
-        }
-    }
-}
diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs
index 65516956..e85ed78d 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,13 +163,12 @@ 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()
                 .push(pin_button)
                 .push("Pane")
-                .push(text(pane.id.to_string()).color(if is_focused {
+                .push(text(pane.id.to_string()).style(if is_focused {
                     PANE_ID_COLOR_FOCUSED
                 } else {
                     PANE_ID_COLOR_UNFOCUSED
@@ -178,9 +179,9 @@ impl Application for Example {
                 .controls(view_controls(id, total_panes, pane.is_pinned))
                 .padding(10)
                 .style(if is_focused {
-                    style::TitleBar::Focused
+                    style::title_bar_focused
                 } else {
-                    style::TitleBar::Active
+                    style::title_bar_active
                 });
 
             pane_grid::Content::new(responsive(move |size| {
@@ -188,9 +189,9 @@ impl Application for Example {
             }))
             .title_bar(title_bar)
             .style(if is_focused {
-                style::Pane::Focused
+                style::pane_focused
             } else {
-                style::Pane::Active
+                style::pane_active
             })
         })
         .width(Length::Fill)
@@ -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,111 +323,47 @@ fn view_controls<'a>(
 }
 
 mod style {
-    use crate::PANE_ID_COLOR_FOCUSED;
-    use iced::{button, container, Background, Color, Vector};
-
-    const SURFACE: Color = Color::from_rgb(
-        0xF2 as f32 / 255.0,
-        0xF3 as f32 / 255.0,
-        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,
-    }
+    use iced::{container, Theme};
 
-    impl container::StyleSheet for TitleBar {
-        fn style(&self) -> container::Style {
-            let pane = match self {
-                Self::Active => Pane::Active,
-                Self::Focused => Pane::Focused,
-            }
-            .style();
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-            container::Style {
-                text_color: Some(Color::WHITE),
-                background: Some(pane.border_color.into()),
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Pane {
-        Active,
-        Focused,
-    }
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    impl container::StyleSheet for Pane {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Some(Background::Color(SURFACE)),
-                border_width: 2.0,
-                border_color: match self {
-                    Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
-                    Self::Focused => Color::BLACK,
-                },
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Button {
-        Primary,
-        Destructive,
-        Control,
-        Pin,
-    }
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    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()
-            }
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::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
-            }
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
         }
     }
 }
diff --git a/examples/pure/todos/src/main.rs b/examples/pure/todos/src/main.rs
index 6a6c6300..723386ad 100644
--- a/examples/pure/todos/src/main.rs
+++ b/examples/pure/todos/src/main.rs
@@ -4,8 +4,9 @@ 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 iced::{Color, Command, Font, Length, Settings};
 use serde::{Deserialize, Serialize};
 
 pub fn main() -> iced::Result {
@@ -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>) {
@@ -153,7 +155,7 @@ impl Application for Todos {
                 let title = text("todos")
                     .width(Length::Fill)
                     .size(100)
-                    .color([0.5, 0.5, 0.5])
+                    .style(Color::from([0.5, 0.5, 0.5]))
                     .horizontal_alignment(alignment::Horizontal::Center);
 
                 let input = text_input(
@@ -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)
@@ -404,7 +406,7 @@ fn empty_message(message: &str) -> Element<'_, Message> {
             .width(Length::Fill)
             .size(25)
             .horizontal_alignment(alignment::Horizontal::Center)
-            .color([0.7, 0.7, 0.7]),
+            .style(Color::from([0.7, 0.7, 0.7])),
     )
     .width(Length::Fill)
     .height(Length::Units(200))
@@ -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/tooltip/src/main.rs b/examples/pure/tooltip/src/main.rs
index dbd83f5f..e9a6c111 100644
--- a/examples/pure/tooltip/src/main.rs
+++ b/examples/pure/tooltip/src/main.rs
@@ -1,6 +1,7 @@
-use iced::pure::{
-    button, container, tooltip, widget::tooltip::Position, Element, Sandbox,
-};
+use iced::pure::widget::tooltip::Position;
+use iced::pure::{button, container, tooltip};
+use iced::pure::{Element, Sandbox};
+use iced::theme;
 use iced::{Length, Settings};
 
 pub fn main() -> iced::Result {
@@ -53,7 +54,7 @@ impl Sandbox for Example {
             self.position,
         )
         .gap(10)
-        .style(style::Tooltip);
+        .style(theme::Container::Box);
 
         container(tooltip)
             .width(Length::Fill)
@@ -73,21 +74,3 @@ fn position_to_text<'a>(position: Position) -> &'a str {
         Position::Right => "Right",
     }
 }
-
-mod style {
-    use iced::container;
-    use iced::Color;
-
-    pub struct Tooltip;
-
-    impl container::StyleSheet for Tooltip {
-        fn style(&self) -> container::Style {
-            container::Style {
-                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
-                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
-                border_radius: 12.0,
-                ..container::Style::default()
-            }
-        }
-    }
-}
diff --git a/examples/pure/tour/src/main.rs b/examples/pure/tour/src/main.rs
index a44d99f3..477a1ec7 100644
--- a/examples/pure/tour/src/main.rs
+++ b/examples/pure/tour/src/main.rs
@@ -5,7 +5,8 @@ use iced::pure::{
     scrollable, slider, text, text_input, toggler, vertical_space,
 };
 use iced::pure::{Element, Sandbox};
-use iced::{Color, Length, Settings};
+use iced::theme;
+use iced::{Color, Length, Renderer, Settings};
 
 pub fn main() -> iced::Result {
     env_logger::init();
@@ -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),
             );
         }
 
@@ -432,7 +433,7 @@ impl<'a> Step {
             .padding(20)
             .spacing(20)
             .push("And its color:")
-            .push(text(format!("{:?}", color)).color(color))
+            .push(text(format!("{:?}", color)).style(color))
             .push(color_sliders);
 
         Self::container("Text")
@@ -575,7 +576,7 @@ impl<'a> Step {
             .push(if cfg!(target_arch = "wasm32") {
                 Element::new(
                     text("Not available on web yet!")
-                        .color([0.7, 0.7, 0.7])
+                        .style(Color::from([0.7, 0.7, 0.7]))
                         .horizontal_alignment(alignment::Horizontal::Center),
                 )
             } else {
@@ -621,7 +622,7 @@ fn button<'a, Message: Clone>(label: &str) -> Button<'a, Message> {
 fn color_slider<'a>(
     component: f32,
     update: impl Fn(f32) -> Color + 'a,
-) -> Slider<'a, f64, StepMessage> {
+) -> Slider<'a, f64, StepMessage, Renderer> {
     slider(0.0..=1.0, f64::from(component), move |c| {
         StepMessage::TextColorChanged(update(c as f32))
     })
@@ -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/qr_code/src/main.rs b/examples/qr_code/src/main.rs
index 92c82d45..3e9ba921 100644
--- a/examples/qr_code/src/main.rs
+++ b/examples/qr_code/src/main.rs
@@ -1,7 +1,8 @@
 use iced::qr_code::{self, QRCode};
 use iced::text_input::{self, TextInput};
 use iced::{
-    Alignment, Column, Container, Element, Length, Sandbox, Settings, Text,
+    Alignment, Color, Column, Container, Element, Length, Sandbox, Settings,
+    Text,
 };
 
 pub fn main() -> iced::Result {
@@ -48,7 +49,7 @@ impl Sandbox for QRGenerator {
     fn view(&mut self) -> Element<Message> {
         let title = Text::new("QR Code Generator")
             .size(70)
-            .color([0.5, 0.5, 0.5]);
+            .style(Color::from([0.5, 0.5, 0.5]));
 
         let input = TextInput::new(
             &mut self.input,
diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
index 8e027504..f66d2180 100644
--- a/examples/scrollable/src/main.rs
+++ b/examples/scrollable/src/main.rs
@@ -1,8 +1,8 @@
-mod style;
-
+use iced::button;
+use iced::scrollable;
 use iced::{
-    button, scrollable, Button, Column, Container, Element, Length,
-    ProgressBar, Radio, Row, Rule, Sandbox, Scrollable, Settings, Space, Text,
+    Button, Column, Container, Element, Length, ProgressBar, Radio, Row, Rule,
+    Sandbox, Scrollable, Settings, Space, Text, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -10,13 +10,13 @@ pub fn main() -> iced::Result {
 }
 
 struct ScrollableDemo {
-    theme: style::Theme,
+    theme: Theme,
     variants: Vec<Variant>,
 }
 
 #[derive(Debug, Clone)]
 enum Message {
-    ThemeChanged(style::Theme),
+    ThemeChanged(Theme),
     ScrollToTop(usize),
     ScrollToBottom(usize),
     Scrolled(usize, f32),
@@ -66,18 +66,15 @@ impl Sandbox for ScrollableDemo {
             theme, variants, ..
         } = self;
 
-        let choose_theme = style::Theme::ALL.iter().fold(
+        let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
             Column::new().spacing(10).push(Text::new("Choose a theme:")),
             |column, option| {
-                column.push(
-                    Radio::new(
-                        *option,
-                        format!("{:?}", option),
-                        Some(*theme),
-                        Message::ThemeChanged,
-                    )
-                    .style(*theme),
-                )
+                column.push(Radio::new(
+                    *option,
+                    format!("{:?}", option),
+                    Some(*theme),
+                    Message::ThemeChanged,
+                ))
             },
         );
 
@@ -95,7 +92,6 @@ impl Sandbox for ScrollableDemo {
                             .on_scroll(move |offset| {
                                 Message::Scrolled(i, offset)
                             })
-                            .style(*theme)
                             .push(Text::new(variant.title))
                             .push(
                                 Button::new(
@@ -160,12 +156,7 @@ impl Sandbox for ScrollableDemo {
                         .width(Length::Fill)
                         .height(Length::Fill)
                         .spacing(10)
-                        .push(
-                            Container::new(scrollable)
-                                .width(Length::Fill)
-                                .height(Length::Fill)
-                                .style(*theme),
-                        )
+                        .push(scrollable)
                         .push(ProgressBar::new(
                             0.0..=1.0,
                             variant.latest_offset,
@@ -182,7 +173,7 @@ impl Sandbox for ScrollableDemo {
             .spacing(20)
             .padding(20)
             .push(choose_theme)
-            .push(Rule::horizontal(20).style(self.theme))
+            .push(Rule::horizontal(20))
             .push(scrollable_row);
 
         Container::new(content)
@@ -190,9 +181,12 @@ impl Sandbox for ScrollableDemo {
             .height(Length::Fill)
             .center_x()
             .center_y()
-            .style(self.theme)
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        self.theme
+    }
 }
 
 /// A version of a scrollable
diff --git a/examples/scrollable/src/style.rs b/examples/scrollable/src/style.rs
deleted file mode 100644
index 0ed38b00..00000000
--- a/examples/scrollable/src/style.rs
+++ /dev/null
@@ -1,191 +0,0 @@
-use iced::{container, radio, rule, scrollable};
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum Theme {
-    Light,
-    Dark,
-}
-
-impl Theme {
-    pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark];
-}
-
-impl Default for Theme {
-    fn default() -> Theme {
-        Theme::Light
-    }
-}
-
-impl<'a> From<Theme> for Box<dyn container::StyleSheet + 'a> {
-    fn from(theme: Theme) -> Self {
-        match theme {
-            Theme::Light => Default::default(),
-            Theme::Dark => dark::Container.into(),
-        }
-    }
-}
-
-impl<'a> From<Theme> for Box<dyn radio::StyleSheet + 'a> {
-    fn from(theme: Theme) -> Self {
-        match theme {
-            Theme::Light => Default::default(),
-            Theme::Dark => dark::Radio.into(),
-        }
-    }
-}
-
-impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
-    fn from(theme: Theme) -> Self {
-        match theme {
-            Theme::Light => Default::default(),
-            Theme::Dark => dark::Scrollable.into(),
-        }
-    }
-}
-
-impl From<Theme> for Box<dyn rule::StyleSheet> {
-    fn from(theme: Theme) -> Self {
-        match theme {
-            Theme::Light => Default::default(),
-            Theme::Dark => dark::Rule.into(),
-        }
-    }
-}
-
-mod dark {
-    use iced::{container, radio, rule, scrollable, Color};
-
-    const BACKGROUND: Color = Color::from_rgb(
-        0x36 as f32 / 255.0,
-        0x39 as f32 / 255.0,
-        0x3F as f32 / 255.0,
-    );
-
-    const SURFACE: Color = Color::from_rgb(
-        0x40 as f32 / 255.0,
-        0x44 as f32 / 255.0,
-        0x4B as f32 / 255.0,
-    );
-
-    const ACCENT: Color = Color::from_rgb(
-        0x6F as f32 / 255.0,
-        0xFF as f32 / 255.0,
-        0xE9 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 SCROLLBAR: Color = Color::from_rgb(
-        0x2E as f32 / 255.0,
-        0x33 as f32 / 255.0,
-        0x38 as f32 / 255.0,
-    );
-
-    const SCROLLER: Color = Color::from_rgb(
-        0x20 as f32 / 255.0,
-        0x22 as f32 / 255.0,
-        0x25 as f32 / 255.0,
-    );
-
-    pub struct Container;
-
-    impl container::StyleSheet for Container {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Color {
-                    a: 0.99,
-                    ..BACKGROUND
-                }
-                .into(),
-                text_color: Color::WHITE.into(),
-                ..container::Style::default()
-            }
-        }
-    }
-
-    pub struct Radio;
-
-    impl radio::StyleSheet for Radio {
-        fn active(&self) -> radio::Style {
-            radio::Style {
-                background: SURFACE.into(),
-                dot_color: ACTIVE,
-                border_width: 1.0,
-                border_color: ACTIVE,
-                text_color: None,
-            }
-        }
-
-        fn hovered(&self) -> radio::Style {
-            radio::Style {
-                background: Color { a: 0.5, ..SURFACE }.into(),
-                ..self.active()
-            }
-        }
-    }
-
-    pub struct Scrollable;
-
-    impl scrollable::StyleSheet for Scrollable {
-        fn active(&self) -> scrollable::Scrollbar {
-            scrollable::Scrollbar {
-                background: Color {
-                    a: 0.8,
-                    ..SCROLLBAR
-                }
-                .into(),
-                border_radius: 2.0,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-                scroller: scrollable::Scroller {
-                    color: Color { a: 0.7, ..SCROLLER },
-                    border_radius: 2.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                },
-            }
-        }
-
-        fn hovered(&self) -> scrollable::Scrollbar {
-            let active = self.active();
-
-            scrollable::Scrollbar {
-                background: SCROLLBAR.into(),
-                scroller: scrollable::Scroller {
-                    color: SCROLLER,
-                    ..active.scroller
-                },
-                ..active
-            }
-        }
-
-        fn dragging(&self) -> scrollable::Scrollbar {
-            let hovered = self.hovered();
-
-            scrollable::Scrollbar {
-                scroller: scrollable::Scroller {
-                    color: ACCENT,
-                    ..hovered.scroller
-                },
-                ..hovered
-            }
-        }
-    }
-
-    pub struct Rule;
-
-    impl rule::StyleSheet for Rule {
-        fn style(&self) -> rule::Style {
-            rule::Style {
-                color: SURFACE,
-                width: 2,
-                radius: 1.0,
-                fill_mode: rule::FillMode::Percent(30.0),
-            }
-        }
-    }
-}
diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs
index e96b53ff..cee9a02f 100644
--- a/examples/solar_system/src/main.rs
+++ b/examples/solar_system/src/main.rs
@@ -6,10 +6,15 @@
 //! 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::application;
+use iced::canvas::{self, Cursor, Path, Stroke};
+use iced::executor;
+use iced::theme::{self, Theme};
+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, Vector,
 };
 
 use std::time::Instant;
@@ -31,8 +36,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>) {
@@ -48,10 +54,6 @@ impl Application for SolarSystem {
         String::from("Solar system - Iced")
     }
 
-    fn background_color(&self) -> Color {
-        Color::BLACK
-    }
-
     fn update(&mut self, message: Message) -> Command<Message> {
         match message {
             Message::Tick(instant) => {
@@ -73,6 +75,17 @@ impl Application for SolarSystem {
             .height(Length::Fill)
             .into()
     }
+
+    fn theme(&self) -> Theme {
+        Theme::Dark
+    }
+
+    fn style(&self) -> theme::Application {
+        theme::Application::Custom(|_theme| application::Appearance {
+            background_color: Color::BLACK,
+            text_color: Color::WHITE,
+        })
+    }
 }
 
 #[derive(Debug)]
@@ -135,6 +148,7 @@ impl State {
 impl<Message> canvas::Program<Message> for State {
     fn draw(
         &self,
+        _theme: &Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<canvas::Geometry> {
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..aa90d17c 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, Theme, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -10,7 +14,7 @@ pub fn main() -> iced::Result {
 
 #[derive(Default)]
 struct Styling {
-    theme: style::Theme,
+    theme: Theme,
     scroll: scrollable::State,
     input: text_input::State,
     input_value: String,
@@ -23,7 +27,7 @@ struct Styling {
 
 #[derive(Debug, Clone)]
 enum Message {
-    ThemeChanged(style::Theme),
+    ThemeChanged(Theme),
     InputChanged(String),
     ButtonPressed,
     SliderChanged(f32),
@@ -54,18 +58,15 @@ impl Sandbox for Styling {
     }
 
     fn view(&mut self) -> Element<Message> {
-        let choose_theme = style::Theme::ALL.iter().fold(
+        let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
             Column::new().spacing(10).push(Text::new("Choose a theme:")),
             |column, theme| {
-                column.push(
-                    Radio::new(
-                        *theme,
-                        format!("{:?}", theme),
-                        Some(self.theme),
-                        Message::ThemeChanged,
-                    )
-                    .style(self.theme),
-                )
+                column.push(Radio::new(
+                    *theme,
+                    format!("{:?}", theme),
+                    Some(self.theme),
+                    Message::ThemeChanged,
+                ))
             },
         );
 
@@ -76,29 +77,24 @@ impl Sandbox for Styling {
             Message::InputChanged,
         )
         .padding(10)
-        .size(20)
-        .style(self.theme);
+        .size(20);
 
         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,
             0.0..=100.0,
             self.slider_value,
             Message::SliderChanged,
-        )
-        .style(self.theme);
+        );
 
-        let progress_bar =
-            ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme);
+        let progress_bar = ProgressBar::new(0.0..=100.0, self.slider_value);
 
         let scrollable = Scrollable::new(&mut self.scroll)
             .width(Length::Fill)
             .height(Length::Units(100))
-            .style(self.theme)
             .push(Text::new("Scroll me!"))
             .push(Space::with_height(Length::Units(800)))
             .push(Text::new("You did it!"));
@@ -107,8 +103,7 @@ impl Sandbox for Styling {
             self.checkbox_value,
             "Check me!",
             Message::CheckboxToggled,
-        )
-        .style(self.theme);
+        );
 
         let toggler = Toggler::new(
             self.toggler_value,
@@ -116,15 +111,14 @@ impl Sandbox for Styling {
             Message::TogglerToggled,
         )
         .width(Length::Shrink)
-        .spacing(10)
-        .style(self.theme);
+        .spacing(10);
 
         let content = Column::new()
             .spacing(20)
             .padding(20)
             .max_width(600)
             .push(choose_theme)
-            .push(Rule::horizontal(38).style(self.theme))
+            .push(Rule::horizontal(38))
             .push(Row::new().spacing(10).push(text_input).push(button))
             .push(slider)
             .push(progress_bar)
@@ -134,7 +128,7 @@ impl Sandbox for Styling {
                     .height(Length::Units(100))
                     .align_items(Alignment::Center)
                     .push(scrollable)
-                    .push(Rule::vertical(38).style(self.theme))
+                    .push(Rule::vertical(38))
                     .push(
                         Column::new()
                             .width(Length::Shrink)
@@ -149,445 +143,10 @@ impl Sandbox for Styling {
             .height(Length::Fill)
             .center_x()
             .center_y()
-            .style(self.theme)
             .into()
     }
-}
-
-mod style {
-    use iced::{
-        button, checkbox, container, progress_bar, radio, rule, scrollable,
-        slider, text_input, toggler,
-    };
-
-    #[derive(Debug, Clone, Copy, PartialEq, Eq)]
-    pub enum Theme {
-        Light,
-        Dark,
-    }
-
-    impl Theme {
-        pub const ALL: [Theme; 2] = [Theme::Light, Theme::Dark];
-    }
 
-    impl Default for Theme {
-        fn default() -> Theme {
-            Theme::Light
-        }
-    }
-
-    impl<'a> From<Theme> for Box<dyn container::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Container.into(),
-            }
-        }
-    }
-
-    impl<'a> From<Theme> for Box<dyn radio::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Radio.into(),
-            }
-        }
-    }
-
-    impl<'a> From<Theme> for Box<dyn text_input::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::TextInput.into(),
-            }
-        }
-    }
-
-    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 {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Scrollable.into(),
-            }
-        }
-    }
-
-    impl<'a> From<Theme> for Box<dyn slider::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Slider.into(),
-            }
-        }
-    }
-
-    impl From<Theme> for Box<dyn progress_bar::StyleSheet> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::ProgressBar.into(),
-            }
-        }
-    }
-
-    impl<'a> From<Theme> for Box<dyn checkbox::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Checkbox.into(),
-            }
-        }
-    }
-
-    impl From<Theme> for Box<dyn toggler::StyleSheet> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Toggler.into(),
-            }
-        }
-    }
-
-    impl From<Theme> for Box<dyn rule::StyleSheet> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::Rule.into(),
-            }
-        }
-    }
-
-    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,
-        };
-
-        const SURFACE: Color = Color::from_rgb(
-            0x40 as f32 / 255.0,
-            0x44 as f32 / 255.0,
-            0x4B as f32 / 255.0,
-        );
-
-        const ACCENT: Color = Color::from_rgb(
-            0x6F as f32 / 255.0,
-            0xFF as f32 / 255.0,
-            0xE9 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 struct Container;
-
-        impl container::StyleSheet for Container {
-            fn style(&self) -> container::Style {
-                container::Style {
-                    background: Color::from_rgb8(0x36, 0x39, 0x3F).into(),
-                    text_color: Color::WHITE.into(),
-                    ..container::Style::default()
-                }
-            }
-        }
-
-        pub struct Radio;
-
-        impl radio::StyleSheet for Radio {
-            fn active(&self) -> radio::Style {
-                radio::Style {
-                    background: SURFACE.into(),
-                    dot_color: ACTIVE,
-                    border_width: 1.0,
-                    border_color: ACTIVE,
-                    text_color: None,
-                }
-            }
-
-            fn hovered(&self) -> radio::Style {
-                radio::Style {
-                    background: Color { a: 0.5, ..SURFACE }.into(),
-                    ..self.active()
-                }
-            }
-        }
-
-        pub struct TextInput;
-
-        impl text_input::StyleSheet for TextInput {
-            fn active(&self) -> text_input::Style {
-                text_input::Style {
-                    background: SURFACE.into(),
-                    border_radius: 2.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                }
-            }
-
-            fn focused(&self) -> text_input::Style {
-                text_input::Style {
-                    border_width: 1.0,
-                    border_color: ACCENT,
-                    ..self.active()
-                }
-            }
-
-            fn hovered(&self) -> text_input::Style {
-                text_input::Style {
-                    border_width: 1.0,
-                    border_color: Color { a: 0.3, ..ACCENT },
-                    ..self.focused()
-                }
-            }
-
-            fn placeholder_color(&self) -> Color {
-                Color::from_rgb(0.4, 0.4, 0.4)
-            }
-
-            fn value_color(&self) -> Color {
-                Color::WHITE
-            }
-
-            fn selection_color(&self) -> Color {
-                ACTIVE
-            }
-        }
-
-        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 {
-            fn active(&self) -> scrollable::Scrollbar {
-                scrollable::Scrollbar {
-                    background: SURFACE.into(),
-                    border_radius: 2.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                    scroller: scrollable::Scroller {
-                        color: ACTIVE,
-                        border_radius: 2.0,
-                        border_width: 0.0,
-                        border_color: Color::TRANSPARENT,
-                    },
-                }
-            }
-
-            fn hovered(&self) -> scrollable::Scrollbar {
-                let active = self.active();
-
-                scrollable::Scrollbar {
-                    background: Color { a: 0.5, ..SURFACE }.into(),
-                    scroller: scrollable::Scroller {
-                        color: HOVERED,
-                        ..active.scroller
-                    },
-                    ..active
-                }
-            }
-
-            fn dragging(&self) -> scrollable::Scrollbar {
-                let hovered = self.hovered();
-
-                scrollable::Scrollbar {
-                    scroller: scrollable::Scroller {
-                        color: Color::from_rgb(0.85, 0.85, 0.85),
-                        ..hovered.scroller
-                    },
-                    ..hovered
-                }
-            }
-        }
-
-        pub struct Slider;
-
-        impl slider::StyleSheet for Slider {
-            fn active(&self) -> slider::Style {
-                slider::Style {
-                    rail_colors: (ACTIVE, Color { a: 0.1, ..ACTIVE }),
-                    handle: slider::Handle {
-                        shape: slider::HandleShape::Circle { radius: 9.0 },
-                        color: ACTIVE,
-                        border_width: 0.0,
-                        border_color: Color::TRANSPARENT,
-                    },
-                }
-            }
-
-            fn hovered(&self) -> slider::Style {
-                let active = self.active();
-
-                slider::Style {
-                    handle: slider::Handle {
-                        color: HOVERED,
-                        ..active.handle
-                    },
-                    ..active
-                }
-            }
-
-            fn dragging(&self) -> slider::Style {
-                let active = self.active();
-
-                slider::Style {
-                    handle: slider::Handle {
-                        color: Color::from_rgb(0.85, 0.85, 0.85),
-                        ..active.handle
-                    },
-                    ..active
-                }
-            }
-        }
-
-        pub struct ProgressBar;
-
-        impl progress_bar::StyleSheet for ProgressBar {
-            fn style(&self) -> progress_bar::Style {
-                progress_bar::Style {
-                    background: SURFACE.into(),
-                    bar: ACTIVE.into(),
-                    border_radius: 10.0,
-                }
-            }
-        }
-
-        pub struct Checkbox;
-
-        impl checkbox::StyleSheet for Checkbox {
-            fn active(&self, is_checked: bool) -> checkbox::Style {
-                checkbox::Style {
-                    background: if is_checked { ACTIVE } else { SURFACE }
-                        .into(),
-                    checkmark_color: Color::WHITE,
-                    border_radius: 2.0,
-                    border_width: 1.0,
-                    border_color: ACTIVE,
-                    text_color: None,
-                }
-            }
-
-            fn hovered(&self, is_checked: bool) -> checkbox::Style {
-                checkbox::Style {
-                    background: Color {
-                        a: 0.8,
-                        ..if is_checked { ACTIVE } else { SURFACE }
-                    }
-                    .into(),
-                    ..self.active(is_checked)
-                }
-            }
-        }
-
-        pub struct Toggler;
-
-        impl toggler::StyleSheet for Toggler {
-            fn active(&self, is_active: bool) -> toggler::Style {
-                toggler::Style {
-                    background: if is_active { ACTIVE } else { SURFACE },
-                    background_border: None,
-                    foreground: if is_active { Color::WHITE } else { ACTIVE },
-                    foreground_border: None,
-                }
-            }
-
-            fn hovered(&self, is_active: bool) -> toggler::Style {
-                toggler::Style {
-                    background: if is_active { ACTIVE } else { SURFACE },
-                    background_border: None,
-                    foreground: if is_active {
-                        Color {
-                            a: 0.5,
-                            ..Color::WHITE
-                        }
-                    } else {
-                        Color { a: 0.5, ..ACTIVE }
-                    },
-                    foreground_border: None,
-                }
-            }
-        }
-
-        pub struct Rule;
-
-        impl rule::StyleSheet for Rule {
-            fn style(&self) -> rule::Style {
-                rule::Style {
-                    color: SURFACE,
-                    width: 2,
-                    radius: 1.0,
-                    fill_mode: rule::FillMode::Padded(15),
-                }
-            }
-        }
+    fn theme(&self) -> Theme {
+        self.theme
     }
 }
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..dc080ef5 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -2,9 +2,10 @@ 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,
+    Application, Checkbox, Color, Column, Command, Container, Element, Font,
+    Length, Row, Settings, Text,
 };
 use serde::{Deserialize, Serialize};
 
@@ -42,6 +43,7 @@ enum Message {
 
 impl Application for Todos {
     type Executor = iced::executor::Default;
+    type Theme = Theme;
     type Message = Message;
     type Flags = ();
 
@@ -153,7 +155,7 @@ impl Application for Todos {
                 let title = Text::new("todos")
                     .width(Length::Fill)
                     .size(100)
-                    .color([0.5, 0.5, 0.5])
+                    .style(Color::from([0.5, 0.5, 0.5]))
                     .horizontal_alignment(alignment::Horizontal::Center);
 
                 let input = TextInput::new(
@@ -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)
@@ -451,7 +453,7 @@ fn empty_message<'a>(message: &str) -> Element<'a, Message> {
             .width(Length::Fill)
             .size(25)
             .horizontal_alignment(alignment::Horizontal::Center)
-            .color([0.7, 0.7, 0.7]),
+            .style(Color::from([0.7, 0.7, 0.7])),
     )
     .width(Length::Fill)
     .height(Length::Units(200))
@@ -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/tooltip/src/main.rs b/examples/tooltip/src/main.rs
index cfeaf6a6..1bd1133c 100644
--- a/examples/tooltip/src/main.rs
+++ b/examples/tooltip/src/main.rs
@@ -1,7 +1,9 @@
+use iced::alignment::{self, Alignment};
+use iced::button;
+use iced::theme;
 use iced::tooltip::{self, Tooltip};
 use iced::{
-    alignment, button, Alignment, Button, Column, Container, Element, Length,
-    Row, Sandbox, Settings, Text,
+    Button, Column, Container, Element, Length, Row, Sandbox, Settings, Text,
 };
 
 pub fn main() {
@@ -115,24 +117,6 @@ fn tooltip<'a>(
     )
     .gap(5)
     .padding(10)
-    .style(style::Tooltip)
+    .style(theme::Container::Box)
     .into()
 }
-
-mod style {
-    use iced::container;
-    use iced::Color;
-
-    pub struct Tooltip;
-
-    impl container::StyleSheet for Tooltip {
-        fn style(&self) -> container::Style {
-            container::Style {
-                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
-                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
-                border_radius: 12.0,
-                ..container::Style::default()
-            }
-        }
-    }
-}
diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index 2024d25a..d85f2916 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),
             );
         }
 
@@ -132,7 +138,7 @@ impl Steps {
                     size_slider: slider::State::new(),
                     size: 30,
                     color_sliders: [slider::State::new(); 3],
-                    color: Color::BLACK,
+                    color: Color::from_rgb(0.5, 0.5, 0.5),
                 },
                 Step::Radio { selection: None },
                 Step::Toggler {
@@ -528,7 +534,7 @@ impl<'a> Step {
             .padding(20)
             .spacing(20)
             .push(Text::new("And its color:"))
-            .push(Text::new(format!("{:?}", color)).color(color))
+            .push(Text::new(format!("{:?}", color)).style(color))
             .push(color_sliders);
 
         Self::container("Text")
@@ -710,7 +716,7 @@ impl<'a> Step {
             .push(if cfg!(target_arch = "wasm32") {
                 Element::new(
                     Text::new("Not available on web yet!")
-                        .color([0.7, 0.7, 0.7])
+                        .style(Color::from([0.7, 0.7, 0.7]))
                         .horizontal_alignment(alignment::Horizontal::Center),
                 )
             } else {
@@ -770,7 +776,7 @@ fn color_slider(
     state: &mut slider::State,
     component: f32,
     update: impl Fn(f32) -> Color + 'static,
-) -> Slider<f64, StepMessage> {
+) -> Slider<f64, StepMessage, iced::Renderer> {
     Slider::new(state, 0.0..=1.0, f64::from(component), move |c| {
         StepMessage::TextColorChanged(update(c as f32))
     })
@@ -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..64addc8f 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;
 
@@ -91,7 +92,7 @@ impl Application for WebSocket {
         let message_log = if self.messages.is_empty() {
             Container::new(
                 Text::new("Your messages will appear here...")
-                    .color(Color::from_rgb8(0x88, 0x88, 0x88)),
+                    .style(Color::from_rgb8(0x88, 0x88, 0x88)),
             )
             .width(Length::Fill)
             .height(Length::Fill)
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..dddf0067 100644
--- a/glutin/src/application.rs
+++ b/glutin/src/application.rs
@@ -2,6 +2,7 @@
 use crate::mouse;
 use crate::{Error, Executor, Runtime};
 
+pub use iced_winit::application::StyleSheet;
 pub use iced_winit::Application;
 
 use iced_graphics::window;
@@ -9,6 +10,7 @@ use iced_winit::application;
 use iced_winit::conversion;
 use iced_winit::futures;
 use iced_winit::futures::channel::mpsc;
+use iced_winit::renderer;
 use iced_winit::user_interface;
 use iced_winit::{Clipboard, Debug, Proxy, Settings};
 
@@ -25,6 +27,7 @@ where
     A: Application + 'static,
     E: Executor + 'static,
     C: window::GLCompositor<Renderer = A::Renderer> + 'static,
+    <A::Renderer as iced_native::Renderer>::Theme: StyleSheet,
 {
     use futures::task;
     use futures::Future;
@@ -203,12 +206,14 @@ async fn run_instance<A, E, C>(
     A: Application + 'static,
     E: Executor + 'static,
     C: window::GLCompositor<Renderer = A::Renderer> + 'static,
+    <A::Renderer as iced_native::Renderer>::Theme: StyleSheet,
 {
     use glutin::event;
     use iced_winit::futures::stream::StreamExt;
 
     let mut state = application::State::new(&application, context.window());
     let mut viewport_version = state.viewport_version();
+
     let mut user_interface =
         ManuallyDrop::new(application::build_user_interface(
             &mut application,
@@ -288,8 +293,14 @@ 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,
+                    state.theme(),
+                    &renderer::Style {
+                        text_color: state.text_color(),
+                    },
+                    state.cursor_position(),
+                );
                 debug.draw_finished();
 
                 if new_mouse_interaction != mouse_interaction {
@@ -341,8 +352,14 @@ 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,
+                        state.theme(),
+                        &renderer::Style {
+                            text_color: state.text_color(),
+                        },
+                        state.cursor_position(),
+                    );
                     debug.draw_finished();
 
                     if new_mouse_interaction != mouse_interaction {
diff --git a/graphics/src/overlay/menu.rs b/graphics/src/overlay/menu.rs
index c5ff093d..8b489e5e 100644
--- a/graphics/src/overlay/menu.rs
+++ b/graphics/src/overlay/menu.rs
@@ -1,3 +1,3 @@
 //! Build and show dropdown menus.
 
-pub use iced_style::menu::Style;
+pub use iced_style::menu::{Appearance, StyleSheet};
diff --git a/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..c3e28e8c 100644
--- a/graphics/src/widget/canvas.rs
+++ b/graphics/src/widget/canvas.rs
@@ -62,10 +62,10 @@ use std::marker::PhantomData;
 /// ```no_run
 /// # mod iced {
 /// #     pub use iced_graphics::canvas;
-/// #     pub use iced_native::{Color, Rectangle};
+/// #     pub use iced_native::{Color, Rectangle, Theme};
 /// # }
 /// use iced::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
-/// use iced::{Color, Rectangle};
+/// use iced::{Color, Rectangle, Theme};
 ///
 /// // First, we define the data we need for drawing
 /// #[derive(Debug)]
@@ -75,7 +75,7 @@ use std::marker::PhantomData;
 ///
 /// // Then, we implement the `Program` trait
 /// impl Program<()> for Circle {
-///     fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
+///     fn draw(&self, _theme: &Theme, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
 ///         // We prepare a new `Frame`
 ///         let mut frame = Frame::new(bounds.size());
 ///
@@ -94,14 +94,21 @@ use std::marker::PhantomData;
 /// let canvas = Canvas::new(Circle { radius: 50.0 });
 /// ```
 #[derive(Debug)]
-pub struct Canvas<Message, P: Program<Message>> {
+pub struct Canvas<Message, Theme, P>
+where
+    P: Program<Message, Theme>,
+{
     width: Length,
     height: Length,
     program: P,
     message_: PhantomData<Message>,
+    theme_: PhantomData<Theme>,
 }
 
-impl<Message, P: Program<Message>> Canvas<Message, P> {
+impl<Message, Theme, P> Canvas<Message, Theme, P>
+where
+    P: Program<Message, Theme>,
+{
     const DEFAULT_SIZE: u16 = 100;
 
     /// Creates a new [`Canvas`].
@@ -111,6 +118,7 @@ impl<Message, P: Program<Message>> Canvas<Message, P> {
             height: Length::Units(Self::DEFAULT_SIZE),
             program,
             message_: PhantomData,
+            theme_: PhantomData,
         }
     }
 
@@ -127,9 +135,9 @@ 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, T, P>
 where
-    P: Program<Message>,
+    P: Program<Message, T>,
     B: Backend,
 {
     fn width(&self) -> Length {
@@ -142,7 +150,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 +164,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 +201,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 +211,8 @@ where
 
     fn draw(
         &self,
-        renderer: &mut Renderer<B>,
+        renderer: &mut Renderer<B, T>,
+        theme: &T,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -224,7 +233,7 @@ where
             renderer.draw_primitive(Primitive::Group {
                 primitives: self
                     .program
-                    .draw(bounds, cursor)
+                    .draw(theme, bounds, cursor)
                     .into_iter()
                     .map(Geometry::into_primitive)
                     .collect(),
@@ -233,14 +242,17 @@ 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, T, P>>
+    for Element<'a, Message, Renderer<B, T>>
 where
     Message: 'static,
-    P: Program<Message> + 'a,
+    P: Program<Message, T> + 'a,
     B: Backend,
+    T: 'a,
 {
-    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer<B>> {
+    fn from(
+        canvas: Canvas<Message, T, P>,
+    ) -> Element<'a, Message, Renderer<B, T>> {
         Element::new(canvas)
     }
 }
diff --git a/graphics/src/widget/canvas/program.rs b/graphics/src/widget/canvas/program.rs
index 85a2f67b..dddc387d 100644
--- a/graphics/src/widget/canvas/program.rs
+++ b/graphics/src/widget/canvas/program.rs
@@ -1,6 +1,8 @@
 use crate::canvas::event::{self, Event};
 use crate::canvas::{Cursor, Geometry};
-use iced_native::{mouse, Rectangle};
+
+use iced_native::mouse;
+use iced_native::Rectangle;
 
 /// The state and logic of a [`Canvas`].
 ///
@@ -8,7 +10,7 @@ use iced_native::{mouse, Rectangle};
 /// application.
 ///
 /// [`Canvas`]: crate::widget::Canvas
-pub trait Program<Message> {
+pub trait Program<Message, Theme = iced_native::Theme> {
     /// Updates the state of the [`Program`].
     ///
     /// When a [`Program`] is used in a [`Canvas`], the runtime will call this
@@ -36,7 +38,12 @@ pub trait Program<Message> {
     ///
     /// [`Frame`]: crate::widget::canvas::Frame
     /// [`Cache`]: crate::widget::canvas::Cache
-    fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry>;
+    fn draw(
+        &self,
+        theme: &Theme,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Vec<Geometry>;
 
     /// Returns the current mouse interaction of the [`Program`].
     ///
@@ -53,9 +60,9 @@ pub trait Program<Message> {
     }
 }
 
-impl<T, Message> Program<Message> for &mut T
+impl<T, Message, Theme> Program<Message, Theme> for &mut T
 where
-    T: Program<Message>,
+    T: Program<Message, Theme>,
 {
     fn update(
         &mut self,
@@ -66,8 +73,13 @@ where
         T::update(self, event, bounds, cursor)
     }
 
-    fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> {
-        T::draw(self, bounds, cursor)
+    fn draw(
+        &self,
+        theme: &Theme,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Vec<Geometry> {
+        T::draw(self, theme, bounds, cursor)
     }
 
     fn mouse_interaction(
diff --git a/graphics/src/widget/pure/canvas.rs b/graphics/src/widget/pure/canvas.rs
index b51d5853..0eeff3d1 100644
--- a/graphics/src/widget/pure/canvas.rs
+++ b/graphics/src/widget/pure/canvas.rs
@@ -30,10 +30,10 @@ use std::marker::PhantomData;
 /// #     pub mod pure {
 /// #         pub use iced_graphics::pure::canvas;
 /// #     }
-/// #     pub use iced_native::{Color, Rectangle};
+/// #     pub use iced_native::{Color, Rectangle, Theme};
 /// # }
 /// use iced::pure::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
-/// use iced::{Color, Rectangle};
+/// use iced::{Color, Rectangle, Theme};
 ///
 /// // First, we define the data we need for drawing
 /// #[derive(Debug)]
@@ -45,7 +45,7 @@ use std::marker::PhantomData;
 /// impl Program<()> for Circle {
 ///     type State = ();
 ///
-///     fn draw(&self, _state: &(), bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
+///     fn draw(&self, _state: &(), _theme: &Theme, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
 ///         // We prepare a new `Frame`
 ///         let mut frame = Frame::new(bounds.size());
 ///
@@ -64,19 +64,20 @@ use std::marker::PhantomData;
 /// let canvas = Canvas::new(Circle { radius: 50.0 });
 /// ```
 #[derive(Debug)]
-pub struct Canvas<Message, P>
+pub struct Canvas<Message, Theme, P>
 where
-    P: Program<Message>,
+    P: Program<Message, Theme>,
 {
     width: Length,
     height: Length,
     program: P,
     message_: PhantomData<Message>,
+    theme_: PhantomData<Theme>,
 }
 
-impl<Message, P> Canvas<Message, P>
+impl<Message, Theme, P> Canvas<Message, Theme, P>
 where
-    P: Program<Message>,
+    P: Program<Message, Theme>,
 {
     const DEFAULT_SIZE: u16 = 100;
 
@@ -87,6 +88,7 @@ where
             height: Length::Units(Self::DEFAULT_SIZE),
             program,
             message_: PhantomData,
+            theme_: PhantomData,
         }
     }
 
@@ -103,9 +105,9 @@ 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, T, P>
 where
-    P: Program<Message>,
+    P: Program<Message, T>,
     B: Backend,
 {
     fn tag(&self) -> tree::Tag {
@@ -127,7 +129,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);
@@ -142,7 +144,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 {
@@ -182,7 +184,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);
@@ -194,7 +196,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,
@@ -216,7 +219,7 @@ where
             renderer.draw_primitive(Primitive::Group {
                 primitives: self
                     .program
-                    .draw(state, bounds, cursor)
+                    .draw(state, theme, bounds, cursor)
                     .into_iter()
                     .map(Geometry::into_primitive)
                     .collect(),
@@ -225,14 +228,17 @@ 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, T, P>>
+    for Element<'a, Message, Renderer<B, T>>
 where
     Message: 'a,
-    P: Program<Message> + 'a,
+    P: Program<Message, T> + 'a,
     B: Backend,
+    T: 'a,
 {
-    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer<B>> {
+    fn from(
+        canvas: Canvas<Message, T, P>,
+    ) -> Element<'a, Message, Renderer<B, T>> {
         Element::new(canvas)
     }
 }
diff --git a/graphics/src/widget/pure/canvas/program.rs b/graphics/src/widget/pure/canvas/program.rs
index 058b364b..20c6406e 100644
--- a/graphics/src/widget/pure/canvas/program.rs
+++ b/graphics/src/widget/pure/canvas/program.rs
@@ -9,7 +9,7 @@ use crate::Rectangle;
 /// application.
 ///
 /// [`Canvas`]: crate::widget::Canvas
-pub trait Program<Message> {
+pub trait Program<Message, Theme = iced_native::Theme> {
     /// The internal state mutated by the [`Program`].
     type State: Default + 'static;
 
@@ -44,6 +44,7 @@ pub trait Program<Message> {
     fn draw(
         &self,
         state: &Self::State,
+        theme: &Theme,
         bounds: Rectangle,
         cursor: Cursor,
     ) -> Vec<Geometry>;
@@ -64,9 +65,9 @@ pub trait Program<Message> {
     }
 }
 
-impl<Message, T> Program<Message> for &T
+impl<Message, Theme, T> Program<Message, Theme> for &T
 where
-    T: Program<Message>,
+    T: Program<Message, Theme>,
 {
     type State = T::State;
 
@@ -83,10 +84,11 @@ where
     fn draw(
         &self,
         state: &Self::State,
+        theme: &Theme,
         bounds: Rectangle,
         cursor: Cursor,
     ) -> Vec<Geometry> {
-        T::draw(self, state, bounds, cursor)
+        T::draw(self, state, theme, bounds, cursor)
     }
 
     fn mouse_interaction(
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 2029c2a3..2c6b6ffb 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 8de40e8c..9b29b628 100644
--- a/lazy/src/pure/component.rs
+++ b/lazy/src/pure/component.rs
@@ -232,6 +232,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -241,6 +242,7 @@ where
             element.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 style,
                 layout,
                 cursor_position,
@@ -375,12 +377,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..2d0dd6ec 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -76,6 +76,8 @@ pub use iced_core::{
     Rectangle, Size, Vector,
 };
 pub use iced_futures::{executor, futures};
+pub use iced_style::application;
+pub use iced_style::theme;
 
 #[doc(no_inline)]
 pub use executor::Executor;
@@ -93,5 +95,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..979a13c3 100644
--- a/native/src/overlay/menu.rs
+++ b/native/src/overlay/menu.rs
@@ -7,18 +7,22 @@ use crate::overlay;
 use crate::renderer;
 use crate::text::{self, Text};
 use crate::touch;
+use crate::widget::container::{self, Container};
 use crate::widget::scrollable::{self, Scrollable};
-use crate::widget::Container;
 use crate::{
     Clipboard, Color, Element, Layout, Length, Padding, Point, Rectangle,
     Shell, Size, Vector, Widget,
 };
 
-pub use iced_style::menu::Style;
+pub use iced_style::menu::{Appearance, StyleSheet};
 
 /// A list of selectable options.
 #[allow(missing_debug_implementations)]
-pub struct Menu<'a, T, Renderer: text::Renderer> {
+pub struct Menu<'a, T, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
@@ -27,13 +31,15 @@ pub struct Menu<'a, T, Renderer: text::Renderer> {
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style: Style,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, T, Renderer> Menu<'a, T, Renderer>
 where
     T: ToString + Clone,
     Renderer: text::Renderer + 'a,
+    Renderer::Theme:
+        StyleSheet + container::StyleSheet + scrollable::StyleSheet,
 {
     /// Creates a new [`Menu`] with the given [`State`], a list of options, and
     /// the message to produced when an option is selected.
@@ -81,7 +87,10 @@ where
     }
 
     /// Sets the style of the [`Menu`].
-    pub fn style(mut self, style: impl Into<Style>) -> Self {
+    pub fn style(
+        mut self,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+    ) -> Self {
         self.style = style.into();
         self
     }
@@ -117,17 +126,24 @@ impl State {
     }
 }
 
-struct Overlay<'a, Message, Renderer: text::Renderer> {
+struct Overlay<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
+{
     container: Container<'a, Message, Renderer>,
     width: u16,
     target_height: f32,
-    style: Style,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer: text::Renderer> Overlay<'a, Message, Renderer>
+impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
 where
     Message: 'a,
     Renderer: 'a,
+    Renderer: text::Renderer,
+    Renderer::Theme:
+        StyleSheet + container::StyleSheet + scrollable::StyleSheet,
 {
     pub fn new<T>(menu: Menu<'a, T, Renderer>, target_height: f32) -> Self
     where
@@ -153,9 +169,8 @@ where
                 font,
                 text_size,
                 padding,
-                style: style.clone(),
-            }))
-            .padding(1);
+                style,
+            }));
 
         Self {
             container,
@@ -170,6 +185,7 @@ impl<'a, Message, Renderer> crate::Overlay<Message, Renderer>
     for Overlay<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn layout(
         &self,
@@ -241,35 +257,50 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
     ) {
+        let appearance = theme.appearance(self.style);
         let bounds = layout.bounds();
 
         renderer.fill_quad(
             renderer::Quad {
-                bounds,
-                border_color: self.style.border_color,
-                border_width: self.style.border_width,
+                bounds: Rectangle {
+                    width: bounds.width - 1.0,
+                    ..bounds
+                },
+                border_color: appearance.border_color,
+                border_width: appearance.border_width,
                 border_radius: 0.0,
             },
-            self.style.background,
+            appearance.background,
         );
 
-        self.container
-            .draw(renderer, style, layout, cursor_position, &bounds);
+        self.container.draw(
+            renderer,
+            theme,
+            style,
+            layout,
+            cursor_position,
+            &bounds,
+        );
     }
 }
 
-struct List<'a, T, Renderer: text::Renderer> {
+struct List<'a, T, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     options: &'a [T],
     hovered_option: &'a mut Option<usize>,
     last_selection: &'a mut Option<T>,
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style: Style,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, T, Message, Renderer> Widget<Message, Renderer>
@@ -277,6 +308,7 @@ impl<'a, T, Message, Renderer> Widget<Message, Renderer>
 where
     T: Clone + ToString,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         Length::Fill
@@ -389,11 +421,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
         viewport: &Rectangle,
     ) {
+        let appearance = theme.appearance(self.style);
         let bounds = layout.bounds();
 
         let text_size = self.text_size.unwrap_or(renderer.default_size());
@@ -425,7 +459,7 @@ where
                         border_width: 0.0,
                         border_radius: 0.0,
                     },
-                    self.style.selected_background,
+                    appearance.selected_background,
                 );
             }
 
@@ -440,9 +474,9 @@ where
                 size: f32::from(text_size),
                 font: self.font.clone(),
                 color: if is_selected {
-                    self.style.selected_text_color
+                    appearance.selected_text_color
                 } else {
-                    self.style.text_color
+                    appearance.text_color
                 },
                 horizontal_alignment: alignment::Horizontal::Left,
                 vertical_alignment: alignment::Vertical::Center,
@@ -457,6 +491,7 @@ where
     T: ToString + Clone,
     Message: 'a,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/native/src/program/state.rs b/native/src/program/state.rs
index cb87a628..7ec2a04f 100644
--- a/native/src/program/state.rs
+++ b/native/src/program/state.rs
@@ -1,4 +1,6 @@
+use crate::application;
 use crate::mouse;
+use crate::renderer;
 use crate::user_interface::{self, UserInterface};
 use crate::{Clipboard, Command, Debug, Event, Point, Program, Size};
 
@@ -19,6 +21,7 @@ where
 impl<P> State<P>
 where
     P: Program + 'static,
+    <P::Renderer as crate::Renderer>::Theme: application::StyleSheet,
 {
     /// Creates a new [`State`] with the provided [`Program`], initializing its
     /// primitive with the given logical bounds and renderer.
@@ -86,6 +89,8 @@ where
         bounds: Size,
         cursor_position: Point,
         renderer: &mut P::Renderer,
+        theme: &<P::Renderer as crate::Renderer>::Theme,
+        style: &renderer::Style,
         clipboard: &mut dyn Clipboard,
         debug: &mut Debug,
     ) -> Option<Command<P::Message>> {
@@ -115,7 +120,7 @@ where
         if messages.is_empty() {
             debug.draw_started();
             self.mouse_interaction =
-                user_interface.draw(renderer, cursor_position);
+                user_interface.draw(renderer, theme, style, cursor_position);
             debug.draw_finished();
 
             self.cache = Some(user_interface.into_cache());
@@ -147,7 +152,7 @@ where
 
             debug.draw_started();
             self.mouse_interaction =
-                user_interface.draw(renderer, cursor_position);
+                user_interface.draw(renderer, theme, style, cursor_position);
             debug.draw_finished();
 
             self.cache = Some(user_interface.into_cache());
@@ -163,7 +168,10 @@ fn build_user_interface<'a, P: Program>(
     renderer: &mut P::Renderer,
     size: Size,
     debug: &mut Debug,
-) -> UserInterface<'a, P::Message, P::Renderer> {
+) -> UserInterface<'a, P::Message, P::Renderer>
+where
+    <P::Renderer as crate::Renderer>::Theme: application::StyleSheet,
+{
     debug.view_started();
     let view = program.view();
     debug.view_finished();
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 2f2dc110..97a004e7 100644
--- a/native/src/user_interface.rs
+++ b/native/src/user_interface.rs
@@ -1,4 +1,5 @@
 //! Implement your own event loop to drive a user interface.
+use crate::application;
 use crate::event::{self, Event};
 use crate::layout;
 use crate::mouse;
@@ -28,6 +29,7 @@ pub struct UserInterface<'a, Message, Renderer> {
 impl<'a, Message, Renderer> UserInterface<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: application::StyleSheet,
 {
     /// Builds a user interface for an [`Element`].
     ///
@@ -301,8 +303,10 @@ where
     /// [completing the last example](#example-1):
     ///
     /// ```no_run
-    /// use iced_native::{clipboard, Size, Point};
+    /// use iced_native::clipboard;
+    /// use iced_native::renderer;
     /// use iced_native::user_interface::{self, UserInterface};
+    /// use iced_native::{Size, Point, Theme};
     /// use iced_wgpu::Renderer;
     ///
     /// # mod iced_wgpu {
@@ -349,7 +353,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(), &renderer::Style::default(), cursor_position);
     ///
     ///     cache = user_interface.into_cache();
     ///
@@ -364,6 +368,8 @@ where
     pub fn draw(
         &mut self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        style: &renderer::Style,
         cursor_position: Point,
     ) -> mouse::Interaction {
         // TODO: Move to shell level (?)
@@ -395,7 +401,8 @@ where
 
         self.root.widget.draw(
             renderer,
-            &renderer::Style::default(),
+            theme,
+            style,
             Layout::new(&self.base),
             base_cursor,
             &viewport,
@@ -436,7 +443,8 @@ where
                     renderer.with_layer(overlay_bounds, |renderer| {
                         overlay.draw(
                             renderer,
-                            &renderer::Style::default(),
+                            theme,
+                            style,
                             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..d4e88424 100644
--- a/native/src/widget/button.rs
+++ b/native/src/widget/button.rs
@@ -12,7 +12,7 @@ use crate::{
     Rectangle, Shell, Vector, Widget,
 };
 
-pub use iced_style::button::{Style, StyleSheet};
+pub use iced_style::button::{Appearance, StyleSheet};
 
 /// A generic widget that produces a message when pressed.
 ///
@@ -55,20 +55,25 @@ 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>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Button<'a, Message, Renderer>
 where
     Message: Clone,
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`Button`] with some local [`State`] and the given
     /// content.
@@ -83,7 +88,7 @@ where
             width: Length::Shrink,
             height: Length::Shrink,
             padding: Padding::new(5),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -112,12 +117,12 @@ where
         self
     }
 
-    /// Sets the style of the [`Button`].
+    /// Sets the style of this [`Button`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: <Renderer::Theme as StyleSheet>::Style,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style;
         self
     }
 }
@@ -195,23 +200,29 @@ pub fn draw<'a, Renderer: crate::Renderer>(
     bounds: Rectangle,
     cursor_position: Point,
     is_enabled: bool,
-    style_sheet: &dyn StyleSheet,
+    style_sheet: &dyn StyleSheet<
+        Style = <Renderer::Theme as StyleSheet>::Style,
+    >,
+    style: <Renderer::Theme as StyleSheet>::Style,
     state: impl FnOnce() -> &'a State,
-) -> Style {
+) -> Appearance
+where
+    Renderer::Theme: StyleSheet,
+{
     let is_mouse_over = bounds.contains(cursor_position);
 
     let styling = if !is_enabled {
-        style_sheet.disabled()
+        style_sheet.disabled(style)
     } else if is_mouse_over {
         let state = state();
 
         if state.is_pressed {
-            style_sheet.pressed()
+            style_sheet.pressed(style)
         } else {
-            style_sheet.hovered()
+            style_sheet.hovered(style)
         }
     } else {
-        style_sheet.active()
+        style_sheet.active(style)
     };
 
     if styling.background.is_some() || styling.border_width > 0.0 {
@@ -287,6 +298,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Message: Clone,
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -354,6 +366,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -367,12 +380,14 @@ where
             bounds,
             cursor_position,
             self.on_press.is_some(),
-            self.style_sheet.as_ref(),
+            theme,
+            self.style,
             || &self.state,
         );
 
         self.content.draw(
             renderer,
+            theme,
             &renderer::Style {
                 text_color: styling.text_color,
             },
@@ -397,6 +412,7 @@ impl<'a, Message, Renderer> From<Button<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         button: Button<'a, Message, Renderer>,
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index b6d920df..9e7f183a 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -12,7 +12,7 @@ use crate::{
     Widget,
 };
 
-pub use iced_style::checkbox::{Style, StyleSheet};
+pub use iced_style::checkbox::{Appearance, StyleSheet};
 
 /// A box that can be checked.
 ///
@@ -32,7 +32,11 @@ pub use iced_style::checkbox::{Style, StyleSheet};
 ///
 /// ![Checkbox drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/checkbox.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Checkbox<'a, Message, Renderer: text::Renderer> {
+pub struct Checkbox<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
+{
     is_checked: bool,
     on_toggle: Box<dyn Fn(bool) -> Message + 'a>,
     label: String,
@@ -41,10 +45,14 @@ pub struct Checkbox<'a, Message, Renderer: text::Renderer> {
     spacing: u16,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer: text::Renderer> Checkbox<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Checkbox<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
+{
     /// The default size of a [`Checkbox`].
     const DEFAULT_SIZE: u16 = 20;
 
@@ -72,7 +80,7 @@ impl<'a, Message, Renderer: text::Renderer> Checkbox<'a, Message, Renderer> {
             spacing: Self::DEFAULT_SPACING,
             text_size: None,
             font: Renderer::Font::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -111,9 +119,9 @@ impl<'a, Message, Renderer: text::Renderer> Checkbox<'a, Message, Renderer> {
     /// Sets the style of the [`Checkbox`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -122,6 +130,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Checkbox<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -197,6 +206,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -208,9 +218,9 @@ where
         let mut children = layout.children();
 
         let custom_style = if is_mouse_over {
-            self.style_sheet.hovered(self.is_checked)
+            theme.hovered(self.style, self.is_checked)
         } else {
-            self.style_sheet.active(self.is_checked)
+            theme.active(self.style, self.is_checked)
         };
 
         {
@@ -252,9 +262,11 @@ where
                 style,
                 label_layout,
                 &self.label,
-                self.font.clone(),
                 self.text_size,
-                custom_style.text_color,
+                self.font.clone(),
+                widget::text::Appearance {
+                    color: custom_style.text_color,
+                },
                 alignment::Horizontal::Left,
                 alignment::Vertical::Center,
             );
@@ -265,8 +277,9 @@ where
 impl<'a, Message, Renderer> From<Checkbox<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + text::Renderer,
     Message: 'a,
+    Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn from(
         checkbox: Checkbox<'a, Message, Renderer>,
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..493aa67b 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -12,13 +12,17 @@ use crate::{
 
 use std::u32;
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_style::container::{Appearance, StyleSheet};
 
 /// An element decorating some content.
 ///
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
-pub struct Container<'a, Message, Renderer> {
+pub struct Container<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     padding: Padding,
     width: Length,
     height: Length,
@@ -26,13 +30,14 @@ pub struct Container<'a, Message, Renderer> {
     max_height: u32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
     content: Element<'a, Message, Renderer>,
 }
 
 impl<'a, Message, Renderer> Container<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates an empty [`Container`].
     pub fn new<T>(content: T) -> Self
@@ -47,7 +52,7 @@ where
             max_height: u32::MAX,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
-            style_sheet: Default::default(),
+            style: Default::default(),
             content: content.into(),
         }
     }
@@ -109,9 +114,9 @@ where
     /// Sets the style of the [`Container`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -146,6 +151,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Container<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -209,17 +215,19 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
 
         draw_background(renderer, &style, layout.bounds());
 
         self.content.draw(
             renderer,
+            theme,
             &renderer::Style {
                 text_color: style
                     .text_color
@@ -244,20 +252,20 @@ where
 /// Draws the background of a [`Container`] given its [`Style`] and its `bounds`.
 pub fn draw_background<Renderer>(
     renderer: &mut Renderer,
-    style: &Style,
+    appearance: &Appearance,
     bounds: Rectangle,
 ) where
     Renderer: crate::Renderer,
 {
-    if style.background.is_some() || style.border_width > 0.0 {
+    if appearance.background.is_some() || appearance.border_width > 0.0 {
         renderer.fill_quad(
             renderer::Quad {
                 bounds,
-                border_radius: style.border_radius,
-                border_width: style.border_width,
-                border_color: style.border_color,
+                border_radius: appearance.border_radius,
+                border_width: appearance.border_width,
+                border_color: appearance.border_color,
             },
-            style
+            appearance
                 .background
                 .unwrap_or(Background::Color(Color::TRANSPARENT)),
         );
@@ -267,8 +275,9 @@ pub fn draw_background<Renderer>(
 impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         column: Container<'a, Message, Renderer>,
diff --git a/native/src/widget/image.rs b/native/src/widget/image.rs
index 8e7a28e5..72075bd1 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..eb969dbf 100644
--- a/native/src/widget/pane_grid.rs
+++ b/native/src/widget/pane_grid.rs
@@ -36,6 +36,7 @@ use crate::mouse;
 use crate::overlay;
 use crate::renderer;
 use crate::touch;
+use crate::widget::container;
 use crate::{
     Clipboard, Color, Element, Layout, Length, Point, Rectangle, Shell, Size,
     Vector, Widget,
@@ -93,7 +94,11 @@ pub use iced_style::pane_grid::{Line, StyleSheet};
 ///     .on_resize(10, Message::PaneResized);
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct PaneGrid<'a, Message, Renderer> {
+pub struct PaneGrid<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
+{
     state: &'a mut state::Internal,
     action: &'a mut state::Action,
     elements: Vec<(Pane, Content<'a, Message, Renderer>)>,
@@ -103,12 +108,13 @@ pub struct PaneGrid<'a, Message, Renderer> {
     on_click: Option<Box<dyn Fn(Pane) -> Message + 'a>>,
     on_drag: Option<Box<dyn Fn(DragEvent) -> Message + 'a>>,
     on_resize: Option<(u16, Box<dyn Fn(ResizeEvent) -> Message + 'a>)>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
     ///
@@ -136,7 +142,7 @@ where
             on_click: None,
             on_drag: None,
             on_resize: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -196,8 +202,11 @@ where
     }
 
     /// Sets the style of the [`PaneGrid`].
-    pub fn style(mut self, style: impl Into<Box<dyn StyleSheet + 'a>>) -> Self {
-        self.style_sheet = style.into();
+    pub fn style(
+        mut self,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+    ) -> Self {
+        self.style = style.into();
         self
     }
 }
@@ -468,11 +477,12 @@ pub fn draw<Renderer, T>(
     layout: Layout<'_>,
     cursor_position: Point,
     renderer: &mut Renderer,
-    style: &renderer::Style,
+    theme: &Renderer::Theme,
+    default_style: &renderer::Style,
     viewport: &Rectangle,
     spacing: u16,
     resize_leeway: Option<u16>,
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
     elements: impl Iterator<Item = (Pane, T)>,
     draw_pane: impl Fn(
         T,
@@ -484,6 +494,7 @@ pub fn draw<Renderer, T>(
     ),
 ) where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     let picked_pane = action.picked_pane();
 
@@ -545,7 +556,7 @@ pub fn draw<Renderer, T>(
                             draw_pane(
                                 pane,
                                 renderer,
-                                style,
+                                default_style,
                                 layout,
                                 pane_cursor_position,
                                 viewport,
@@ -558,7 +569,7 @@ pub fn draw<Renderer, T>(
                 draw_pane(
                     pane,
                     renderer,
-                    style,
+                    default_style,
                     layout,
                     pane_cursor_position,
                     viewport,
@@ -569,9 +580,9 @@ pub fn draw<Renderer, T>(
 
     if let Some((axis, split_region, is_picked)) = picked_split {
         let highlight = if is_picked {
-            style_sheet.picked_split()
+            theme.picked_split(style)
         } else {
-            style_sheet.hovered_split()
+            theme.hovered_split(style)
         };
 
         if let Some(highlight) = highlight {
@@ -649,6 +660,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for PaneGrid<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -754,6 +766,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -765,14 +778,22 @@ where
             layout,
             cursor_position,
             renderer,
+            theme,
             style,
             viewport,
             self.spacing,
             self.on_resize.as_ref().map(|(leeway, _)| *leeway),
-            self.style_sheet.as_ref(),
+            self.style,
             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,
+                );
             },
         )
     }
@@ -793,8 +814,9 @@ where
 impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn from(
         pane_grid: PaneGrid<'a, Message, Renderer>,
diff --git a/native/src/widget/pane_grid/content.rs b/native/src/widget/pane_grid/content.rs
index 407f5458..4c9e65c9 100644
--- a/native/src/widget/pane_grid/content.rs
+++ b/native/src/widget/pane_grid/content.rs
@@ -11,22 +11,27 @@ use crate::{Clipboard, Element, Layout, Point, Rectangle, Shell, Size};
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct Content<'a, Message, Renderer> {
+pub struct Content<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     title_bar: Option<TitleBar<'a, Message, Renderer>>,
     body: Element<'a, Message, Renderer>,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`Content`] with the provided body.
     pub fn new(body: impl Into<Element<'a, Message, Renderer>>) -> Self {
         Self {
             title_bar: None,
             body: body.into(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -42,9 +47,9 @@ where
     /// Sets the style of the [`Content`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -52,6 +57,7 @@ where
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Draws the [`Content`] with the provided [`Renderer`] and [`Layout`].
     ///
@@ -59,15 +65,18 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
 
         {
-            let style = self.style_sheet.style();
+            let style = theme.appearance(self.style);
 
             container::draw_background(renderer, &style, bounds);
         }
@@ -81,6 +90,7 @@ where
 
             title_bar.draw(
                 renderer,
+                theme,
                 style,
                 title_bar_layout,
                 cursor_position,
@@ -90,14 +100,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,
+            );
         }
     }
 
@@ -239,6 +256,7 @@ where
 impl<'a, Message, Renderer> Draggable for &Content<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn can_be_dragged_at(
         &self,
@@ -260,6 +278,7 @@ impl<'a, T, Message, Renderer> From<T> for Content<'a, Message, Renderer>
 where
     T: Into<Element<'a, Message, Renderer>>,
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn from(element: T) -> Self {
         Self::new(element)
diff --git a/native/src/widget/pane_grid/title_bar.rs b/native/src/widget/pane_grid/title_bar.rs
index 6713724a..14c3ab4e 100644
--- a/native/src/widget/pane_grid/title_bar.rs
+++ b/native/src/widget/pane_grid/title_bar.rs
@@ -12,17 +12,22 @@ use crate::{
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct TitleBar<'a, Message, Renderer> {
+pub struct TitleBar<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     controls: Option<Element<'a, Message, Renderer>>,
     padding: Padding,
     always_show_controls: bool,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`TitleBar`] with the given content.
     pub fn new<E>(content: E) -> Self
@@ -34,7 +39,7 @@ where
             controls: None,
             padding: Padding::ZERO,
             always_show_controls: false,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -56,9 +61,9 @@ where
     /// Sets the style of the [`TitleBar`].
     pub fn style(
         mut self,
-        style: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style.into();
+        self.style = style.into();
         self
     }
 
@@ -79,6 +84,7 @@ where
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Draws the [`TitleBar`] with the provided [`Renderer`] and [`Layout`].
     ///
@@ -86,14 +92,17 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
         show_controls: bool,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
         let inherited_style = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
         };
@@ -118,6 +127,7 @@ where
                 }
                 controls.draw(
                     renderer,
+                    theme,
                     &inherited_style,
                     controls_layout,
                     cursor_position,
@@ -129,6 +139,7 @@ where
         if show_title {
             self.content.draw(
                 renderer,
+                theme,
                 &inherited_style,
                 title_layout,
                 cursor_position,
diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs
index 0374aef7..c6cfcc01 100644
--- a/native/src/widget/pick_list.rs
+++ b/native/src/widget/pick_list.rs
@@ -9,19 +9,23 @@ use crate::overlay::menu::{self, Menu};
 use crate::renderer;
 use crate::text::{self, Text};
 use crate::touch;
+use crate::widget::container;
+use crate::widget::scrollable;
 use crate::{
     Clipboard, Element, Layout, Length, Padding, Point, Rectangle, Shell, Size,
     Widget,
 };
 use std::borrow::Cow;
 
-pub use iced_style::pick_list::{Style, StyleSheet};
+pub use iced_style::pick_list::{Appearance, StyleSheet};
 
 /// A widget for selecting a single value from a list of options.
 #[allow(missing_debug_implementations)]
-pub struct PickList<'a, T, Message, Renderer: text::Renderer>
+pub struct PickList<'a, T, Message, Renderer>
 where
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     state: &'a mut State<T>,
     on_selected: Box<dyn Fn(T) -> Message>,
@@ -32,7 +36,7 @@ where
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 /// The local state of a [`PickList`].
@@ -64,11 +68,12 @@ impl<T> Default for State<T> {
     }
 }
 
-impl<'a, T: 'a, Message, Renderer: text::Renderer>
-    PickList<'a, T, Message, Renderer>
+impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
 where
     T: ToString + Eq,
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default padding of a [`PickList`].
     pub const DEFAULT_PADDING: Padding = Padding::new(5);
@@ -92,7 +97,7 @@ where
             text_size: None,
             padding: Self::DEFAULT_PADDING,
             font: Default::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -129,9 +134,9 @@ where
     /// Sets the style of the [`PickList`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -317,12 +322,13 @@ pub fn overlay<'a, T, Message, Renderer>(
     text_size: Option<u16>,
     font: Renderer::Font,
     options: &'a [T],
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
 ) -> Option<overlay::Element<'a, Message, Renderer>>
 where
+    T: Clone + ToString,
     Message: 'a,
     Renderer: text::Renderer + 'a,
-    T: Clone + ToString,
+    Renderer::Theme: StyleSheet,
 {
     if state.is_open {
         let bounds = layout.bounds();
@@ -336,7 +342,7 @@ where
         .width(bounds.width.round() as u16)
         .padding(padding)
         .font(font)
-        .style(style_sheet.menu());
+        .style(style);
 
         if let Some(text_size) = text_size {
             menu = menu.text_size(text_size);
@@ -351,6 +357,7 @@ where
 /// Draws a [`PickList`].
 pub fn draw<T, Renderer>(
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     layout: Layout<'_>,
     cursor_position: Point,
     padding: Padding,
@@ -358,9 +365,10 @@ pub fn draw<T, Renderer>(
     font: &Renderer::Font,
     placeholder: Option<&str>,
     selected: Option<&T>,
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
 ) where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
     T: ToString,
 {
     let bounds = layout.bounds();
@@ -368,9 +376,9 @@ pub fn draw<T, Renderer>(
     let is_selected = selected.is_some();
 
     let style = if is_mouse_over {
-        style_sheet.hovered()
+        theme.hovered(style)
     } else {
-        style_sheet.active()
+        theme.active(style)
     };
 
     renderer.fill_quad(
@@ -430,6 +438,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'static,
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -490,6 +499,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -497,6 +507,7 @@ where
     ) {
         draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             self.padding,
@@ -504,7 +515,7 @@ where
             &self.font,
             self.placeholder.as_ref().map(String::as_str),
             self.selected.as_ref(),
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 
@@ -520,7 +531,7 @@ where
             self.text_size,
             self.font.clone(),
             &self.options,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -530,8 +541,14 @@ impl<'a, T: 'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
 where
     T: Clone + ToString + Eq,
     [T]: ToOwned<Owned = Vec<T>>,
-    Renderer: text::Renderer + 'a,
     Message: 'static,
+    Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet
+        + container::StyleSheet
+        + scrollable::StyleSheet
+        + menu::StyleSheet,
+    <Renderer::Theme as StyleSheet>::Style:
+        Into<<Renderer::Theme as menu::StyleSheet>::Style>,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/native/src/widget/progress_bar.rs b/native/src/widget/progress_bar.rs
index c26c38fa..4eb7438a 100644
--- a/native/src/widget/progress_bar.rs
+++ b/native/src/widget/progress_bar.rs
@@ -5,13 +5,13 @@ use crate::{Color, Element, Layout, Length, Point, Rectangle, Size, Widget};
 
 use std::ops::RangeInclusive;
 
-pub use iced_style::progress_bar::{Style, StyleSheet};
+pub use iced_style::progress_bar::{Appearance, StyleSheet};
 
 /// A bar that displays progress.
 ///
 /// # Example
 /// ```
-/// # use iced_native::widget::ProgressBar;
+/// # type ProgressBar = iced_native::widget::ProgressBar<iced_native::renderer::Null>;
 /// let value = 50.0;
 ///
 /// ProgressBar::new(0.0..=100.0, value);
@@ -19,15 +19,23 @@ pub use iced_style::progress_bar::{Style, StyleSheet};
 ///
 /// ![Progress bar drawn with `iced_wgpu`](https://user-images.githubusercontent.com/18618951/71662391-a316c200-2d51-11ea-9cef-52758cab85e3.png)
 #[allow(missing_debug_implementations)]
-pub struct ProgressBar<'a> {
+pub struct ProgressBar<Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     range: RangeInclusive<f32>,
     value: f32,
     width: Length,
     height: Option<Length>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a> ProgressBar<'a> {
+impl<Renderer> ProgressBar<Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// The default height of a [`ProgressBar`].
     pub const DEFAULT_HEIGHT: u16 = 30;
 
@@ -42,7 +50,7 @@ impl<'a> ProgressBar<'a> {
             range,
             width: Length::Fill,
             height: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -61,16 +69,17 @@ impl<'a> ProgressBar<'a> {
     /// Sets the style of the [`ProgressBar`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<'a>
+impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -97,6 +106,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
@@ -112,7 +122,7 @@ where
                 / (range_end - range_start)
         };
 
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
 
         renderer.fill_quad(
             renderer::Quad {
@@ -141,13 +151,16 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<ProgressBar<'a>>
+impl<'a, Message, Renderer> From<ProgressBar<Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
-    fn from(progress_bar: ProgressBar<'a>) -> Element<'a, Message, Renderer> {
+    fn from(
+        progress_bar: ProgressBar<Renderer>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(progress_bar)
     }
 }
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index 657ae786..ba45a0f4 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -12,14 +12,14 @@ use crate::{
     Shell, Widget,
 };
 
-pub use iced_style::radio::{Style, StyleSheet};
+pub use iced_style::radio::{Appearance, StyleSheet};
 
 /// A circular button representing a choice.
 ///
 /// # Example
 /// ```
-/// # type Radio<'a, Message> =
-/// #     iced_native::widget::Radio<'a, Message, iced_native::renderer::Null>;
+/// # type Radio<Message> =
+/// #     iced_native::widget::Radio<Message, iced_native::renderer::Null>;
 /// #
 /// #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 /// pub enum Choice {
@@ -41,7 +41,11 @@ pub use iced_style::radio::{Style, StyleSheet};
 ///
 /// ![Radio buttons drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/radio.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Radio<'a, Message, Renderer: text::Renderer> {
+pub struct Radio<Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     is_selected: bool,
     on_click: Message,
     label: String,
@@ -50,12 +54,14 @@ pub struct Radio<'a, Message, Renderer: text::Renderer> {
     spacing: u16,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer: text::Renderer> Radio<'a, Message, Renderer>
+impl<Message, Renderer> Radio<Message, Renderer>
 where
     Message: Clone,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default size of a [`Radio`] button.
     pub const DEFAULT_SIZE: u16 = 28;
@@ -90,7 +96,7 @@ where
             spacing: Self::DEFAULT_SPACING, //15
             text_size: None,
             font: Default::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -127,18 +133,18 @@ where
     /// Sets the style of the [`Radio`] button.
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Radio<'a, Message, Renderer>
+impl<Message, Renderer> Widget<Message, Renderer> for Radio<Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -211,6 +217,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -222,9 +229,9 @@ where
         let mut children = layout.children();
 
         let custom_style = if is_mouse_over {
-            self.style_sheet.hovered()
+            theme.hovered(self.style)
         } else {
-            self.style_sheet.active()
+            theme.active(self.style)
         };
 
         {
@@ -270,9 +277,11 @@ where
                 style,
                 label_layout,
                 &self.label,
-                self.font.clone(),
                 self.text_size,
-                custom_style.text_color,
+                self.font.clone(),
+                widget::text::Appearance {
+                    color: custom_style.text_color,
+                },
                 alignment::Horizontal::Left,
                 alignment::Vertical::Center,
             );
@@ -280,15 +289,14 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Radio<'a, Message, Renderer>>
+impl<'a, Message, Renderer> From<Radio<Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
     Message: 'a + Clone,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
-    fn from(
-        radio: Radio<'a, Message, Renderer>,
-    ) -> Element<'a, Message, Renderer> {
+    fn from(radio: Radio<Message, Renderer>) -> Element<'a, Message, Renderer> {
         Element::new(radio)
     }
 }
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..26285df4 100644
--- a/native/src/widget/rule.rs
+++ b/native/src/widget/rule.rs
@@ -3,25 +3,33 @@ use crate::layout;
 use crate::renderer;
 use crate::{Color, Element, Layout, Length, Point, Rectangle, Size, Widget};
 
-pub use iced_style::rule::{FillMode, Style, StyleSheet};
+pub use iced_style::rule::{Appearance, FillMode, StyleSheet};
 
 /// Display a horizontal or vertical rule for dividing content.
 #[allow(missing_debug_implementations)]
-pub struct Rule<'a> {
+pub struct Rule<Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     width: Length,
     height: Length,
     is_horizontal: bool,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a> Rule<'a> {
+impl<Renderer> Rule<Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// Creates a horizontal [`Rule`] with the given height.
     pub fn horizontal(height: u16) -> Self {
         Rule {
             width: Length::Fill,
             height: Length::Units(height),
             is_horizontal: true,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -31,23 +39,24 @@ impl<'a> Rule<'a> {
             width: Length::from(Length::Units(width)),
             height: Length::Fill,
             is_horizontal: false,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
     /// Sets the style of the [`Rule`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for Rule<'a>
+impl<Message, Renderer> Widget<Message, Renderer> for Rule<Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -70,13 +79,14 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
         _viewport: &Rectangle,
     ) {
         let bounds = layout.bounds();
-        let style = self.style_sheet.style();
+        let style = theme.style(self.style);
 
         let bounds = if self.is_horizontal {
             let line_y = (bounds.y + (bounds.height / 2.0)
@@ -120,12 +130,14 @@ where
     }
 }
 
-impl<'a, Message, Renderer> From<Rule<'a>> for Element<'a, Message, Renderer>
+impl<'a, Message, Renderer> From<Rule<Renderer>>
+    for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
-    fn from(rule: Rule<'a>) -> Element<'a, Message, Renderer> {
+    fn from(rule: Rule<Renderer>) -> Element<'a, Message, Renderer> {
         Element::new(rule)
     }
 }
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 8958f6da..5d550315 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -25,7 +25,11 @@ pub mod style {
 /// A widget that can vertically display an infinite amount of content with a
 /// scrollbar.
 #[allow(missing_debug_implementations)]
-pub struct Scrollable<'a, Message, Renderer> {
+pub struct Scrollable<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     height: Length,
     max_height: u32,
@@ -34,10 +38,14 @@ pub struct Scrollable<'a, Message, Renderer> {
     scroller_width: u16,
     content: Column<'a, Message, Renderer>,
     on_scroll: Option<Box<dyn Fn(f32) -> Message + 'a>>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// Creates a new [`Scrollable`] with the given [`State`].
     pub fn new(state: &'a mut State) -> Self {
         Scrollable {
@@ -49,7 +57,7 @@ impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
             scroller_width: 10,
             content: Column::new(),
             on_scroll: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -132,9 +140,9 @@ impl<'a, Message, Renderer: crate::Renderer> Scrollable<'a, Message, Renderer> {
     /// Sets the style of the [`Scrollable`] .
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 
@@ -428,15 +436,17 @@ pub fn mouse_interaction(
 pub fn draw<Renderer>(
     state: &State,
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     layout: Layout<'_>,
     cursor_position: Point,
     scrollbar_width: u16,
     scrollbar_margin: u16,
     scroller_width: u16,
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
     draw_content: impl FnOnce(&mut Renderer, Layout<'_>, Point, &Rectangle),
 ) where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     let bounds = layout.bounds();
     let content_layout = layout.children().next().unwrap();
@@ -482,11 +492,11 @@ pub fn draw<Renderer>(
         });
 
         let style = if state.is_scroller_grabbed() {
-            style_sheet.dragging()
+            theme.dragging(style)
         } else if is_mouse_over_scrollbar {
-            style_sheet.hovered()
+            theme.hovered(style)
         } else {
-            style_sheet.active()
+            theme.active(style)
         };
 
         let is_scrollbar_visible =
@@ -618,6 +628,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Scrollable<'a, Message, Renderer>
 where
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         Widget::<Message, Renderer>::width(&self.content)
@@ -702,6 +713,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -710,15 +722,17 @@ where
         draw(
             &self.state,
             renderer,
+            theme,
             layout,
             cursor_position,
             self.scrollbar_width,
             self.scrollbar_margin,
             self.scroller_width,
-            self.style_sheet.as_ref(),
+            self.style,
             |renderer, layout, cursor_position, viewport| {
                 self.content.draw(
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
@@ -914,8 +928,9 @@ struct Scroller {
 impl<'a, Message, Renderer> From<Scrollable<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
     Message: 'a,
+    Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         scrollable: Scrollable<'a, Message, Renderer>,
diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index f2e84ea9..bda31327 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -13,7 +13,7 @@ use crate::{
 
 use std::ops::RangeInclusive;
 
-pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
+pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet};
 
 /// An horizontal bar and a handle that selects a single value from a range of
 /// values.
@@ -25,8 +25,10 @@ pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
 ///
 /// # Example
 /// ```
-/// # use iced_native::widget::slider::{self, Slider};
+/// # use iced_native::widget::slider;
+/// # use iced_native::renderer::Null;
 /// #
+/// # type Slider<'a, T, Message> = slider::Slider<'a, T, Message, Null>;
 /// #[derive(Clone)]
 /// pub enum Message {
 ///     SliderChanged(f32),
@@ -40,7 +42,11 @@ pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
 ///
 /// ![Slider drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/slider.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Slider<'a, T, Message> {
+pub struct Slider<'a, T, Message, Renderer>
+where
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     range: RangeInclusive<T>,
     step: T,
@@ -49,13 +55,15 @@ pub struct Slider<'a, T, Message> {
     on_release: Option<Message>,
     width: Length,
     height: u16,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, T, Message> Slider<'a, T, Message>
+impl<'a, T, Message, Renderer> Slider<'a, T, Message, Renderer>
 where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
+    Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default height of a [`Slider`].
     pub const DEFAULT_HEIGHT: u16 = 22;
@@ -99,7 +107,7 @@ where
             on_release: None,
             width: Length::Fill,
             height: Self::DEFAULT_HEIGHT,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -129,9 +137,9 @@ where
     /// Sets the style of the [`Slider`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 
@@ -230,26 +238,29 @@ where
 }
 
 /// Draws a [`Slider`].
-pub fn draw<T>(
-    renderer: &mut impl crate::Renderer,
+pub fn draw<T, R>(
+    renderer: &mut R,
     layout: Layout<'_>,
     cursor_position: Point,
     state: &State,
     value: T,
     range: &RangeInclusive<T>,
-    style_sheet: &dyn StyleSheet,
+    style_sheet: &dyn StyleSheet<Style = <R::Theme as StyleSheet>::Style>,
+    style: <R::Theme as StyleSheet>::Style,
 ) where
     T: Into<f64> + Copy,
+    R: crate::Renderer,
+    R::Theme: StyleSheet,
 {
     let bounds = layout.bounds();
     let is_mouse_over = bounds.contains(cursor_position);
 
     let style = if state.is_dragging {
-        style_sheet.dragging()
+        style_sheet.dragging(style)
     } else if is_mouse_over {
-        style_sheet.hovered()
+        style_sheet.hovered(style)
     } else {
-        style_sheet.active()
+        style_sheet.active(style)
     };
 
     let rail_y = bounds.y + (bounds.height / 2.0).round();
@@ -357,11 +368,12 @@ impl State {
 }
 
 impl<'a, T, Message, Renderer> Widget<Message, Renderer>
-    for Slider<'a, T, Message>
+    for Slider<'a, T, Message, Renderer>
 where
     T: Copy + Into<f64> + num_traits::FromPrimitive,
     Message: Clone,
     Renderer: crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -410,6 +422,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -422,7 +435,8 @@ where
             &self.state,
             self.value,
             &self.range,
-            self.style_sheet.as_ref(),
+            theme,
+            self.style,
         )
     }
 
@@ -437,14 +451,17 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<Slider<'a, T, Message>>
+impl<'a, T, Message, Renderer> From<Slider<'a, T, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
     T: 'a + Copy + Into<f64> + num_traits::FromPrimitive,
     Message: 'a + Clone,
     Renderer: 'a + crate::Renderer,
+    Renderer::Theme: StyleSheet,
 {
-    fn from(slider: Slider<'a, T, Message>) -> Element<'a, Message, Renderer> {
+    fn from(
+        slider: Slider<'a, T, Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(slider)
     }
 }
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..242247b0 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -3,45 +3,57 @@ use crate::alignment;
 use crate::layout;
 use crate::renderer;
 use crate::text;
-use crate::{Color, Element, Layout, Length, Point, Rectangle, Size, Widget};
+use crate::{Element, Layout, Length, Point, Rectangle, Size, Widget};
+
+pub use iced_style::text::{Appearance, StyleSheet};
 
 /// A paragraph of text.
 ///
 /// # Example
 ///
 /// ```
+/// # use iced_native::Color;
+/// #
 /// # type Text = iced_native::widget::Text<iced_native::renderer::Null>;
 /// #
 /// Text::new("I <3 iced!")
-///     .color([0.0, 0.0, 1.0])
-///     .size(40);
+///     .size(40)
+///     .style(Color::from([0.0, 0.0, 1.0]));
 /// ```
 ///
 /// ![Text drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text.png?raw=true)
-#[derive(Debug)]
-pub struct Text<Renderer: text::Renderer> {
+#[allow(missing_debug_implementations)]
+pub struct Text<Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     content: String,
     size: Option<u16>,
-    color: Option<Color>,
-    font: Renderer::Font,
     width: Length,
     height: Length,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
+    font: Renderer::Font,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<Renderer: text::Renderer> Text<Renderer> {
+impl<Renderer> Text<Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// Create a new fragment of [`Text`] with the given contents.
     pub fn new<T: Into<String>>(label: T) -> Self {
         Text {
             content: label.into(),
             size: None,
-            color: None,
             font: Default::default(),
             width: Length::Shrink,
             height: Length::Shrink,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
+            style: Default::default(),
         }
     }
 
@@ -51,12 +63,6 @@ impl<Renderer: text::Renderer> Text<Renderer> {
         self
     }
 
-    /// Sets the [`Color`] of the [`Text`].
-    pub fn color<C: Into<Color>>(mut self, color: C) -> Self {
-        self.color = Some(color.into());
-        self
-    }
-
     /// Sets the [`Font`] of the [`Text`].
     ///
     /// [`Font`]: crate::text::Renderer::Font
@@ -65,6 +71,15 @@ impl<Renderer: text::Renderer> Text<Renderer> {
         self
     }
 
+    /// Sets the [`Color`] of the [`Text`].
+    pub fn style(
+        mut self,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+    ) -> Self {
+        self.style = style.into();
+        self
+    }
+
     /// Sets the width of the [`Text`] boundaries.
     pub fn width(mut self, width: Length) -> Self {
         self.width = width;
@@ -99,6 +114,7 @@ impl<Renderer: text::Renderer> Text<Renderer> {
 impl<Message, Renderer> Widget<Message, Renderer> for Text<Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -130,6 +146,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
@@ -140,9 +157,9 @@ where
             style,
             layout,
             &self.content,
-            self.font.clone(),
             self.size,
-            self.color,
+            self.font.clone(),
+            theme.appearance(self.style),
             self.horizontal_alignment,
             self.vertical_alignment,
         );
@@ -164,9 +181,9 @@ pub fn draw<Renderer>(
     style: &renderer::Style,
     layout: Layout<'_>,
     content: &str,
-    font: Renderer::Font,
     size: Option<u16>,
-    color: Option<Color>,
+    font: Renderer::Font,
+    appearance: Appearance,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
 ) where
@@ -190,7 +207,7 @@ pub fn draw<Renderer>(
         content,
         size: f32::from(size.unwrap_or(renderer.default_size())),
         bounds: Rectangle { x, y, ..bounds },
-        color: color.unwrap_or(style.text_color),
+        color: appearance.color.unwrap_or(style.text_color),
         font,
         horizontal_alignment,
         vertical_alignment,
@@ -201,23 +218,28 @@ impl<'a, Message, Renderer> From<Text<Renderer>>
     for Element<'a, Message, Renderer>
 where
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn from(text: Text<Renderer>) -> Element<'a, Message, Renderer> {
         Element::new(text)
     }
 }
 
-impl<Renderer: text::Renderer> Clone for Text<Renderer> {
+impl<Renderer> Clone for Text<Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     fn clone(&self) -> Self {
         Self {
             content: self.content.clone(),
             size: self.size,
-            color: self.color,
-            font: self.font.clone(),
             width: self.width,
             height: self.height,
             horizontal_alignment: self.horizontal_alignment,
             vertical_alignment: self.vertical_alignment,
+            font: self.font.clone(),
+            style: self.style,
         }
     }
 }
diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs
index 5ecd68e9..d345cec3 100644
--- a/native/src/widget/text_input.rs
+++ b/native/src/widget/text_input.rs
@@ -24,7 +24,7 @@ use crate::{
     Shell, Size, Vector, Widget,
 };
 
-pub use iced_style::text_input::{Style, StyleSheet};
+pub use iced_style::text_input::{Appearance, StyleSheet};
 
 /// A field that can be filled with text.
 ///
@@ -52,7 +52,11 @@ pub use iced_style::text_input::{Style, StyleSheet};
 /// ```
 /// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct TextInput<'a, Message, Renderer: text::Renderer> {
+pub struct TextInput<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     placeholder: String,
     value: Value,
@@ -63,13 +67,14 @@ pub struct TextInput<'a, Message, Renderer: text::Renderer> {
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message + 'a>,
     on_submit: Option<Message>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`TextInput`].
     ///
@@ -98,7 +103,7 @@ where
             size: None,
             on_change: Box::new(on_change),
             on_submit: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -143,9 +148,9 @@ where
     /// Sets the style of the [`TextInput`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 
@@ -161,12 +166,14 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         layout: Layout<'_>,
         cursor_position: Point,
         value: Option<&Value>,
     ) {
         draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             &self.state,
@@ -175,7 +182,7 @@ where
             self.size,
             &self.font,
             self.is_secure,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -575,6 +582,7 @@ where
 /// [`Renderer`]: text::Renderer
 pub fn draw<Renderer>(
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     layout: Layout<'_>,
     cursor_position: Point,
     state: &State,
@@ -583,9 +591,10 @@ pub fn draw<Renderer>(
     size: Option<u16>,
     font: &Renderer::Font,
     is_secure: bool,
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
 ) where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     let secure_value = is_secure.then(|| value.secure());
     let value = secure_value.as_ref().unwrap_or(&value);
@@ -595,22 +604,22 @@ pub fn draw<Renderer>(
 
     let is_mouse_over = bounds.contains(cursor_position);
 
-    let style = if state.is_focused() {
-        style_sheet.focused()
+    let appearance = if state.is_focused() {
+        theme.focused(style)
     } else if is_mouse_over {
-        style_sheet.hovered()
+        theme.hovered(style)
     } else {
-        style_sheet.active()
+        theme.active(style)
     };
 
     renderer.fill_quad(
         renderer::Quad {
             bounds,
-            border_radius: style.border_radius,
-            border_width: style.border_width,
-            border_color: style.border_color,
+            border_radius: appearance.border_radius,
+            border_width: appearance.border_width,
+            border_color: appearance.border_color,
         },
-        style.background,
+        appearance.background,
     );
 
     let text = value.to_string();
@@ -642,7 +651,7 @@ pub fn draw<Renderer>(
                             border_width: 0.0,
                             border_color: Color::TRANSPARENT,
                         },
-                        style_sheet.value_color(),
+                        theme.value_color(style),
                     )),
                     offset,
                 )
@@ -686,7 +695,7 @@ pub fn draw<Renderer>(
                             border_width: 0.0,
                             border_color: Color::TRANSPARENT,
                         },
-                        style_sheet.selection_color(),
+                        theme.selection_color(style),
                     )),
                     if end == right {
                         right_offset
@@ -714,9 +723,9 @@ pub fn draw<Renderer>(
         renderer.fill_text(Text {
             content: if text.is_empty() { placeholder } else { &text },
             color: if text.is_empty() {
-                style_sheet.placeholder_color()
+                theme.placeholder_color(style)
             } else {
-                style_sheet.value_color()
+                theme.value_color(style)
             },
             font: font.clone(),
             bounds: Rectangle {
@@ -756,6 +765,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -812,12 +822,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         _viewport: &Rectangle,
     ) {
-        self.draw(renderer, layout, cursor_position, None)
+        self.draw(renderer, theme, layout, cursor_position, None)
     }
 }
 
@@ -826,6 +837,7 @@ impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         text_input: TextInput<'a, Message, Renderer>,
diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
index 6d7592f3..0936c271 100644
--- a/native/src/widget/toggler.rs
+++ b/native/src/widget/toggler.rs
@@ -5,13 +5,13 @@ use crate::layout;
 use crate::mouse;
 use crate::renderer;
 use crate::text;
-use crate::widget::{Row, Text};
+use crate::widget::{self, Row, Text};
 use crate::{
     Alignment, Clipboard, Element, Event, Layout, Length, Point, Rectangle,
     Shell, Widget,
 };
 
-pub use iced_style::toggler::{Style, StyleSheet};
+pub use iced_style::toggler::{Appearance, StyleSheet};
 
 /// A toggler widget.
 ///
@@ -29,7 +29,11 @@ pub use iced_style::toggler::{Style, StyleSheet};
 /// Toggler::new(is_active, String::from("Toggle me!"), |b| Message::TogglerToggled(b));
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct Toggler<'a, Message, Renderer: text::Renderer> {
+pub struct Toggler<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     is_active: bool,
     on_toggle: Box<dyn Fn(bool) -> Message + 'a>,
     label: Option<String>,
@@ -39,10 +43,14 @@ pub struct Toggler<'a, Message, Renderer: text::Renderer> {
     text_alignment: alignment::Horizontal,
     spacing: u16,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer: text::Renderer> Toggler<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Toggler<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// The default size of a [`Toggler`].
     pub const DEFAULT_SIZE: u16 = 20;
 
@@ -72,7 +80,7 @@ impl<'a, Message, Renderer: text::Renderer> Toggler<'a, Message, Renderer> {
             text_alignment: alignment::Horizontal::Left,
             spacing: 0,
             font: Renderer::Font::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -117,9 +125,9 @@ impl<'a, Message, Renderer: text::Renderer> Toggler<'a, Message, Renderer> {
     /// Sets the style of the [`Toggler`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -128,6 +136,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Toggler<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -208,6 +217,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -230,9 +240,9 @@ where
                 style,
                 label_layout,
                 &label,
-                self.font.clone(),
                 self.text_size,
-                None,
+                self.font.clone(),
+                Default::default(),
                 self.text_alignment,
                 alignment::Vertical::Center,
             );
@@ -244,9 +254,9 @@ where
         let is_mouse_over = bounds.contains(cursor_position);
 
         let style = if is_mouse_over {
-            self.style_sheet.hovered(self.is_active)
+            theme.hovered(self.style, self.is_active)
         } else {
-            self.style_sheet.active(self.is_active)
+            theme.active(self.style, self.is_active)
         };
 
         let border_radius = bounds.height as f32 / BORDER_RADIUS_RATIO;
@@ -300,8 +310,9 @@ where
 impl<'a, Message, Renderer> From<Toggler<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + text::Renderer,
     Message: 'a,
+    Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn from(
         toggler: Toggler<'a, Message, Renderer>,
diff --git a/native/src/widget/tooltip.rs b/native/src/widget/tooltip.rs
index c929395f..0548e9da 100644
--- a/native/src/widget/tooltip.rs
+++ b/native/src/widget/tooltip.rs
@@ -4,6 +4,7 @@ use crate::layout;
 use crate::mouse;
 use crate::renderer;
 use crate::text;
+use crate::widget;
 use crate::widget::container;
 use crate::widget::text::Text;
 use crate::{
@@ -13,18 +14,23 @@ use crate::{
 
 /// An element to display a widget over another.
 #[allow(missing_debug_implementations)]
-pub struct Tooltip<'a, Message, Renderer: text::Renderer> {
+pub struct Tooltip<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     tooltip: Text<Renderer>,
     position: Position,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
     gap: u16,
     padding: u16,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     /// The default padding of a [`Tooltip`] drawn by this renderer.
     const DEFAULT_PADDING: u16 = 5;
@@ -41,9 +47,9 @@ where
             content: content.into(),
             tooltip: Text::new(tooltip.to_string()),
             position,
-            style_sheet: Default::default(),
             gap: 0,
             padding: Self::DEFAULT_PADDING,
+            style: Default::default(),
         }
     }
 
@@ -76,9 +82,9 @@ where
     /// Sets the style of the [`Tooltip`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -99,8 +105,9 @@ pub enum Position {
 }
 
 /// Draws a [`Tooltip`].
-pub fn draw<Renderer: crate::Renderer>(
+pub fn draw<Renderer>(
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     inherited_style: &renderer::Style,
     layout: Layout<'_>,
     cursor_position: Point,
@@ -108,7 +115,7 @@ pub fn draw<Renderer: crate::Renderer>(
     position: Position,
     gap: u16,
     padding: u16,
-    style_sheet: &dyn container::StyleSheet,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
     layout_text: impl FnOnce(&Renderer, &layout::Limits) -> layout::Node,
     draw_text: impl FnOnce(
         &mut Renderer,
@@ -117,12 +124,17 @@ pub fn draw<Renderer: crate::Renderer>(
         Point,
         &Rectangle,
     ),
-) {
+) where
+    Renderer: crate::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
+    use container::StyleSheet;
+
     let bounds = layout.bounds();
 
     if bounds.contains(cursor_position) {
         let gap = f32::from(gap);
-        let style = style_sheet.style();
+        let style = theme.appearance(style);
 
         let defaults = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
@@ -213,6 +225,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         self.content.width()
@@ -267,6 +280,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -274,6 +288,7 @@ where
     ) {
         self.content.draw(
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -284,6 +299,7 @@ where
 
         draw(
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -291,7 +307,7 @@ where
             self.position,
             self.gap,
             self.padding,
-            self.style_sheet.as_ref(),
+            self.style,
             |renderer, limits| {
                 Widget::<(), Renderer>::layout(tooltip, renderer, limits)
             },
@@ -299,6 +315,7 @@ where
                 Widget::<(), Renderer>::draw(
                     tooltip,
                     renderer,
+                    theme,
                     defaults,
                     layout,
                     cursor_position,
@@ -312,8 +329,9 @@ where
 impl<'a, Message, Renderer> From<Tooltip<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + text::Renderer,
     Message: 'a,
+    Renderer: 'a + text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     fn from(
         tooltip: Tooltip<'a, Message, Renderer>,
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..88598f9b 100644
--- a/pure/src/helpers.rs
+++ b/pure/src/helpers.rs
@@ -14,6 +14,7 @@ pub fn container<'a, Message, Renderer>(
 ) -> widget::Container<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::container::StyleSheet,
 {
     widget::Container::new(content)
 }
@@ -41,6 +42,7 @@ pub fn scrollable<'a, Message, Renderer>(
 ) -> widget::Scrollable<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::scrollable::StyleSheet,
 {
     widget::Scrollable::new(content)
 }
@@ -50,7 +52,11 @@ 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,
+{
     widget::Button::new(content)
 }
 
@@ -65,6 +71,7 @@ pub fn tooltip<'a, Message, Renderer>(
 ) -> widget::Tooltip<'a, Message, Renderer>
 where
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::container::StyleSheet + widget::text::StyleSheet,
 {
     widget::Tooltip::new(content, tooltip, position)
 }
@@ -75,6 +82,7 @@ where
 pub fn text<Renderer>(text: impl Into<String>) -> widget::Text<Renderer>
 where
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::text::StyleSheet,
 {
     widget::Text::new(text)
 }
@@ -89,6 +97,7 @@ pub fn checkbox<'a, Message, Renderer>(
 ) -> widget::Checkbox<'a, Message, Renderer>
 where
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::checkbox::StyleSheet + widget::text::StyleSheet,
 {
     widget::Checkbox::new(is_checked, label, f)
 }
@@ -96,15 +105,16 @@ where
 /// Creates a new [`Radio`].
 ///
 /// [`Radio`]: widget::Radio
-pub fn radio<'a, Message, Renderer, V>(
+pub fn radio<Message, Renderer, V>(
     label: impl Into<String>,
     value: V,
     selected: Option<V>,
     on_click: impl FnOnce(V) -> Message,
-) -> widget::Radio<'a, Message, Renderer>
+) -> widget::Radio<Message, Renderer>
 where
     Message: Clone,
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::radio::StyleSheet,
     V: Copy + Eq,
 {
     widget::Radio::new(value, label, selected, on_click)
@@ -120,6 +130,7 @@ pub fn toggler<'a, Message, Renderer>(
 ) -> widget::Toggler<'a, Message, Renderer>
 where
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::toggler::StyleSheet,
 {
     widget::Toggler::new(is_checked, label, f)
 }
@@ -135,6 +146,7 @@ pub fn text_input<'a, Message, Renderer>(
 where
     Message: Clone,
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::text_input::StyleSheet,
 {
     widget::TextInput::new(placeholder, value, on_change)
 }
@@ -142,14 +154,16 @@ where
 /// Creates a new [`Slider`].
 ///
 /// [`Slider`]: widget::Slider
-pub fn slider<'a, Message, T>(
+pub fn slider<'a, T, Message, Renderer>(
     range: std::ops::RangeInclusive<T>,
     value: T,
     on_change: impl Fn(T) -> Message + 'a,
-) -> widget::Slider<'a, T, Message>
+) -> widget::Slider<'a, T, Message, Renderer>
 where
-    Message: Clone,
     T: Copy + From<u8> + std::cmp::PartialOrd,
+    Message: Clone,
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::slider::StyleSheet,
 {
     widget::Slider::new(range, value, on_change)
 }
@@ -166,6 +180,7 @@ where
     T: ToString + Eq + 'static,
     [T]: ToOwned<Owned = Vec<T>>,
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::pick_list::StyleSheet,
 {
     widget::PickList::new(options, selected, on_selected)
 }
@@ -194,14 +209,22 @@ pub fn vertical_space(height: Length) -> widget::Space {
 /// Creates a horizontal [`Rule`] with the given height.
 ///
 /// [`Rule`]: widget::Rule
-pub fn horizontal_rule<'a>(height: u16) -> widget::Rule<'a> {
+pub fn horizontal_rule<Renderer>(height: u16) -> widget::Rule<Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::rule::StyleSheet,
+{
     widget::Rule::horizontal(height)
 }
 
 /// Creates a vertical [`Rule`] with the given width.
 ///
 /// [`Rule`]: widget::Rule
-pub fn vertical_rule<'a>(width: u16) -> widget::Rule<'a> {
+pub fn vertical_rule<Renderer>(width: u16) -> widget::Rule<Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::rule::StyleSheet,
+{
     widget::Rule::vertical(width)
 }
 
@@ -212,9 +235,13 @@ pub fn vertical_rule<'a>(width: u16) -> widget::Rule<'a> {
 ///   * the current value of the [`ProgressBar`].
 ///
 /// [`ProgressBar`]: widget::ProgressBar
-pub fn progress_bar<'a>(
+pub fn progress_bar<Renderer>(
     range: RangeInclusive<f32>,
     value: f32,
-) -> widget::ProgressBar<'a> {
+) -> widget::ProgressBar<Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: widget::progress_bar::StyleSheet,
+{
     widget::ProgressBar::new(range, value)
 }
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..cd825ad8 100644
--- a/pure/src/widget.rs
+++ b/pure/src/widget.rs
@@ -11,6 +11,7 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod svg;
+pub mod text;
 pub mod text_input;
 pub mod toggler;
 pub mod tooltip;
@@ -19,7 +20,6 @@ pub mod tree;
 mod column;
 mod row;
 mod space;
-mod text;
 
 pub use button::Button;
 pub use checkbox::Checkbox;
@@ -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..dd7688e2 100644
--- a/pure/src/widget/button.rs
+++ b/pure/src/widget/button.rs
@@ -12,7 +12,7 @@ use iced_native::{
     Clipboard, Layout, Length, Padding, Point, Rectangle, Shell,
 };
 
-pub use iced_style::button::{Style, StyleSheet};
+pub use iced_style::button::{Appearance, StyleSheet};
 
 use button::State;
 
@@ -50,25 +50,33 @@ 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,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer> Button<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Button<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     /// 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),
+            style: <Renderer::Theme as StyleSheet>::Style::default(),
         }
     }
 
@@ -98,12 +106,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>>,
+        style: <Renderer::Theme as StyleSheet>::Style,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style;
         self
     }
 }
@@ -113,6 +121,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Message: 'a + Clone,
     Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<State>()
@@ -191,6 +200,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -204,13 +214,15 @@ where
             bounds,
             cursor_position,
             self.on_press.is_some(),
-            self.style_sheet.as_ref(),
+            theme,
+            self.style,
             || tree.state.downcast_ref::<State>(),
         );
 
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             &renderer::Style {
                 text_color: styling.text_color,
             },
@@ -254,6 +266,7 @@ impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
 where
     Message: Clone + 'a,
     Renderer: iced_native::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     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..9d6a78ce 100644
--- a/pure/src/widget/checkbox.rs
+++ b/pure/src/widget/checkbox.rs
@@ -7,14 +7,16 @@ use iced_native::layout::{self, Layout};
 use iced_native::mouse;
 use iced_native::renderer;
 use iced_native::text;
+use iced_native::widget;
 use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 
-pub use iced_native::widget::checkbox::{Checkbox, Style, StyleSheet};
+pub use iced_native::widget::checkbox::{Appearance, Checkbox, StyleSheet};
 
 impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Checkbox<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -59,6 +61,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -67,6 +70,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -97,6 +101,7 @@ impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
 where
     Message: 'a,
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
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..8ea9ca72 100644
--- a/pure/src/widget/container.rs
+++ b/pure/src/widget/container.rs
@@ -15,13 +15,17 @@ use iced_native::{
 
 use std::u32;
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_style::container::{Appearance, StyleSheet};
 
 /// An element decorating some content.
 ///
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
-pub struct Container<'a, Message, Renderer> {
+pub struct Container<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     padding: Padding,
     width: Length,
     height: Length,
@@ -29,13 +33,14 @@ pub struct Container<'a, Message, Renderer> {
     max_height: u32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
     content: Element<'a, Message, Renderer>,
 }
 
 impl<'a, Message, Renderer> Container<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates an empty [`Container`].
     pub fn new<T>(content: T) -> Self
@@ -50,7 +55,7 @@ where
             max_height: u32::MAX,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
-            style_sheet: Default::default(),
+            style: Default::default(),
             content: content.into(),
         }
     }
@@ -112,9 +117,9 @@ where
     /// Sets the style of the [`Container`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -123,6 +128,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Container<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn children(&self) -> Vec<Tree> {
         vec![Tree::new(&self.content)]
@@ -201,18 +207,20 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         renderer_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
 
         container::draw_background(renderer, &style, layout.bounds());
 
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             &renderer::Style {
                 text_color: style
                     .text_color
@@ -241,8 +249,9 @@ where
 impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + iced_native::Renderer,
     Message: 'a,
+    Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         column: Container<'a, Message, Renderer>,
diff --git a/pure/src/widget/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..69150aa8 100644
--- a/pure/src/widget/pane_grid.rs
+++ b/pure/src/widget/pane_grid.rs
@@ -19,6 +19,7 @@ pub use iced_native::widget::pane_grid::{
 };
 
 use crate::overlay;
+use crate::widget::container;
 use crate::widget::tree::{self, Tree};
 use crate::{Element, Widget};
 
@@ -83,7 +84,11 @@ pub use iced_style::pane_grid::{Line, StyleSheet};
 ///     .on_resize(10, Message::PaneResized);
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct PaneGrid<'a, Message, Renderer> {
+pub struct PaneGrid<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
+{
     state: &'a state::Internal,
     elements: Vec<(Pane, Content<'a, Message, Renderer>)>,
     width: Length,
@@ -92,12 +97,13 @@ pub struct PaneGrid<'a, Message, Renderer> {
     on_click: Option<Box<dyn Fn(Pane) -> Message + 'a>>,
     on_drag: Option<Box<dyn Fn(DragEvent) -> Message + 'a>>,
     on_resize: Option<(u16, Box<dyn Fn(ResizeEvent) -> Message + 'a>)>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> PaneGrid<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
     ///
@@ -124,7 +130,7 @@ where
             on_click: None,
             on_drag: None,
             on_resize: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -184,8 +190,11 @@ where
     }
 
     /// Sets the style of the [`PaneGrid`].
-    pub fn style(mut self, style: impl Into<Box<dyn StyleSheet + 'a>>) -> Self {
-        self.style_sheet = style.into();
+    pub fn style(
+        mut self,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
+    ) -> Self {
+        self.style = style.into();
         self
     }
 }
@@ -194,6 +203,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for PaneGrid<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<state::Action>()
@@ -331,6 +341,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -342,11 +353,12 @@ where
             layout,
             cursor_position,
             renderer,
+            theme,
             style,
             viewport,
             self.spacing,
             self.on_resize.as_ref().map(|(leeway, _)| *leeway),
-            self.style_sheet.as_ref(),
+            self.style,
             self.elements
                 .iter()
                 .zip(&tree.children)
@@ -360,6 +372,7 @@ where
                 content.draw(
                     tree,
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
@@ -389,8 +402,9 @@ where
 impl<'a, Message, Renderer> From<PaneGrid<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + iced_native::Renderer,
     Message: 'a,
+    Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet + container::StyleSheet,
 {
     fn from(
         pane_grid: PaneGrid<'a, Message, Renderer>,
diff --git a/pure/src/widget/pane_grid/content.rs b/pure/src/widget/pane_grid/content.rs
index e66ac40b..9c2a0f4a 100644
--- a/pure/src/widget/pane_grid/content.rs
+++ b/pure/src/widget/pane_grid/content.rs
@@ -15,22 +15,27 @@ use iced_native::{Clipboard, Layout, Point, Rectangle, Shell, Size};
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct Content<'a, Message, Renderer> {
+pub struct Content<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     title_bar: Option<TitleBar<'a, Message, Renderer>>,
     body: Element<'a, Message, Renderer>,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`Content`] with the provided body.
     pub fn new(body: impl Into<Element<'a, Message, Renderer>>) -> Self {
         Self {
             title_bar: None,
             body: body.into(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -46,9 +51,9 @@ where
     /// Sets the style of the [`Content`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -56,6 +61,7 @@ where
 impl<'a, Message, Renderer> Content<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     pub(super) fn state(&self) -> Tree {
         let children = if let Some(title_bar) = self.title_bar.as_ref() {
@@ -89,15 +95,18 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
 
         {
-            let style = self.style_sheet.style();
+            let style = theme.appearance(self.style);
 
             container::draw_background(renderer, &style, bounds);
         }
@@ -112,6 +121,7 @@ where
             title_bar.draw(
                 &tree.children[1],
                 renderer,
+                theme,
                 style,
                 title_bar_layout,
                 cursor_position,
@@ -122,6 +132,7 @@ where
             self.body.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 style,
                 body_layout,
                 cursor_position,
@@ -131,6 +142,7 @@ where
             self.body.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 style,
                 layout,
                 cursor_position,
@@ -303,6 +315,7 @@ where
 impl<'a, Message, Renderer> Draggable for &Content<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn can_be_dragged_at(
         &self,
@@ -324,6 +337,7 @@ impl<'a, T, Message, Renderer> From<T> for Content<'a, Message, Renderer>
 where
     T: Into<Element<'a, Message, Renderer>>,
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     fn from(element: T) -> Self {
         Self::new(element)
diff --git a/pure/src/widget/pane_grid/title_bar.rs b/pure/src/widget/pane_grid/title_bar.rs
index af71dc43..de9591a2 100644
--- a/pure/src/widget/pane_grid/title_bar.rs
+++ b/pure/src/widget/pane_grid/title_bar.rs
@@ -13,17 +13,22 @@ use iced_native::{Clipboard, Layout, Padding, Point, Rectangle, Shell, Size};
 ///
 /// [`Pane`]: crate::widget::pane_grid::Pane
 #[allow(missing_debug_implementations)]
-pub struct TitleBar<'a, Message, Renderer> {
+pub struct TitleBar<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     controls: Option<Element<'a, Message, Renderer>>,
     padding: Padding,
     always_show_controls: bool,
-    style_sheet: Box<dyn container::StyleSheet + 'a>,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     /// Creates a new [`TitleBar`] with the given content.
     pub fn new<E>(content: E) -> Self
@@ -35,7 +40,7 @@ where
             controls: None,
             padding: Padding::ZERO,
             always_show_controls: false,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -57,9 +62,9 @@ where
     /// Sets the style of the [`TitleBar`].
     pub fn style(
         mut self,
-        style: impl Into<Box<dyn container::StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style.into();
+        self.style = style.into();
         self
     }
 
@@ -80,6 +85,7 @@ where
 impl<'a, Message, Renderer> TitleBar<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: container::StyleSheet,
 {
     pub(super) fn state(&self) -> Tree {
         let children = if let Some(controls) = self.controls.as_ref() {
@@ -113,14 +119,17 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         viewport: &Rectangle,
         show_controls: bool,
     ) {
+        use container::StyleSheet;
+
         let bounds = layout.bounds();
-        let style = self.style_sheet.style();
+        let style = theme.appearance(self.style);
         let inherited_style = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
         };
@@ -146,6 +155,7 @@ where
                 controls.as_widget().draw(
                     &tree.children[1],
                     renderer,
+                    theme,
                     &inherited_style,
                     controls_layout,
                     cursor_position,
@@ -158,6 +168,7 @@ where
             self.content.as_widget().draw(
                 &tree.children[0],
                 renderer,
+                theme,
                 &inherited_style,
                 title_layout,
                 cursor_position,
diff --git a/pure/src/widget/pick_list.rs b/pure/src/widget/pick_list.rs
index 255e3681..2c465932 100644
--- a/pure/src/widget/pick_list.rs
+++ b/pure/src/widget/pick_list.rs
@@ -15,13 +15,15 @@ use iced_native::{
 
 use std::borrow::Cow;
 
-pub use iced_style::pick_list::{Style, StyleSheet};
+pub use iced_style::pick_list::{Appearance, StyleSheet};
 
 /// A widget for selecting a single value from a list of options.
 #[allow(missing_debug_implementations)]
-pub struct PickList<'a, T, Message, Renderer: text::Renderer>
+pub struct PickList<'a, T, Message, Renderer>
 where
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     on_selected: Box<dyn Fn(T) -> Message + 'a>,
     options: Cow<'a, [T]>,
@@ -31,14 +33,15 @@ where
     padding: Padding,
     text_size: Option<u16>,
     font: Renderer::Font,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, T: 'a, Message, Renderer: text::Renderer>
-    PickList<'a, T, Message, Renderer>
+impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
 where
     T: ToString + Eq,
     [T]: ToOwned<Owned = Vec<T>>,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default padding of a [`PickList`].
     pub const DEFAULT_PADDING: Padding = Padding::new(5);
@@ -59,7 +62,7 @@ where
             text_size: None,
             padding: Self::DEFAULT_PADDING,
             font: Default::default(),
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -96,9 +99,9 @@ where
     /// Sets the style of the [`PickList`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -110,6 +113,7 @@ where
     [T]: ToOwned<Owned = Vec<T>>,
     Message: 'a,
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<pick_list::State<T>>()
@@ -181,6 +185,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -188,6 +193,7 @@ where
     ) {
         pick_list::draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             self.padding,
@@ -195,7 +201,7 @@ where
             &self.font,
             self.placeholder.as_ref().map(String::as_str),
             self.selected.as_ref(),
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 
@@ -214,7 +220,7 @@ where
             self.text_size,
             self.font.clone(),
             &self.options,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -224,8 +230,9 @@ impl<'a, T: 'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
 where
     T: Clone + ToString + Eq + 'static,
     [T]: ToOwned<Owned = Vec<T>>,
-    Renderer: text::Renderer + 'a,
     Message: 'a,
+    Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/widget/progress_bar.rs b/pure/src/widget/progress_bar.rs
index 3016a81a..69c7d302 100644
--- a/pure/src/widget/progress_bar.rs
+++ b/pure/src/widget/progress_bar.rs
@@ -10,9 +10,10 @@ use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 
 pub use iced_native::widget::progress_bar::*;
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<'a>
+impl<'a, Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -57,6 +58,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -65,6 +67,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -91,9 +94,10 @@ where
 }
 
 impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
-    for ProgressBar<'a>
+    for ProgressBar<Renderer>
 where
     Renderer: iced_native::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/widget/radio.rs b/pure/src/widget/radio.rs
index 7c98c937..7a6ffbac 100644
--- a/pure/src/widget/radio.rs
+++ b/pure/src/widget/radio.rs
@@ -7,15 +7,16 @@ use iced_native::layout::{self, Layout};
 use iced_native::mouse;
 use iced_native::renderer;
 use iced_native::text;
+use iced_native::widget;
 use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 
-pub use iced_native::widget::radio::{Radio, Style, StyleSheet};
+pub use iced_native::widget::radio::{Appearance, Radio, StyleSheet};
 
-impl<'a, Message, Renderer> Widget<Message, Renderer>
-    for Radio<'a, Message, Renderer>
+impl<Message, Renderer> Widget<Message, Renderer> for Radio<Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -60,6 +61,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -68,6 +70,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -94,10 +97,11 @@ where
 }
 
 impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
-    for Radio<'a, Message, Renderer>
+    for Radio<Message, Renderer>
 where
     Message: 'a + Clone,
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
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..66a47653 100644
--- a/pure/src/widget/rule.rs
+++ b/pure/src/widget/rule.rs
@@ -10,9 +10,10 @@ use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 
 pub use iced_native::widget::rule::*;
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for Rule<'a>
+impl<'a, Message, Renderer> Widget<Message, Renderer> for Rule<Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -57,6 +58,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -65,6 +67,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -90,9 +93,11 @@ where
     }
 }
 
-impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>> for Rule<'a>
+impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
+    for Rule<Renderer>
 where
     Renderer: iced_native::Renderer + 'a,
+    Renderer::Theme: StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/widget/scrollable.rs b/pure/src/widget/scrollable.rs
index 70e951ef..4e24915b 100644
--- a/pure/src/widget/scrollable.rs
+++ b/pure/src/widget/scrollable.rs
@@ -15,18 +15,24 @@ pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
 /// A widget that can vertically display an infinite amount of content with a
 /// scrollbar.
 #[allow(missing_debug_implementations)]
-pub struct Scrollable<'a, Message, Renderer> {
+pub struct Scrollable<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     height: Length,
     scrollbar_width: u16,
     scrollbar_margin: u16,
     scroller_width: u16,
-    on_scroll: Option<Box<dyn Fn(f32) -> Message + 'a>>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
     content: Element<'a, Message, Renderer>,
+    on_scroll: Option<Box<dyn Fn(f32) -> Message + 'a>>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, Message, Renderer: iced_native::Renderer>
-    Scrollable<'a, Message, Renderer>
+impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`Scrollable`].
     pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
@@ -35,9 +41,9 @@ impl<'a, Message, Renderer: iced_native::Renderer>
             scrollbar_width: 10,
             scrollbar_margin: 0,
             scroller_width: 10,
-            on_scroll: None,
-            style_sheet: Default::default(),
             content: content.into(),
+            on_scroll: None,
+            style: Default::default(),
         }
     }
 
@@ -80,9 +86,9 @@ impl<'a, Message, Renderer: iced_native::Renderer>
     /// Sets the style of the [`Scrollable`] .
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -91,6 +97,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Scrollable<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<scrollable::State>()
@@ -171,6 +178,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -179,16 +187,18 @@ where
         scrollable::draw(
             tree.state.downcast_ref::<scrollable::State>(),
             renderer,
+            theme,
             layout,
             cursor_position,
             self.scrollbar_width,
             self.scrollbar_margin,
             self.scroller_width,
-            self.style_sheet.as_ref(),
+            self.style,
             |renderer, layout, cursor_position, viewport| {
                 self.content.as_widget().draw(
                     &tree.children[0],
                     renderer,
+                    theme,
                     style,
                     layout,
                     cursor_position,
@@ -257,6 +267,7 @@ impl<'a, Message, Renderer> From<Scrollable<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         text_input: Scrollable<'a, Message, Renderer>,
diff --git a/pure/src/widget/slider.rs b/pure/src/widget/slider.rs
index 4d8bbce4..fed979e5 100644
--- a/pure/src/widget/slider.rs
+++ b/pure/src/widget/slider.rs
@@ -11,7 +11,7 @@ use iced_native::{Clipboard, Layout, Length, Point, Rectangle, Shell, Size};
 
 use std::ops::RangeInclusive;
 
-pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
+pub use iced_style::slider::{Appearance, Handle, HandleShape, StyleSheet};
 
 /// An horizontal bar and a handle that selects a single value from a range of
 /// values.
@@ -23,7 +23,10 @@ pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
 ///
 /// # Example
 /// ```
-/// # use iced_pure::widget::Slider;
+/// # use iced_pure::widget::slider;
+/// # use iced_native::renderer::Null;
+/// #
+/// # type Slider<'a, T, Message> = slider::Slider<'a, T, Message, Null>;
 /// #
 /// #[derive(Clone)]
 /// pub enum Message {
@@ -37,7 +40,11 @@ pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
 ///
 /// ![Slider drawn by Coffee's renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/slider.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Slider<'a, T, Message> {
+pub struct Slider<'a, T, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     range: RangeInclusive<T>,
     step: T,
     value: T,
@@ -45,13 +52,15 @@ pub struct Slider<'a, T, Message> {
     on_release: Option<Message>,
     width: Length,
     height: u16,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
-impl<'a, T, Message> Slider<'a, T, Message>
+impl<'a, T, Message, Renderer> Slider<'a, T, Message, Renderer>
 where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// The default height of a [`Slider`].
     pub const DEFAULT_HEIGHT: u16 = 22;
@@ -88,7 +97,7 @@ where
             on_release: None,
             width: Length::Fill,
             height: Self::DEFAULT_HEIGHT,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -118,9 +127,9 @@ where
     /// Sets the style of the [`Slider`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 
@@ -132,11 +141,12 @@ where
 }
 
 impl<'a, T, Message, Renderer> Widget<Message, Renderer>
-    for Slider<'a, T, Message>
+    for Slider<'a, T, Message, Renderer>
 where
     T: Copy + Into<f64> + num_traits::FromPrimitive,
     Message: Clone,
     Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<slider::State>()
@@ -195,6 +205,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -207,7 +218,8 @@ where
             tree.state.downcast_ref::<slider::State>(),
             self.value,
             &self.range,
-            self.style_sheet.as_ref(),
+            theme,
+            self.style,
         )
     }
 
@@ -227,14 +239,17 @@ where
     }
 }
 
-impl<'a, T, Message, Renderer> From<Slider<'a, T, Message>>
+impl<'a, T, Message, Renderer> From<Slider<'a, T, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
     T: 'a + Copy + Into<f64> + num_traits::FromPrimitive,
     Message: 'a + Clone,
     Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet,
 {
-    fn from(slider: Slider<'a, T, Message>) -> Element<'a, Message, Renderer> {
+    fn from(
+        slider: Slider<'a, T, Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(slider)
     }
 }
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..23999a2c 100644
--- a/pure/src/widget/text.rs
+++ b/pure/src/widget/text.rs
@@ -1,16 +1,19 @@
+//! Write some text for your users to read.
 use crate::widget::Tree;
 use crate::{Element, Widget};
 
 use iced_native::layout::{self, Layout};
 use iced_native::renderer;
 use iced_native::text;
+use iced_native::widget;
 use iced_native::{Length, Point, Rectangle};
 
-pub use iced_native::widget::Text;
+pub use iced_native::widget::text::{Appearance, StyleSheet, Text};
 
 impl<Message, Renderer> Widget<Message, Renderer> for Text<Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -34,6 +37,7 @@ where
         &self,
         _tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -42,6 +46,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -54,6 +59,7 @@ impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
     for Text<Renderer>
 where
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: widget::text::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
@@ -63,6 +69,7 @@ where
 impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>> for &'a str
 where
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: widget::text::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Text::new(self).into()
diff --git a/pure/src/widget/text_input.rs b/pure/src/widget/text_input.rs
index ee790359..9b0a466a 100644
--- a/pure/src/widget/text_input.rs
+++ b/pure/src/widget/text_input.rs
@@ -10,7 +10,7 @@ use iced_native::text;
 use iced_native::widget::text_input;
 use iced_native::{Clipboard, Length, Padding, Point, Rectangle, Shell};
 
-pub use iced_style::text_input::{Style, StyleSheet};
+pub use iced_style::text_input::{Appearance, StyleSheet};
 
 /// A field that can be filled with text.
 ///
@@ -33,7 +33,11 @@ pub use iced_style::text_input::{Style, StyleSheet};
 /// ```
 /// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct TextInput<'a, Message, Renderer: text::Renderer> {
+pub struct TextInput<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     placeholder: String,
     value: text_input::Value,
     is_secure: bool,
@@ -43,13 +47,14 @@ pub struct TextInput<'a, Message, Renderer: text::Renderer> {
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message + 'a>,
     on_submit: Option<Message>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`TextInput`].
     ///
@@ -71,7 +76,7 @@ where
             size: None,
             on_change: Box::new(on_change),
             on_submit: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -83,7 +88,7 @@ where
 
     /// Sets the [`Font`] of the [`TextInput`].
     ///
-    /// [`Font`]: iced_native::text::Renderer::Font
+    /// [`Font`]: text::Renderer::Font
     pub fn font(mut self, font: Renderer::Font) -> Self {
         self.font = font;
         self
@@ -116,9 +121,9 @@ where
     /// Sets the style of the [`TextInput`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 
@@ -130,12 +135,14 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         layout: Layout<'_>,
         cursor_position: Point,
         value: Option<&text_input::Value>,
     ) {
         text_input::draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             tree.state.downcast_ref::<text_input::State>(),
@@ -144,7 +151,7 @@ where
             self.size,
             &self.font,
             self.is_secure,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -153,7 +160,8 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for TextInput<'a, Message, Renderer>
 where
     Message: Clone,
-    Renderer: iced_native::text::Renderer,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<text_input::State>()
@@ -216,6 +224,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -223,6 +232,7 @@ where
     ) {
         text_input::draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             tree.state.downcast_ref::<text_input::State>(),
@@ -231,7 +241,7 @@ where
             self.size,
             &self.font,
             self.is_secure,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 
@@ -252,6 +262,7 @@ impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         text_input: TextInput<'a, Message, Renderer>,
diff --git a/pure/src/widget/toggler.rs b/pure/src/widget/toggler.rs
index b9c5ec02..5efa39ab 100644
--- a/pure/src/widget/toggler.rs
+++ b/pure/src/widget/toggler.rs
@@ -7,14 +7,16 @@ use iced_native::layout::{self, Layout};
 use iced_native::mouse;
 use iced_native::renderer;
 use iced_native::text;
+use iced_native::widget;
 use iced_native::{Clipboard, Length, Point, Rectangle, Shell};
 
-pub use iced_native::widget::toggler::{Style, StyleSheet, Toggler};
+pub use iced_native::widget::toggler::{Appearance, StyleSheet, Toggler};
 
 impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Toggler<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn width(&self) -> Length {
         <Self as iced_native::Widget<Message, Renderer>>::width(self)
@@ -38,6 +40,7 @@ where
         &self,
         _state: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -46,6 +49,7 @@ where
         <Self as iced_native::Widget<Message, Renderer>>::draw(
             self,
             renderer,
+            theme,
             style,
             layout,
             cursor_position,
@@ -97,6 +101,7 @@ impl<'a, Message, Renderer> Into<Element<'a, Message, Renderer>>
 where
     Message: 'a,
     Renderer: text::Renderer + 'a,
+    Renderer::Theme: StyleSheet + widget::text::StyleSheet,
 {
     fn into(self) -> Element<'a, Message, Renderer> {
         Element::new(self)
diff --git a/pure/src/widget/tooltip.rs b/pure/src/widget/tooltip.rs
index 3887732a..cbc34722 100644
--- a/pure/src/widget/tooltip.rs
+++ b/pure/src/widget/tooltip.rs
@@ -7,27 +7,33 @@ use iced_native::mouse;
 use iced_native::overlay;
 use iced_native::renderer;
 use iced_native::text;
+use iced_native::widget::container;
 use iced_native::widget::tooltip;
-use iced_native::widget::Text;
+use iced_native::widget::{self, Text};
 use iced_native::{Clipboard, Layout, Length, Point, Rectangle, Shell};
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_style::container::{Appearance, StyleSheet};
 pub use tooltip::Position;
 
 /// An element to display a widget over another.
 #[allow(missing_debug_implementations)]
-pub struct Tooltip<'a, Message, Renderer: text::Renderer> {
+pub struct Tooltip<'a, Message, Renderer: text::Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
+{
     content: Element<'a, Message, Renderer>,
     tooltip: Text<Renderer>,
     position: Position,
-    style_sheet: Box<dyn StyleSheet + 'a>,
     gap: u16,
     padding: u16,
+    style: <Renderer::Theme as container::StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     /// The default padding of a [`Tooltip`] drawn by this renderer.
     const DEFAULT_PADDING: u16 = 5;
@@ -44,9 +50,9 @@ where
             content: content.into(),
             tooltip: Text::new(tooltip.to_string()),
             position,
-            style_sheet: Default::default(),
             gap: 0,
             padding: Self::DEFAULT_PADDING,
+            style: Default::default(),
         }
     }
 
@@ -79,9 +85,9 @@ where
     /// Sets the style of the [`Tooltip`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as container::StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -90,6 +96,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Tooltip<'a, Message, Renderer>
 where
     Renderer: text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     fn children(&self) -> Vec<Tree> {
         vec![Tree::new(&self.content)]
@@ -157,6 +164,7 @@ where
         &self,
         tree: &Tree,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         inherited_style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
@@ -165,6 +173,7 @@ where
         self.content.as_widget().draw(
             &tree.children[0],
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -175,6 +184,7 @@ where
 
         tooltip::draw(
             renderer,
+            theme,
             inherited_style,
             layout,
             cursor_position,
@@ -182,7 +192,7 @@ where
             self.position,
             self.gap,
             self.padding,
-            self.style_sheet.as_ref(),
+            self.style,
             |renderer, limits| {
                 Widget::<(), Renderer>::layout(tooltip, renderer, limits)
             },
@@ -191,6 +201,7 @@ where
                     tooltip,
                     &Tree::empty(),
                     renderer,
+                    theme,
                     defaults,
                     layout,
                     cursor_position,
@@ -217,8 +228,9 @@ where
 impl<'a, Message, Renderer> From<Tooltip<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + text::Renderer,
     Message: 'a,
+    Renderer: 'a + text::Renderer,
+    Renderer::Theme: container::StyleSheet + widget::text::StyleSheet,
 {
     fn from(
         tooltip: Tooltip<'a, Message, Renderer>,
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..e8d8e982 100644
--- a/src/application.rs
+++ b/src/application.rs
@@ -1,5 +1,8 @@
+//! Build interactive cross-platform applications.
 use crate::window;
-use crate::{Color, Command, Element, Executor, Settings, Subscription};
+use crate::{Command, Element, Executor, Settings, Subscription};
+
+pub use iced_native::application::{Appearance, StyleSheet};
 
 /// An interactive cross-platform application.
 ///
@@ -57,7 +60,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 +70,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 +103,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 + StyleSheet;
+
     /// The data needed to initialize your [`Application`].
     type Flags;
 
@@ -129,6 +136,28 @@ 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, crate::Renderer<Self::Theme>>;
+
+    /// Returns the current [`Theme`] of the [`Application`].
+    ///
+    /// [`Theme`]: Self::Theme
+    fn theme(&self) -> Self::Theme {
+        Self::Theme::default()
+    }
+
+    /// Returns the current [`Style`] of the [`Theme`].
+    ///
+    /// [`Style`]: <Self::Theme as StyleSheet>::Style
+    /// [`Theme`]: Self::Theme
+    fn style(&self) -> <Self::Theme as StyleSheet>::Style {
+        <Self::Theme as StyleSheet>::Style::default()
+    }
+
     /// Returns the event [`Subscription`] for the current state of the
     /// application.
     ///
@@ -141,11 +170,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
@@ -158,13 +182,6 @@ pub trait Application: Sized {
         window::Mode::Windowed
     }
 
-    /// Returns the background color of the [`Application`].
-    ///
-    /// By default, it returns [`Color::WHITE`].
-    fn background_color(&self) -> Color {
-        Color::WHITE
-    }
-
     /// Returns the scale factor of the [`Application`].
     ///
     /// It can be used to dynamically control the size of the UI at runtime
@@ -213,7 +230,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 +241,14 @@ impl<A> iced_winit::Program for Instance<A>
 where
     A: Application,
 {
-    type Renderer = crate::renderer::Renderer;
+    type Renderer = crate::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, Self::Renderer> {
         self.0.view()
     }
 }
@@ -252,6 +269,14 @@ where
         self.0.title()
     }
 
+    fn theme(&self) -> A::Theme {
+        self.0.theme()
+    }
+
+    fn style(&self) -> <A::Theme as StyleSheet>::Style {
+        self.0.style()
+    }
+
     fn mode(&self) -> iced_winit::Mode {
         match self.0.mode() {
             window::Mode::Windowed => iced_winit::Mode::Windowed,
@@ -264,10 +289,6 @@ where
         self.0.subscription()
     }
 
-    fn background_color(&self) -> Color {
-        self.0.background_color()
-    }
-
     fn scale_factor(&self) -> f64 {
         self.0.scale_factor()
     }
diff --git a/src/element.rs b/src/element.rs
index 8bad18c1..2eb1bb4d 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, Renderer = crate::Renderer> =
+    crate::runtime::Element<'a, Message, Renderer>;
diff --git a/src/lib.rs b/src/lib.rs
index 298beae3..d64941f4 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -180,12 +180,12 @@
 #![forbid(unsafe_code)]
 #![forbid(rust_2018_idioms)]
 #![cfg_attr(docsrs, feature(doc_cfg))]
-mod application;
 mod element;
 mod error;
 mod result;
 mod sandbox;
 
+pub mod application;
 pub mod clipboard;
 pub mod executor;
 pub mod keyboard;
@@ -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..23f56570 100644
--- a/src/pure.rs
+++ b/src/pure.rs
@@ -95,9 +95,9 @@
 //! [the original widgets]: crate::widget
 //! [`button::State`]: crate::widget::button::State
 //! [impure `Application`]: crate::Application
+pub mod application;
 pub mod widget;
 
-mod application;
 mod sandbox;
 
 pub use application::Application;
@@ -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, Renderer = crate::Renderer> =
+    iced_pure::Element<'a, Message, Renderer>;
diff --git a/src/pure/application.rs b/src/pure/application.rs
index 5f400bea..396854ad 100644
--- a/src/pure/application.rs
+++ b/src/pure/application.rs
@@ -1,6 +1,9 @@
+//! Build interactive cross-platform applications.
 use crate::pure::{self, Pure};
 use crate::window;
-use crate::{Color, Command, Executor, Settings, Subscription};
+use crate::{Command, Executor, Settings, Subscription};
+
+pub use iced_native::application::StyleSheet;
 
 /// A pure version of [`Application`].
 ///
@@ -21,6 +24,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 + StyleSheet;
+
     /// The data needed to initialize your [`Application`].
     type Flags;
 
@@ -51,6 +57,18 @@ 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, crate::Renderer<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 +81,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
@@ -80,13 +93,6 @@ pub trait Application: Sized {
         window::Mode::Windowed
     }
 
-    /// Returns the background color of the [`Application`].
-    ///
-    /// By default, it returns [`Color::WHITE`].
-    fn background_color(&self) -> Color {
-        Color::WHITE
-    }
-
     /// Returns the scale factor of the [`Application`].
     ///
     /// It can be used to dynamically control the size of the UI at runtime
@@ -137,6 +143,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,18 +169,20 @@ where
         A::subscription(&self.application)
     }
 
-    fn view(&mut self) -> crate::Element<'_, Self::Message> {
+    fn view(
+        &mut self,
+    ) -> crate::Element<'_, Self::Message, crate::Renderer<Self::Theme>> {
         let content = A::view(&self.application);
 
         Pure::new(&mut self.state, content).into()
     }
 
-    fn mode(&self) -> window::Mode {
-        A::mode(&self.application)
+    fn theme(&self) -> Self::Theme {
+        A::theme(&self.application)
     }
 
-    fn background_color(&self) -> Color {
-        A::background_color(&self.application)
+    fn mode(&self) -> window::Mode {
+        A::mode(&self.application)
     }
 
     fn scale_factor(&self) -> f64 {
diff --git a/src/pure/sandbox.rs b/src/pure/sandbox.rs
index fbd1d7a8..a58cace7 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::{Command, Error, Settings, Subscription, Theme};
 
 /// A pure version of [`Sandbox`].
 ///
@@ -34,11 +34,14 @@ pub trait Sandbox {
     /// These widgets can produce __messages__ based on user interaction.
     fn view(&self) -> pure::Element<'_, Self::Message>;
 
-    /// Returns the background color of the [`Sandbox`].
+    /// Returns the current [`Theme`] of the [`Sandbox`].
     ///
-    /// By default, it returns [`Color::WHITE`].
-    fn background_color(&self) -> Color {
-        Color::WHITE
+    /// 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 scale factor of the [`Sandbox`].
@@ -82,6 +85,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,16 +101,16 @@ where
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<T::Message> {
-        Subscription::none()
-    }
-
     fn view(&self) -> pure::Element<'_, T::Message> {
         T::view(self)
     }
 
-    fn background_color(&self) -> Color {
-        T::background_color(self)
+    fn theme(&self) -> Self::Theme {
+        T::theme(self)
+    }
+
+    fn subscription(&self) -> Subscription<T::Message> {
+        Subscription::none()
     }
 
     fn scale_factor(&self) -> f64 {
diff --git a/src/pure/widget.rs b/src/pure/widget.rs
index c84edde3..336f498f 100644
--- a/src/pure/widget.rs
+++ b/src/pure/widget.rs
@@ -1,41 +1,41 @@
 //! 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, Renderer = crate::Renderer> =
+    iced_pure::widget::Column<'a, Message, Renderer>;
 
 /// 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, Renderer = crate::Renderer> =
+    iced_pure::widget::Row<'a, Message, Renderer>;
 
 /// A paragraph of text.
-pub type Text = iced_pure::widget::Text<crate::Renderer>;
+pub type Text<Renderer = crate::Renderer> = iced_pure::widget::Text<Renderer>;
 
 pub mod button {
     //! Allow your users to perform actions by pressing a button.
-    pub use iced_pure::widget::button::{Style, StyleSheet};
+    pub use iced_pure::widget::button::{Appearance, 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, Renderer = crate::Renderer> =
+        iced_pure::widget::Button<'a, Message, Renderer>;
 }
 
 pub mod checkbox {
     //! Show toggle controls using checkboxes.
-    pub use iced_pure::widget::checkbox::{Style, StyleSheet};
+    pub use iced_pure::widget::checkbox::{Appearance, 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, Renderer = crate::Renderer> =
+        iced_native::widget::Checkbox<'a, Message, Renderer>;
 }
 
 pub mod container {
     //! Decorate content and apply alignment.
-    pub use iced_pure::widget::container::{Style, StyleSheet};
+    pub use iced_pure::widget::container::{Appearance, StyleSheet};
 
     /// An element decorating some content.
-    pub type Container<'a, Message> =
-        iced_pure::widget::Container<'a, Message, crate::Renderer>;
+    pub type Container<'a, Message, Renderer = crate::Renderer> =
+        iced_pure::widget::Container<'a, Message, Renderer>;
 }
 
 pub mod pane_grid {
@@ -57,35 +57,34 @@ 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, Renderer = crate::Renderer> =
+        iced_pure::widget::PaneGrid<'a, Message, Renderer>;
 
     /// 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, Renderer = crate::Renderer> =
+        iced_pure::widget::pane_grid::Content<'a, Message, Renderer>;
 
     /// 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, Renderer = crate::Renderer> =
+        iced_pure::widget::pane_grid::TitleBar<'a, Message, Renderer>;
 }
 
 pub mod pick_list {
     //! Display a dropdown list of selectable values.
-    pub use iced_pure::overlay::menu::Style as Menu;
-    pub use iced_pure::widget::pick_list::{Style, StyleSheet};
+    pub use iced_pure::widget::pick_list::{Appearance, StyleSheet};
 
     /// A widget allowing the selection of a single value from a list of options.
-    pub type PickList<'a, T, Message> =
-        iced_pure::widget::PickList<'a, T, Message, crate::Renderer>;
+    pub type PickList<'a, T, Message, Renderer = crate::Renderer> =
+        iced_pure::widget::PickList<'a, T, Message, Renderer>;
 }
 
 pub mod radio {
     //! Create choices using radio buttons.
-    pub use iced_pure::widget::radio::{Style, StyleSheet};
+    pub use iced_pure::widget::radio::{Appearance, StyleSheet};
 
     /// A circular button representing a choice.
-    pub type Radio<'a, Message> =
-        iced_pure::widget::Radio<'a, Message, crate::Renderer>;
+    pub type Radio<Message, Renderer = crate::Renderer> =
+        iced_pure::widget::Radio<Message, Renderer>;
 }
 
 pub mod scrollable {
@@ -94,27 +93,25 @@ 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, Renderer = crate::Renderer> =
+        iced_pure::widget::Scrollable<'a, Message, Renderer>;
 }
 
 pub mod toggler {
     //! Show toggle controls using togglers.
-    pub use iced_pure::widget::toggler::{Style, StyleSheet};
+    pub use iced_pure::widget::toggler::{Appearance, StyleSheet};
 
     /// A toggler widget.
-    pub type Toggler<'a, Message> =
-        iced_pure::widget::Toggler<'a, Message, crate::Renderer>;
+    pub type Toggler<'a, Message, Renderer = crate::Renderer> =
+        iced_pure::widget::Toggler<'a, Message, Renderer>;
 }
 
 pub mod text_input {
     //! Display fields that can be filled with text.
-    use crate::Renderer;
-
-    pub use iced_pure::widget::text_input::{Style, StyleSheet};
+    pub use iced_pure::widget::text_input::{Appearance, StyleSheet};
 
     /// A field that can be filled with text.
-    pub type TextInput<'a, Message> =
+    pub type TextInput<'a, Message, Renderer = crate::Renderer> =
         iced_pure::widget::TextInput<'a, Message, Renderer>;
 }
 
@@ -123,8 +120,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, Renderer = crate::Renderer> =
+        iced_pure::widget::Tooltip<'a, Message, Renderer>;
 }
 
 pub use iced_pure::widget::progress_bar;
diff --git a/src/sandbox.rs b/src/sandbox.rs
index e7e97920..3ca3fe8f 100644
--- a/src/sandbox.rs
+++ b/src/sandbox.rs
@@ -1,6 +1,5 @@
-use crate::{
-    Application, Color, Command, Element, Error, Settings, Subscription,
-};
+use crate::theme::{self, Theme};
+use crate::{Application, Command, Element, Error, Settings, Subscription};
 
 /// A sandboxed [`Application`].
 ///
@@ -111,11 +110,21 @@ pub trait Sandbox {
     /// These widgets can produce __messages__ based on user interaction.
     fn view(&mut self) -> Element<'_, Self::Message>;
 
-    /// Returns the background color of the [`Sandbox`].
+    /// Returns the current [`Theme`] of the [`Sandbox`].
     ///
-    /// By default, it returns [`Color::WHITE`].
-    fn background_color(&self) -> Color {
-        Color::WHITE
+    /// 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 current style variant of [`theme::Application`].
+    ///
+    /// By default, it returns [`theme::Application::default`].
+    fn style(&self) -> theme::Application {
+        theme::Application::default()
     }
 
     /// Returns the scale factor of the [`Sandbox`].
@@ -159,6 +168,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,16 +184,20 @@ where
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<T::Message> {
-        Subscription::none()
-    }
-
     fn view(&mut self) -> Element<'_, T::Message> {
         T::view(self)
     }
 
-    fn background_color(&self) -> Color {
-        T::background_color(self)
+    fn theme(&self) -> Self::Theme {
+        T::theme(self)
+    }
+
+    fn style(&self) -> theme::Application {
+        T::style(self)
+    }
+
+    fn subscription(&self) -> Subscription<T::Message> {
+        Subscription::none()
     }
 
     fn scale_factor(&self) -> f64 {
diff --git a/src/widget.rs b/src/widget.rs
index 5e2b63fc..b8b5c493 100644
--- a/src/widget.rs
+++ b/src/widget.rs
@@ -15,43 +15,43 @@
 //! [`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, Renderer = crate::Renderer> =
+    iced_native::widget::Column<'a, Message, Renderer>;
 
 /// 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, Renderer = crate::Renderer> =
+    iced_native::widget::Row<'a, Message, Renderer>;
 
 /// A paragraph of text.
-pub type Text = iced_native::widget::Text<crate::Renderer>;
+pub type Text<Renderer = crate::Renderer> = iced_native::widget::Text<Renderer>;
 
 pub mod button {
     //! Allow your users to perform actions by pressing a button.
     //!
     //! A [`Button`] has some local [`State`].
-    pub use iced_native::widget::button::{State, Style, StyleSheet};
+    pub use iced_native::widget::button::{Appearance, State, 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, Renderer = crate::Renderer> =
+        iced_native::widget::Button<'a, Message, Renderer>;
 }
 
 pub mod checkbox {
     //! Show toggle controls using checkboxes.
-    pub use iced_native::widget::checkbox::{Style, StyleSheet};
+    pub use iced_native::widget::checkbox::{Appearance, 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, Renderer = crate::Renderer> =
+        iced_native::widget::Checkbox<'a, Message, Renderer>;
 }
 
 pub mod container {
     //! Decorate content and apply alignment.
-    pub use iced_native::widget::container::{Style, StyleSheet};
+    pub use iced_native::widget::container::{Appearance, StyleSheet};
 
     /// An element decorating some content.
-    pub type Container<'a, Message> =
-        iced_native::widget::Container<'a, Message, crate::Renderer>;
+    pub type Container<'a, Message, Renderer = crate::Renderer> =
+        iced_native::widget::Container<'a, Message, Renderer>;
 }
 
 pub mod pane_grid {
@@ -73,35 +73,34 @@ 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, Renderer = crate::Renderer> =
+        iced_native::widget::PaneGrid<'a, Message, Renderer>;
 
     /// 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, Renderer = crate::Renderer> =
+        iced_native::widget::pane_grid::Content<'a, Message, Renderer>;
 
     /// 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, Renderer = crate::Renderer> =
+        iced_native::widget::pane_grid::TitleBar<'a, Message, Renderer>;
 }
 
 pub mod pick_list {
     //! Display a dropdown list of selectable values.
-    pub use iced_native::overlay::menu::Style as Menu;
-    pub use iced_native::widget::pick_list::{State, Style, StyleSheet};
+    pub use iced_native::widget::pick_list::{Appearance, State, StyleSheet};
 
     /// A widget allowing the selection of a single value from a list of options.
-    pub type PickList<'a, T, Message> =
-        iced_native::widget::PickList<'a, T, Message, crate::Renderer>;
+    pub type PickList<'a, T, Message, Renderer = crate::Renderer> =
+        iced_native::widget::PickList<'a, T, Message, Renderer>;
 }
 
 pub mod radio {
     //! Create choices using radio buttons.
-    pub use iced_native::widget::radio::{Style, StyleSheet};
+    pub use iced_native::widget::radio::{Appearance, StyleSheet};
 
     /// A circular button representing a choice.
-    pub type Radio<'a, Message> =
-        iced_native::widget::Radio<'a, Message, crate::Renderer>;
+    pub type Radio<Message, Renderer = crate::Renderer> =
+        iced_native::widget::Radio<Message, Renderer>;
 }
 
 pub mod scrollable {
@@ -112,29 +111,27 @@ 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, Renderer = crate::Renderer> =
+        iced_native::widget::Scrollable<'a, Message, Renderer>;
 }
 
 pub mod toggler {
     //! Show toggle controls using togglers.
-    pub use iced_native::widget::toggler::{Style, StyleSheet};
+    pub use iced_native::widget::toggler::{Appearance, StyleSheet};
 
     /// A toggler widget.
-    pub type Toggler<'a, Message> =
-        iced_native::widget::Toggler<'a, Message, crate::Renderer>;
+    pub type Toggler<'a, Message, Renderer = crate::Renderer> =
+        iced_native::widget::Toggler<'a, Message, Renderer>;
 }
 
 pub mod text_input {
     //! Display fields that can be filled with text.
     //!
     //! A [`TextInput`] has some local [`State`].
-    use crate::Renderer;
-
-    pub use iced_native::widget::text_input::{State, Style, StyleSheet};
+    pub use iced_native::widget::text_input::{Appearance, State, StyleSheet};
 
     /// A field that can be filled with text.
-    pub type TextInput<'a, Message> =
+    pub type TextInput<'a, Message, Renderer = crate::Renderer> =
         iced_native::widget::TextInput<'a, Message, Renderer>;
 }
 
@@ -143,8 +140,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, Renderer = crate::Renderer> =
+        iced_native::widget::Tooltip<'a, Message, Renderer>;
 }
 
 pub use iced_native::widget::progress_bar;
diff --git a/style/Cargo.toml b/style/Cargo.toml
index bb2a9645..cf9d328b 100644
--- a/style/Cargo.toml
+++ b/style/Cargo.toml
@@ -13,3 +13,10 @@ categories = ["gui"]
 [dependencies.iced_core]
 version = "0.5"
 path = "../core"
+features = ["palette"]
+
+[dependencies.palette]
+version = "0.6"
+
+[dependencies.lazy_static]
+version = "1.4"
diff --git a/style/src/application.rs b/style/src/application.rs
new file mode 100644
index 00000000..d48c6a34
--- /dev/null
+++ b/style/src/application.rs
@@ -0,0 +1,13 @@
+use iced_core::Color;
+
+pub trait StyleSheet {
+    type Style: Default + Copy;
+
+    fn appearance(&self, style: Self::Style) -> Appearance;
+}
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Appearance {
+    pub background_color: Color,
+    pub text_color: Color,
+}
diff --git a/style/src/button.rs b/style/src/button.rs
index de2de4f4..c63a6b71 100644
--- a/style/src/button.rs
+++ b/style/src/button.rs
@@ -3,7 +3,7 @@ use iced_core::{Background, Color, Vector};
 
 /// The appearance of a button.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub shadow_offset: Vector,
     pub background: Option<Background>,
     pub border_radius: f32,
@@ -12,7 +12,7 @@ pub struct Style {
     pub text_color: Color,
 }
 
-impl std::default::Default for Style {
+impl std::default::Default for Appearance {
     fn default() -> Self {
         Self {
             shadow_offset: Vector::default(),
@@ -27,28 +27,30 @@ 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 Style: Default + Copy;
 
-    fn hovered(&self) -> Style {
-        let active = self.active();
+    fn active(&self, style: Self::Style) -> Appearance;
 
-        Style {
+    fn hovered(&self, style: Self::Style) -> Appearance {
+        let active = self.active(style);
+
+        Appearance {
             shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
             ..active
         }
     }
 
-    fn pressed(&self) -> Style {
-        Style {
+    fn pressed(&self, style: Self::Style) -> Appearance {
+        Appearance {
             shadow_offset: Vector::default(),
-            ..self.active()
+            ..self.active(style)
         }
     }
 
-    fn disabled(&self) -> Style {
-        let active = self.active();
+    fn disabled(&self, style: Self::Style) -> Appearance {
+        let active = self.active(style);
 
-        Style {
+        Appearance {
             shadow_offset: Vector::default(),
             background: active.background.map(|background| match background {
                 Background::Color(color) => Background::Color(Color {
@@ -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/checkbox.rs b/style/src/checkbox.rs
index de52e548..ba54b0a2 100644
--- a/style/src/checkbox.rs
+++ b/style/src/checkbox.rs
@@ -3,7 +3,7 @@ use iced_core::{Background, Color};
 
 /// The appearance of a checkbox.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub background: Background,
     pub checkmark_color: Color,
     pub border_radius: f32,
@@ -14,44 +14,9 @@ pub struct Style {
 
 /// A set of rules that dictate the style of a checkbox.
 pub trait StyleSheet {
-    fn active(&self, is_checked: bool) -> Style;
+    type Style: Default + Copy;
 
-    fn hovered(&self, is_checked: bool) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self, _is_checked: bool) -> Style {
-        Style {
-            background: Background::Color(Color::from_rgb(0.95, 0.95, 0.95)),
-            checkmark_color: Color::from_rgb(0.3, 0.3, 0.3),
-            border_radius: 5.0,
-            border_width: 1.0,
-            border_color: Color::from_rgb(0.6, 0.6, 0.6),
-            text_color: None,
-        }
-    }
-
-    fn hovered(&self, is_checked: bool) -> Style {
-        Style {
-            background: Background::Color(Color::from_rgb(0.90, 0.90, 0.90)),
-            ..self.active(is_checked)
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
+    fn active(&self, style: Self::Style, is_checked: bool) -> Appearance;
 
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
+    fn hovered(&self, style: Self::Style, is_checked: bool) -> Appearance;
 }
diff --git a/style/src/container.rs b/style/src/container.rs
index 2f411611..184310fa 100644
--- a/style/src/container.rs
+++ b/style/src/container.rs
@@ -3,7 +3,7 @@ use iced_core::{Background, Color};
 
 /// The appearance of a container.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub text_color: Option<Color>,
     pub background: Option<Background>,
     pub border_radius: f32,
@@ -11,7 +11,7 @@ pub struct Style {
     pub border_color: Color,
 }
 
-impl std::default::Default for Style {
+impl std::default::Default for Appearance {
     fn default() -> Self {
         Self {
             text_color: None,
@@ -23,37 +23,10 @@ impl std::default::Default for Style {
     }
 }
 
-/// A set of rules that dictate the style of a container.
+/// A set of rules that dictate the [`Appearance`] of a container.
 pub trait StyleSheet {
-    /// Produces the style of a container.
-    fn style(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn style(&self) -> Style {
-        Style {
-            text_color: None,
-            background: None,
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
+    type Style: Default + Copy;
 
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
+    /// Produces the [`Appearance`] of a container.
+    fn appearance(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/lib.rs b/style/src/lib.rs
index e4556f67..ee426e98 100644
--- a/style/src/lib.rs
+++ b/style/src/lib.rs
@@ -9,6 +9,7 @@
 )]
 pub use iced_core::{Background, Color};
 
+pub mod application;
 pub mod button;
 pub mod checkbox;
 pub mod container;
@@ -20,5 +21,9 @@ pub mod radio;
 pub mod rule;
 pub mod scrollable;
 pub mod slider;
+pub mod text;
 pub mod text_input;
+pub mod theme;
 pub mod toggler;
+
+pub use theme::Theme;
diff --git a/style/src/menu.rs b/style/src/menu.rs
index 90985b8f..b1dd5ea0 100644
--- a/style/src/menu.rs
+++ b/style/src/menu.rs
@@ -2,7 +2,7 @@ use iced_core::{Background, Color};
 
 /// The appearance of a menu.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub text_color: Color,
     pub background: Background,
     pub border_width: f32,
@@ -11,15 +11,8 @@ pub struct Style {
     pub selected_background: Background,
 }
 
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Self {
-            text_color: Color::BLACK,
-            background: Background::Color([0.87, 0.87, 0.87].into()),
-            border_width: 1.0,
-            border_color: [0.7, 0.7, 0.7].into(),
-            selected_text_color: Color::WHITE,
-            selected_background: Background::Color([0.4, 0.4, 1.0].into()),
-        }
-    }
+pub trait StyleSheet {
+    type Style: Default + Copy;
+
+    fn appearance(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/pane_grid.rs b/style/src/pane_grid.rs
index a12ac3f5..5bae353f 100644
--- a/style/src/pane_grid.rs
+++ b/style/src/pane_grid.rs
@@ -4,11 +4,13 @@ use iced_core::Color;
 
 /// A set of rules that dictate the style of a container.
 pub trait StyleSheet {
+    type Style: Default + Copy;
+
     /// The [`Line`] to draw when a split is picked.
-    fn picked_split(&self) -> Option<Line>;
+    fn picked_split(&self, style: Self::Style) -> Option<Line>;
 
     /// The [`Line`] to draw when a split is hovered.
-    fn hovered_split(&self) -> Option<Line>;
+    fn hovered_split(&self, style: Self::Style) -> Option<Line>;
 }
 
 /// A line.
@@ -22,30 +24,3 @@ pub struct Line {
     /// The width of the [`Line`].
     pub width: f32,
 }
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn picked_split(&self) -> Option<Line> {
-        None
-    }
-
-    fn hovered_split(&self) -> Option<Line> {
-        None
-    }
-}
-
-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/pick_list.rs b/style/src/pick_list.rs
index ad96b201..2bafe932 100644
--- a/style/src/pick_list.rs
+++ b/style/src/pick_list.rs
@@ -1,9 +1,12 @@
-use crate::menu;
 use iced_core::{Background, Color};
 
+use crate::container;
+use crate::menu;
+use crate::scrollable;
+
 /// The appearance of a pick list.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub text_color: Color,
     pub placeholder_color: Color,
     pub background: Background,
@@ -13,60 +16,14 @@ pub struct Style {
     pub icon_size: f32,
 }
 
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Self {
-            text_color: Color::BLACK,
-            placeholder_color: [0.4, 0.4, 0.4].into(),
-            background: Background::Color([0.87, 0.87, 0.87].into()),
-            border_radius: 0.0,
-            border_width: 1.0,
-            border_color: [0.7, 0.7, 0.7].into(),
-            icon_size: 0.7,
-        }
-    }
-}
-
 /// A set of rules that dictate the style of a container.
-pub trait StyleSheet {
-    fn menu(&self) -> menu::Style;
+pub trait StyleSheet:
+    container::StyleSheet + menu::StyleSheet + scrollable::StyleSheet
+{
+    type Style: Default + Copy + Into<<Self as menu::StyleSheet>::Style>;
 
-    fn active(&self) -> Style;
+    fn active(&self, style: <Self as StyleSheet>::Style) -> Appearance;
 
     /// Produces the style of a container.
-    fn hovered(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn menu(&self) -> menu::Style {
-        menu::Style::default()
-    }
-
-    fn active(&self) -> Style {
-        Style::default()
-    }
-
-    fn hovered(&self) -> Style {
-        Style {
-            border_color: Color::BLACK,
-            ..self.active()
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: 'a + StyleSheet,
-{
-    fn from(style: T) -> Self {
-        Box::new(style)
-    }
+    fn hovered(&self, style: <Self as StyleSheet>::Style) -> Appearance;
 }
diff --git a/style/src/progress_bar.rs b/style/src/progress_bar.rs
index a0195c7a..768e7c9c 100644
--- a/style/src/progress_bar.rs
+++ b/style/src/progress_bar.rs
@@ -1,9 +1,9 @@
 //! Provide progress feedback to your users.
-use iced_core::{Background, Color};
+use iced_core::Background;
 
 /// The appearance of a progress bar.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub background: Background,
     pub bar: Background,
     pub border_radius: f32,
@@ -11,32 +11,7 @@ pub struct Style {
 
 /// A set of rules that dictate the style of a progress bar.
 pub trait StyleSheet {
-    fn style(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn style(&self) -> Style {
-        Style {
-            background: Background::Color(Color::from_rgb(0.6, 0.6, 0.6)),
-            bar: Background::Color(Color::from_rgb(0.3, 0.9, 0.3)),
-            border_radius: 5.0,
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
+    type Style: Default + Copy;
 
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: 'a + StyleSheet,
-{
-    fn from(style: T) -> Self {
-        Box::new(style)
-    }
+    fn appearance(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/radio.rs b/style/src/radio.rs
index dab76ad8..a4d4a83b 100644
--- a/style/src/radio.rs
+++ b/style/src/radio.rs
@@ -3,7 +3,7 @@ use iced_core::{Background, Color};
 
 /// The appearance of a radio button.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub background: Background,
     pub dot_color: Color,
     pub border_width: f32,
@@ -13,43 +13,9 @@ pub struct Style {
 
 /// A set of rules that dictate the style of a radio button.
 pub trait StyleSheet {
-    fn active(&self) -> Style;
+    type Style: Default + Copy;
 
-    fn hovered(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Style {
-        Style {
-            background: Background::Color(Color::from_rgb(0.95, 0.95, 0.95)),
-            dot_color: Color::from_rgb(0.3, 0.3, 0.3),
-            border_width: 1.0,
-            border_color: Color::from_rgb(0.6, 0.6, 0.6),
-            text_color: None,
-        }
-    }
-
-    fn hovered(&self) -> Style {
-        Style {
-            background: Background::Color(Color::from_rgb(0.90, 0.90, 0.90)),
-            ..self.active()
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
+    fn active(&self, style: Self::Style) -> Appearance;
 
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
+    fn hovered(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/rule.rs b/style/src/rule.rs
index 12a40f7d..af334912 100644
--- a/style/src/rule.rs
+++ b/style/src/rule.rs
@@ -1,6 +1,27 @@
 //! Display a horizontal or vertical rule for dividing content.
 use iced_core::Color;
 
+/// The appearance of a rule.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The color of the rule.
+    pub color: Color,
+    /// The width (thickness) of the rule line.
+    pub width: u16,
+    /// The radius of the line corners.
+    pub radius: f32,
+    /// The [`FillMode`] of the rule.
+    pub fill_mode: FillMode,
+}
+
+/// A set of rules that dictate the style of a rule.
+pub trait StyleSheet {
+    type Style: Default + Copy;
+
+    /// Produces the style of a rule.
+    fn style(&self, style: Self::Style) -> Appearance;
+}
+
 /// The fill mode of a rule.
 #[derive(Debug, Clone, Copy)]
 pub enum FillMode {
@@ -64,56 +85,3 @@ impl FillMode {
         }
     }
 }
-
-/// The appearance of a rule.
-#[derive(Debug, Clone, Copy)]
-pub struct Style {
-    /// The color of the rule.
-    pub color: Color,
-    /// The width (thickness) of the rule line.
-    pub width: u16,
-    /// The radius of the line corners.
-    pub radius: f32,
-    /// The [`FillMode`] of the rule.
-    pub fill_mode: FillMode,
-}
-
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Style {
-            color: [0.6, 0.6, 0.6, 0.6].into(),
-            width: 1,
-            radius: 0.0,
-            fill_mode: FillMode::Full,
-        }
-    }
-}
-
-/// A set of rules that dictate the style of a rule.
-pub trait StyleSheet {
-    /// Produces the style of a rule.
-    fn style(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn style(&self) -> Style {
-        Style::default()
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: 'a + StyleSheet,
-{
-    fn from(style: T) -> Self {
-        Box::new(style)
-    }
-}
diff --git a/style/src/scrollable.rs b/style/src/scrollable.rs
index 748ba888..8da7409c 100644
--- a/style/src/scrollable.rs
+++ b/style/src/scrollable.rs
@@ -22,55 +22,16 @@ pub struct Scroller {
 
 /// A set of rules that dictate the style of a scrollable.
 pub trait StyleSheet {
+    type Style: Default + Copy;
+
     /// Produces the style of an active scrollbar.
-    fn active(&self) -> Scrollbar;
+    fn active(&self, style: Self::Style) -> Scrollbar;
 
     /// Produces the style of an hovered scrollbar.
-    fn hovered(&self) -> Scrollbar;
+    fn hovered(&self, style: Self::Style) -> Scrollbar;
 
     /// Produces the style of a scrollbar that is being dragged.
-    fn dragging(&self) -> Scrollbar {
-        self.hovered()
-    }
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Scrollbar {
-        Scrollbar {
-            background: None,
-            border_radius: 5.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-            scroller: Scroller {
-                color: [0.0, 0.0, 0.0, 0.7].into(),
-                border_radius: 5.0,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-            },
-        }
-    }
-
-    fn hovered(&self) -> Scrollbar {
-        Scrollbar {
-            background: Some(Background::Color([0.0, 0.0, 0.0, 0.3].into())),
-            ..self.active()
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
+    fn dragging(&self, style: Self::Style) -> Scrollbar {
+        self.hovered(style)
     }
 }
diff --git a/style/src/slider.rs b/style/src/slider.rs
index 1bb28b09..0ff0449b 100644
--- a/style/src/slider.rs
+++ b/style/src/slider.rs
@@ -3,7 +3,7 @@ use iced_core::Color;
 
 /// The appearance of a slider.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub rail_colors: (Color, Color),
     pub handle: Handle,
 }
@@ -26,70 +26,14 @@ pub enum HandleShape {
 
 /// A set of rules that dictate the style of a slider.
 pub trait StyleSheet {
+    type Style: Default + Copy;
+
     /// Produces the style of an active slider.
-    fn active(&self) -> Style;
+    fn active(&self, style: Self::Style) -> Appearance;
 
     /// Produces the style of an hovered slider.
-    fn hovered(&self) -> Style;
+    fn hovered(&self, style: Self::Style) -> Appearance;
 
     /// Produces the style of a slider that is being dragged.
-    fn dragging(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Style {
-        Style {
-            rail_colors: ([0.6, 0.6, 0.6, 0.5].into(), Color::WHITE),
-            handle: Handle {
-                shape: HandleShape::Rectangle {
-                    width: 8,
-                    border_radius: 4.0,
-                },
-                color: Color::from_rgb(0.95, 0.95, 0.95),
-                border_color: Color::from_rgb(0.6, 0.6, 0.6),
-                border_width: 1.0,
-            },
-        }
-    }
-
-    fn hovered(&self) -> Style {
-        let active = self.active();
-
-        Style {
-            handle: Handle {
-                color: Color::from_rgb(0.90, 0.90, 0.90),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-
-    fn dragging(&self) -> Style {
-        let active = self.active();
-
-        Style {
-            handle: Handle {
-                color: Color::from_rgb(0.85, 0.85, 0.85),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
+    fn dragging(&self, style: Self::Style) -> Appearance;
 }
diff --git a/style/src/text.rs b/style/src/text.rs
new file mode 100644
index 00000000..69a4ed85
--- /dev/null
+++ b/style/src/text.rs
@@ -0,0 +1,18 @@
+use iced_core::Color;
+
+pub trait StyleSheet {
+    type Style: Default + Copy;
+
+    fn appearance(&self, style: Self::Style) -> Appearance;
+}
+
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    pub color: Option<Color>,
+}
+
+impl Default for Appearance {
+    fn default() -> Self {
+        Self { color: None }
+    }
+}
diff --git a/style/src/text_input.rs b/style/src/text_input.rs
index 3d5817cc..af86617b 100644
--- a/style/src/text_input.rs
+++ b/style/src/text_input.rs
@@ -3,87 +3,31 @@ use iced_core::{Background, Color};
 
 /// The appearance of a text input.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub background: Background,
     pub border_radius: f32,
     pub border_width: f32,
     pub border_color: Color,
 }
 
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Self {
-            background: Background::Color(Color::WHITE),
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        }
-    }
-}
-
 /// A set of rules that dictate the style of a text input.
 pub trait StyleSheet {
+    type Style: Default + Copy;
+
     /// Produces the style of an active text input.
-    fn active(&self) -> Style;
+    fn active(&self, style: Self::Style) -> Appearance;
 
     /// Produces the style of a focused text input.
-    fn focused(&self) -> Style;
+    fn focused(&self, style: Self::Style) -> Appearance;
 
-    fn placeholder_color(&self) -> Color;
+    fn placeholder_color(&self, style: Self::Style) -> Color;
 
-    fn value_color(&self) -> Color;
+    fn value_color(&self, style: Self::Style) -> Color;
 
-    fn selection_color(&self) -> Color;
+    fn selection_color(&self, style: Self::Style) -> Color;
 
     /// Produces the style of an hovered text input.
-    fn hovered(&self) -> Style {
-        self.focused()
-    }
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Style {
-        Style {
-            background: Background::Color(Color::WHITE),
-            border_radius: 5.0,
-            border_width: 1.0,
-            border_color: Color::from_rgb(0.7, 0.7, 0.7),
-        }
-    }
-
-    fn focused(&self) -> Style {
-        Style {
-            border_color: Color::from_rgb(0.5, 0.5, 0.5),
-            ..self.active()
-        }
-    }
-
-    fn placeholder_color(&self) -> Color {
-        Color::from_rgb(0.7, 0.7, 0.7)
-    }
-
-    fn value_color(&self) -> Color {
-        Color::from_rgb(0.3, 0.3, 0.3)
-    }
-
-    fn selection_color(&self) -> Color {
-        Color::from_rgb(0.8, 0.8, 1.0)
-    }
-}
-
-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)
+    fn hovered(&self, style: Self::Style) -> Appearance {
+        self.focused(style)
     }
 }
diff --git a/style/src/theme.rs b/style/src/theme.rs
new file mode 100644
index 00000000..d2de8a5d
--- /dev/null
+++ b/style/src/theme.rs
@@ -0,0 +1,718 @@
+pub mod palette;
+
+pub use self::palette::Palette;
+
+use crate::application;
+use crate::button;
+use crate::checkbox;
+use crate::container;
+use crate::menu;
+use crate::pane_grid;
+use crate::pick_list;
+use crate::progress_bar;
+use crate::radio;
+use crate::rule;
+use crate::scrollable;
+use crate::slider;
+use crate::text;
+use crate::text_input;
+use crate::toggler;
+
+use iced_core::{Background, Color};
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Theme {
+    Light,
+    Dark,
+}
+
+impl Theme {
+    pub fn palette(self) -> Palette {
+        match self {
+            Self::Light => Palette::LIGHT,
+            Self::Dark => Palette::DARK,
+        }
+    }
+
+    pub fn extended_palette(&self) -> &palette::Extended {
+        match self {
+            Self::Light => &palette::EXTENDED_LIGHT,
+            Self::Dark => &palette::EXTENDED_DARK,
+        }
+    }
+}
+
+impl Default for Theme {
+    fn default() -> Self {
+        Self::Light
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum Application {
+    Default,
+    Custom(fn(Theme) -> application::Appearance),
+}
+
+impl Default for Application {
+    fn default() -> Self {
+        Self::Default
+    }
+}
+
+impl application::StyleSheet for Theme {
+    type Style = Application;
+
+    fn appearance(&self, style: Self::Style) -> application::Appearance {
+        let palette = self.extended_palette();
+
+        match style {
+            Application::Default => application::Appearance {
+                background_color: palette.background.base.color,
+                text_color: palette.background.base.text,
+            },
+            Application::Custom(f) => f(*self),
+        }
+    }
+}
+
+/*
+ * Button
+ */
+#[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 Style = Button;
+
+    fn active(&self, style: Self::Style) -> button::Appearance {
+        let palette = self.extended_palette();
+
+        let appearance = button::Appearance {
+            border_radius: 2.0,
+            ..button::Appearance::default()
+        };
+
+        let from_pair = |pair: palette::Pair| button::Appearance {
+            background: Some(pair.color.into()),
+            text_color: pair.text,
+            ..appearance
+        };
+
+        match style {
+            Button::Primary => from_pair(palette.primary.strong),
+            Button::Secondary => from_pair(palette.secondary.base),
+            Button::Positive => from_pair(palette.success.base),
+            Button::Destructive => from_pair(palette.danger.base),
+            Button::Text => button::Appearance {
+                text_color: palette.background.base.text,
+                ..appearance
+            },
+        }
+    }
+
+    fn hovered(&self, style: Self::Style) -> button::Appearance {
+        let active = self.active(style);
+        let palette = self.extended_palette();
+
+        let background = match style {
+            Button::Primary => Some(palette.primary.base.color),
+            Button::Secondary => Some(palette.background.strong.color),
+            Button::Positive => Some(palette.success.strong.color),
+            Button::Destructive => Some(palette.danger.strong.color),
+            Button::Text => None,
+        };
+
+        button::Appearance {
+            background: background.map(Background::from),
+            ..active
+        }
+    }
+}
+
+/*
+ * Checkbox
+ */
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Checkbox {
+    Primary,
+    Secondary,
+    Success,
+    Danger,
+}
+
+impl Default for Checkbox {
+    fn default() -> Self {
+        Self::Primary
+    }
+}
+
+impl checkbox::StyleSheet for Theme {
+    type Style = Checkbox;
+
+    fn active(
+        &self,
+        style: Self::Style,
+        is_checked: bool,
+    ) -> checkbox::Appearance {
+        let palette = self.extended_palette();
+
+        match style {
+            Checkbox::Primary => checkbox_appearance(
+                palette.primary.strong.text,
+                palette.background.base,
+                palette.primary.strong,
+                is_checked,
+            ),
+            Checkbox::Secondary => checkbox_appearance(
+                palette.background.base.text,
+                palette.background.base,
+                palette.background.base,
+                is_checked,
+            ),
+            Checkbox::Success => checkbox_appearance(
+                palette.success.base.text,
+                palette.background.base,
+                palette.success.base,
+                is_checked,
+            ),
+            Checkbox::Danger => checkbox_appearance(
+                palette.danger.base.text,
+                palette.background.base,
+                palette.danger.base,
+                is_checked,
+            ),
+        }
+    }
+
+    fn hovered(
+        &self,
+        style: Self::Style,
+        is_checked: bool,
+    ) -> checkbox::Appearance {
+        let palette = self.extended_palette();
+
+        match style {
+            Checkbox::Primary => checkbox_appearance(
+                palette.primary.strong.text,
+                palette.background.weak,
+                palette.primary.base,
+                is_checked,
+            ),
+            Checkbox::Secondary => checkbox_appearance(
+                palette.background.base.text,
+                palette.background.weak,
+                palette.background.base,
+                is_checked,
+            ),
+            Checkbox::Success => checkbox_appearance(
+                palette.success.base.text,
+                palette.background.weak,
+                palette.success.base,
+                is_checked,
+            ),
+            Checkbox::Danger => checkbox_appearance(
+                palette.danger.base.text,
+                palette.background.weak,
+                palette.danger.base,
+                is_checked,
+            ),
+        }
+    }
+}
+
+fn checkbox_appearance(
+    checkmark_color: Color,
+    base: palette::Pair,
+    accent: palette::Pair,
+    is_checked: bool,
+) -> checkbox::Appearance {
+    checkbox::Appearance {
+        background: Background::Color(if is_checked {
+            accent.color
+        } else {
+            base.color
+        }),
+        checkmark_color,
+        border_radius: 2.0,
+        border_width: 1.0,
+        border_color: accent.color,
+        text_color: None,
+    }
+}
+
+/*
+ * Container
+ */
+#[derive(Clone, Copy)]
+pub enum Container {
+    Transparent,
+    Box,
+    Custom(fn(&Theme) -> container::Appearance),
+}
+
+impl Default for Container {
+    fn default() -> Self {
+        Self::Transparent
+    }
+}
+
+impl From<fn(&Theme) -> container::Appearance> for Container {
+    fn from(f: fn(&Theme) -> container::Appearance) -> Self {
+        Self::Custom(f)
+    }
+}
+
+impl container::StyleSheet for Theme {
+    type Style = Container;
+
+    fn appearance(&self, style: Self::Style) -> container::Appearance {
+        match style {
+            Container::Transparent => Default::default(),
+            Container::Box => {
+                let palette = self.extended_palette();
+
+                container::Appearance {
+                    text_color: None,
+                    background: palette.background.weak.color.into(),
+                    border_radius: 2.0,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                }
+            }
+            Container::Custom(f) => f(self),
+        }
+    }
+}
+
+/*
+ * Slider
+ */
+impl slider::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: Self::Style) -> slider::Appearance {
+        let palette = self.extended_palette();
+
+        let handle = slider::Handle {
+            shape: slider::HandleShape::Rectangle {
+                width: 8,
+                border_radius: 4.0,
+            },
+            color: Color::WHITE,
+            border_color: Color::WHITE,
+            border_width: 1.0,
+        };
+
+        slider::Appearance {
+            rail_colors: (palette.primary.base.color, Color::TRANSPARENT),
+            handle: slider::Handle {
+                color: palette.background.base.color,
+                border_color: palette.primary.base.color,
+                ..handle
+            },
+        }
+    }
+
+    fn hovered(&self, style: Self::Style) -> slider::Appearance {
+        let active = self.active(style);
+        let palette = self.extended_palette();
+
+        slider::Appearance {
+            handle: slider::Handle {
+                color: palette.primary.weak.color,
+                ..active.handle
+            },
+            ..active
+        }
+    }
+
+    fn dragging(&self, style: Self::Style) -> slider::Appearance {
+        let active = self.active(style);
+        let palette = self.extended_palette();
+
+        slider::Appearance {
+            handle: slider::Handle {
+                color: palette.primary.base.color,
+                ..active.handle
+            },
+            ..active
+        }
+    }
+}
+
+/*
+ * Menu
+ */
+impl menu::StyleSheet for Theme {
+    type Style = ();
+
+    fn appearance(&self, _style: Self::Style) -> menu::Appearance {
+        let palette = self.extended_palette();
+
+        menu::Appearance {
+            text_color: palette.background.weak.text,
+            background: palette.background.weak.color.into(),
+            border_width: 1.0,
+            border_color: palette.background.strong.color,
+            selected_text_color: palette.primary.strong.text,
+            selected_background: palette.primary.strong.color.into(),
+        }
+    }
+}
+
+/*
+ * Pick List
+ */
+impl pick_list::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: ()) -> pick_list::Appearance {
+        let palette = self.extended_palette();
+
+        pick_list::Appearance {
+            text_color: palette.background.weak.text,
+            background: palette.background.weak.color.into(),
+            placeholder_color: palette.background.strong.color,
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.background.strong.color,
+            icon_size: 0.7,
+        }
+    }
+
+    fn hovered(&self, _style: ()) -> pick_list::Appearance {
+        let palette = self.extended_palette();
+
+        pick_list::Appearance {
+            text_color: palette.background.weak.text,
+            background: palette.background.weak.color.into(),
+            placeholder_color: palette.background.strong.color,
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.primary.strong.color,
+            icon_size: 0.7,
+        }
+    }
+}
+
+/*
+ * Radio
+ */
+impl radio::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: Self::Style) -> radio::Appearance {
+        let palette = self.extended_palette();
+
+        radio::Appearance {
+            background: Color::TRANSPARENT.into(),
+            dot_color: palette.primary.strong.color.into(),
+            border_width: 1.0,
+            border_color: palette.primary.strong.color,
+            text_color: None,
+        }
+    }
+
+    fn hovered(&self, style: Self::Style) -> radio::Appearance {
+        let active = self.active(style);
+        let palette = self.extended_palette();
+
+        radio::Appearance {
+            dot_color: palette.primary.strong.color.into(),
+            background: palette.primary.weak.color.into(),
+            ..active
+        }
+    }
+}
+
+/*
+ * Toggler
+ */
+impl toggler::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(
+        &self,
+        _style: Self::Style,
+        is_active: bool,
+    ) -> toggler::Appearance {
+        let palette = self.extended_palette();
+
+        toggler::Appearance {
+            background: if is_active {
+                palette.primary.strong.color
+            } else {
+                palette.background.strong.color
+            },
+            background_border: None,
+            foreground: if is_active {
+                palette.primary.strong.text
+            } else {
+                palette.background.base.color
+            },
+            foreground_border: None,
+        }
+    }
+
+    fn hovered(
+        &self,
+        style: Self::Style,
+        is_active: bool,
+    ) -> toggler::Appearance {
+        let palette = self.extended_palette();
+
+        toggler::Appearance {
+            foreground: if is_active {
+                Color {
+                    a: 0.5,
+                    ..palette.primary.strong.text
+                }
+            } else {
+                palette.background.weak.color
+            },
+            ..self.active(style, is_active)
+        }
+    }
+}
+
+/*
+ * Pane Grid
+ */
+impl pane_grid::StyleSheet for Theme {
+    type Style = ();
+
+    fn picked_split(&self, _style: Self::Style) -> Option<pane_grid::Line> {
+        let palette = self.extended_palette();
+
+        Some(pane_grid::Line {
+            color: palette.primary.strong.color,
+            width: 2.0,
+        })
+    }
+
+    fn hovered_split(&self, _style: Self::Style) -> Option<pane_grid::Line> {
+        let palette = self.extended_palette();
+
+        Some(pane_grid::Line {
+            color: palette.primary.base.color,
+            width: 2.0,
+        })
+    }
+}
+
+/*
+ * Progress Bar
+ */
+#[derive(Clone, Copy)]
+pub enum ProgressBar {
+    Primary,
+    Success,
+    Danger,
+    Custom(fn(&Theme) -> progress_bar::Appearance),
+}
+
+impl Default for ProgressBar {
+    fn default() -> Self {
+        Self::Primary
+    }
+}
+
+impl progress_bar::StyleSheet for Theme {
+    type Style = ProgressBar;
+
+    fn appearance(&self, style: Self::Style) -> progress_bar::Appearance {
+        let palette = self.extended_palette();
+
+        let from_palette = |bar: Color| progress_bar::Appearance {
+            background: palette.background.strong.color.into(),
+            bar: bar.into(),
+            border_radius: 2.0,
+        };
+
+        match style {
+            ProgressBar::Primary => from_palette(palette.primary.base.color),
+            ProgressBar::Success => from_palette(palette.success.base.color),
+            ProgressBar::Danger => from_palette(palette.danger.base.color),
+            ProgressBar::Custom(f) => f(self),
+        }
+    }
+}
+
+/*
+ * Rule
+ */
+#[derive(Clone, Copy)]
+pub enum Rule {
+    Default,
+    Custom(fn(&Theme) -> rule::Appearance),
+}
+
+impl Default for Rule {
+    fn default() -> Self {
+        Self::Default
+    }
+}
+
+impl rule::StyleSheet for Theme {
+    type Style = Rule;
+
+    fn style(&self, style: Self::Style) -> rule::Appearance {
+        let palette = self.extended_palette();
+
+        match style {
+            Rule::Default => rule::Appearance {
+                color: palette.background.strong.color,
+                width: 1,
+                radius: 0.0,
+                fill_mode: rule::FillMode::Full,
+            },
+            Rule::Custom(f) => f(self),
+        }
+    }
+}
+
+/*
+ * Scrollable
+ */
+impl scrollable::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: Self::Style) -> scrollable::Scrollbar {
+        let palette = self.extended_palette();
+
+        scrollable::Scrollbar {
+            background: palette.background.weak.color.into(),
+            border_radius: 2.0,
+            border_width: 0.0,
+            border_color: Color::TRANSPARENT,
+            scroller: scrollable::Scroller {
+                color: palette.background.strong.color.into(),
+                border_radius: 2.0,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
+            },
+        }
+    }
+
+    fn hovered(&self, _style: Self::Style) -> scrollable::Scrollbar {
+        let palette = self.extended_palette();
+
+        scrollable::Scrollbar {
+            background: palette.background.weak.color.into(),
+            border_radius: 2.0,
+            border_width: 0.0,
+            border_color: Color::TRANSPARENT,
+            scroller: scrollable::Scroller {
+                color: palette.primary.strong.color.into(),
+                border_radius: 2.0,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
+            },
+        }
+    }
+}
+
+/*
+ * Text
+ */
+#[derive(Clone, Copy)]
+pub enum Text {
+    Default,
+    Color(Color),
+    Custom(fn(&Theme) -> text::Appearance),
+}
+
+impl Default for Text {
+    fn default() -> Self {
+        Self::Default
+    }
+}
+
+impl From<Color> for Text {
+    fn from(color: Color) -> Self {
+        Text::Color(color)
+    }
+}
+
+impl text::StyleSheet for Theme {
+    type Style = Text;
+
+    fn appearance(&self, style: Self::Style) -> text::Appearance {
+        match style {
+            Text::Default => Default::default(),
+            Text::Color(c) => text::Appearance { color: Some(c) },
+            Text::Custom(f) => f(self),
+        }
+    }
+}
+
+/*
+ * Text Input
+ */
+impl text_input::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: Self::Style) -> text_input::Appearance {
+        let palette = self.extended_palette();
+
+        text_input::Appearance {
+            background: palette.background.base.color.into(),
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.background.strong.color,
+        }
+    }
+
+    fn hovered(&self, _style: Self::Style) -> text_input::Appearance {
+        let palette = self.extended_palette();
+
+        text_input::Appearance {
+            background: palette.background.base.color.into(),
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.background.base.text,
+        }
+    }
+
+    fn focused(&self, _style: Self::Style) -> text_input::Appearance {
+        let palette = self.extended_palette();
+
+        text_input::Appearance {
+            background: palette.background.base.color.into(),
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.primary.strong.color,
+        }
+    }
+
+    fn placeholder_color(&self, _style: Self::Style) -> Color {
+        let palette = self.extended_palette();
+
+        palette.background.strong.color
+    }
+
+    fn value_color(&self, _style: Self::Style) -> Color {
+        let palette = self.extended_palette();
+
+        palette.background.base.text
+    }
+
+    fn selection_color(&self, _style: Self::Style) -> Color {
+        let palette = self.extended_palette();
+
+        palette.primary.weak.color
+    }
+}
diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs
new file mode 100644
index 00000000..cb8bb6e6
--- /dev/null
+++ b/style/src/theme/palette.rs
@@ -0,0 +1,277 @@
+use iced_core::Color;
+
+use lazy_static::lazy_static;
+use palette::{FromColor, Hsl, Mix, RelativeContrast, Srgb};
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Palette {
+    background: Color,
+    text: Color,
+    primary: Color,
+    success: Color,
+    danger: Color,
+}
+
+impl Palette {
+    pub const LIGHT: Self = Self {
+        background: Color::WHITE,
+        text: Color::BLACK,
+        primary: Color::from_rgb(
+            0x5E as f32 / 255.0,
+            0x7C as f32 / 255.0,
+            0xE2 as f32 / 255.0,
+        ),
+        success: Color::from_rgb(
+            0x12 as f32 / 255.0,
+            0x66 as f32 / 255.0,
+            0x4F as f32 / 255.0,
+        ),
+        danger: Color::from_rgb(
+            0xC3 as f32 / 255.0,
+            0x42 as f32 / 255.0,
+            0x3F as f32 / 255.0,
+        ),
+    };
+
+    pub const DARK: Self = Self {
+        background: Color::from_rgb(
+            0x20 as f32 / 255.0,
+            0x22 as f32 / 255.0,
+            0x25 as f32 / 255.0,
+        ),
+        text: Color::from_rgb(0.90, 0.90, 0.90),
+        primary: Color::from_rgb(
+            0x5E as f32 / 255.0,
+            0x7C as f32 / 255.0,
+            0xE2 as f32 / 255.0,
+        ),
+        success: Color::from_rgb(
+            0x12 as f32 / 255.0,
+            0x66 as f32 / 255.0,
+            0x4F as f32 / 255.0,
+        ),
+        danger: Color::from_rgb(
+            0xC3 as f32 / 255.0,
+            0x42 as f32 / 255.0,
+            0x3F as f32 / 255.0,
+        ),
+    };
+}
+
+pub struct Extended {
+    pub background: Background,
+    pub primary: Primary,
+    pub secondary: Secondary,
+    pub success: Success,
+    pub danger: Danger,
+}
+
+lazy_static! {
+    pub static ref EXTENDED_LIGHT: Extended =
+        Extended::generate(Palette::LIGHT);
+    pub static ref EXTENDED_DARK: Extended = Extended::generate(Palette::DARK);
+}
+
+impl Extended {
+    pub fn generate(palette: Palette) -> Self {
+        Self {
+            background: Background::new(palette.background, palette.text),
+            primary: Primary::generate(
+                palette.primary,
+                palette.background,
+                palette.text,
+            ),
+            secondary: Secondary::generate(palette.background, palette.text),
+            success: Success::generate(
+                palette.success,
+                palette.background,
+                palette.text,
+            ),
+            danger: Danger::generate(
+                palette.danger,
+                palette.background,
+                palette.text,
+            ),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+pub struct Pair {
+    pub color: Color,
+    pub text: Color,
+}
+
+impl Pair {
+    pub fn new(color: Color, text: Color) -> Self {
+        Self {
+            color,
+            text: readable(color, text),
+        }
+    }
+}
+
+pub struct Background {
+    pub base: Pair,
+    pub weak: Pair,
+    pub strong: Pair,
+}
+
+impl Background {
+    pub fn new(base: Color, text: Color) -> Self {
+        let weak = mix(base, text, 0.15);
+        let strong = mix(base, text, 0.40);
+
+        Self {
+            base: Pair::new(base, text),
+            weak: Pair::new(weak, text),
+            strong: Pair::new(strong, text),
+        }
+    }
+}
+
+pub struct Primary {
+    pub base: Pair,
+    pub weak: Pair,
+    pub strong: Pair,
+}
+
+impl Primary {
+    pub fn generate(base: Color, background: Color, text: Color) -> Self {
+        let weak = mix(base, background, 0.4);
+        let strong = deviate(base, 0.1);
+
+        Self {
+            base: Pair::new(base, text),
+            weak: Pair::new(weak, text),
+            strong: Pair::new(strong, text),
+        }
+    }
+}
+
+pub struct Secondary {
+    pub base: Pair,
+    pub weak: Pair,
+    pub strong: Pair,
+}
+
+impl Secondary {
+    pub fn generate(base: Color, text: Color) -> Self {
+        let base = mix(base, text, 0.2);
+        let weak = mix(base, text, 0.1);
+        let strong = mix(base, text, 0.3);
+
+        Self {
+            base: Pair::new(base, text),
+            weak: Pair::new(weak, text),
+            strong: Pair::new(strong, text),
+        }
+    }
+}
+
+pub struct Success {
+    pub base: Pair,
+    pub weak: Pair,
+    pub strong: Pair,
+}
+
+impl Success {
+    pub fn generate(base: Color, background: Color, text: Color) -> Self {
+        let weak = mix(base, background, 0.4);
+        let strong = deviate(base, 0.1);
+
+        Self {
+            base: Pair::new(base, text),
+            weak: Pair::new(weak, text),
+            strong: Pair::new(strong, text),
+        }
+    }
+}
+
+pub struct Danger {
+    pub base: Pair,
+    pub weak: Pair,
+    pub strong: Pair,
+}
+
+impl Danger {
+    pub fn generate(base: Color, background: Color, text: Color) -> Self {
+        let weak = mix(base, background, 0.4);
+        let strong = deviate(base, 0.1);
+
+        Self {
+            base: Pair::new(base, text),
+            weak: Pair::new(weak, text),
+            strong: Pair::new(strong, text),
+        }
+    }
+}
+
+fn darken(color: Color, amount: f32) -> Color {
+    let mut hsl = to_hsl(color);
+
+    hsl.lightness = if hsl.lightness - amount < 0.0 {
+        0.0
+    } else {
+        hsl.lightness - amount
+    };
+
+    from_hsl(hsl)
+}
+
+fn lighten(color: Color, amount: f32) -> Color {
+    let mut hsl = to_hsl(color);
+
+    hsl.lightness = if hsl.lightness + amount > 1.0 {
+        1.0
+    } else {
+        hsl.lightness + amount
+    };
+
+    from_hsl(hsl)
+}
+
+fn deviate(color: Color, amount: f32) -> Color {
+    if is_dark(color) {
+        lighten(color, amount)
+    } else {
+        darken(color, amount)
+    }
+}
+
+fn mix(a: Color, b: Color, factor: f32) -> Color {
+    let a_lin = Srgb::from(a).into_linear();
+    let b_lin = Srgb::from(b).into_linear();
+
+    let mixed = a_lin.mix(&b_lin, factor);
+    Srgb::from_linear(mixed).into()
+}
+
+fn readable(background: Color, text: Color) -> Color {
+    if is_readable(background, text) {
+        text
+    } else if is_dark(background) {
+        Color::WHITE
+    } else {
+        Color::BLACK
+    }
+}
+
+fn is_dark(color: Color) -> bool {
+    to_hsl(color).lightness < 0.6
+}
+
+fn is_readable(a: Color, b: Color) -> bool {
+    let a_srgb = Srgb::from(a);
+    let b_srgb = Srgb::from(b);
+
+    a_srgb.has_enhanced_contrast_text(&b_srgb)
+}
+
+fn to_hsl(color: Color) -> Hsl {
+    Hsl::from_color(Srgb::from(color))
+}
+
+fn from_hsl(hsl: Hsl) -> Color {
+    Srgb::from_color(hsl).into()
+}
diff --git a/style/src/toggler.rs b/style/src/toggler.rs
index c06a8cd1..4ee7db46 100644
--- a/style/src/toggler.rs
+++ b/style/src/toggler.rs
@@ -3,7 +3,7 @@ use iced_core::Color;
 
 /// The appearance of a toggler.
 #[derive(Debug)]
-pub struct Style {
+pub struct Appearance {
     pub background: Color,
     pub background_border: Option<Color>,
     pub foreground: Color,
@@ -12,46 +12,9 @@ pub struct Style {
 
 /// A set of rules that dictate the style of a toggler.
 pub trait StyleSheet {
-    fn active(&self, is_active: bool) -> Style;
+    type Style: Default + Copy;
 
-    fn hovered(&self, is_active: bool) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self, is_active: bool) -> Style {
-        Style {
-            background: if is_active {
-                Color::from_rgb(0.0, 1.0, 0.0)
-            } else {
-                Color::from_rgb(0.7, 0.7, 0.7)
-            },
-            background_border: None,
-            foreground: Color::WHITE,
-            foreground_border: None,
-        }
-    }
-
-    fn hovered(&self, is_active: bool) -> Style {
-        Style {
-            foreground: Color::from_rgb(0.95, 0.95, 0.95),
-            ..self.active(is_active)
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
+    fn active(&self, style: Self::Style, is_active: bool) -> Appearance;
 
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: 'a + StyleSheet,
-{
-    fn from(style: T) -> Self {
-        Box::new(style)
-    }
+    fn hovered(&self, style: Self::Style, is_active: bool) -> Appearance;
 }
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 91884ec4..fa1f441a 100644
--- a/wgpu/src/window/compositor.rs
+++ b/wgpu/src/window/compositor.rs
@@ -6,9 +6,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 {
     queue: wgpu::Queue,
     staging_belt: wgpu::util::StagingBelt,
     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`].
@@ -105,6 +108,7 @@ impl Compositor {
             queue,
             staging_belt,
             format,
+            theme: PhantomData,
         })
     }
 
@@ -114,15 +118,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..9c7dd74e 100644
--- a/winit/src/application.rs
+++ b/winit/src/application.rs
@@ -6,9 +6,10 @@ pub use state::State;
 use crate::clipboard::{self, Clipboard};
 use crate::conversion;
 use crate::mouse;
+use crate::renderer;
 use crate::{
-    Color, Command, Debug, Error, Executor, Mode, Proxy, Runtime, Settings,
-    Size, Subscription,
+    Command, Debug, Error, Executor, Mode, Proxy, Runtime, Settings, Size,
+    Subscription,
 };
 
 use iced_futures::futures;
@@ -18,6 +19,8 @@ use iced_graphics::window;
 use iced_native::program::Program;
 use iced_native::user_interface::{self, UserInterface};
 
+pub use iced_native::application::{Appearance, StyleSheet};
+
 use std::mem::ManuallyDrop;
 
 /// An interactive, native cross-platform application.
@@ -31,7 +34,10 @@ use std::mem::ManuallyDrop;
 ///
 /// When using an [`Application`] with the `debug` feature enabled, a debug view
 /// can be toggled by pressing `F12`.
-pub trait Application: Program {
+pub trait Application: Program
+where
+    <Self::Renderer as crate::Renderer>::Theme: StyleSheet,
+{
     /// The data needed to initialize your [`Application`].
     type Flags;
 
@@ -51,6 +57,16 @@ 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 crate::Renderer>::Theme;
+
+    /// Returns the [`Style`] variation of the [`Theme`].
+    fn style(
+        &self,
+    ) -> <<Self::Renderer as crate::Renderer>::Theme as StyleSheet>::Style {
+        Default::default()
+    }
+
     /// Returns the event `Subscription` for the current state of the
     /// application.
     ///
@@ -74,13 +90,6 @@ pub trait Application: Program {
         Mode::Windowed
     }
 
-    /// Returns the background [`Color`] of the [`Application`].
-    ///
-    /// By default, it returns [`Color::WHITE`].
-    fn background_color(&self) -> Color {
-        Color::WHITE
-    }
-
     /// Returns the scale factor of the [`Application`].
     ///
     /// It can be used to dynamically control the size of the UI at runtime
@@ -112,6 +121,7 @@ where
     A: Application + 'static,
     E: Executor + 'static,
     C: window::Compositor<Renderer = A::Renderer> + 'static,
+    <A::Renderer as crate::Renderer>::Theme: StyleSheet,
 {
     use futures::task;
     use futures::Future;
@@ -247,6 +257,7 @@ async fn run_instance<A, E, C>(
     A: Application + 'static,
     E: Executor + 'static,
     C: window::Compositor<Renderer = A::Renderer> + 'static,
+    <A::Renderer as crate::Renderer>::Theme: StyleSheet,
 {
     use iced_futures::futures::stream::StreamExt;
     use winit::event;
@@ -341,8 +352,14 @@ 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,
+                    state.theme(),
+                    &renderer::Style {
+                        text_color: state.text_color(),
+                    },
+                    state.cursor_position(),
+                );
                 debug.draw_finished();
 
                 if new_mouse_interaction != mouse_interaction {
@@ -389,8 +406,14 @@ 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,
+                        state.theme(),
+                        &renderer::Style {
+                            text_color: state.text_color(),
+                        },
+                        state.cursor_position(),
+                    );
 
                     if new_mouse_interaction != mouse_interaction {
                         window.set_cursor_icon(conversion::mouse_interaction(
@@ -497,7 +520,10 @@ pub fn build_user_interface<'a, A: Application>(
     renderer: &mut A::Renderer,
     size: Size,
     debug: &mut Debug,
-) -> UserInterface<'a, A::Message, A::Renderer> {
+) -> UserInterface<'a, A::Message, A::Renderer>
+where
+    <A::Renderer as crate::Renderer>::Theme: StyleSheet,
+{
     debug.view_started();
     let view = application.view();
     debug.view_finished();
@@ -520,7 +546,9 @@ pub fn update<A: Application, E: Executor>(
     messages: &mut Vec<A::Message>,
     window: &winit::window::Window,
     graphics_info: impl FnOnce() -> compositor::Information + Copy,
-) {
+) where
+    <A::Renderer as crate::Renderer>::Theme: StyleSheet,
+{
     for message in messages.drain(..) {
         debug.log_message(&message);
 
diff --git a/winit/src/application/state.rs b/winit/src/application/state.rs
index b54d3aed..6b843919 100644
--- a/winit/src/application/state.rs
+++ b/winit/src/application/state.rs
@@ -1,3 +1,4 @@
+use crate::application::{self, StyleSheet as _};
 use crate::conversion;
 use crate::{Application, Color, Debug, Mode, Point, Size, Viewport};
 
@@ -6,26 +7,34 @@ use winit::event::{Touch, WindowEvent};
 use winit::window::Window;
 
 /// The state of a windowed [`Application`].
-#[derive(Debug, Clone)]
-pub struct State<A: Application> {
+#[allow(missing_debug_implementations)]
+pub struct State<A: Application>
+where
+    <A::Renderer as crate::Renderer>::Theme: application::StyleSheet,
+{
     title: String,
     mode: Mode,
-    background_color: Color,
     scale_factor: f64,
     viewport: Viewport,
     viewport_version: usize,
     cursor_position: winit::dpi::PhysicalPosition<f64>,
     modifiers: winit::event::ModifiersState,
+    theme: <A::Renderer as crate::Renderer>::Theme,
+    appearance: application::Appearance,
     application: PhantomData<A>,
 }
 
-impl<A: Application> State<A> {
+impl<A: Application> State<A>
+where
+    <A::Renderer as crate::Renderer>::Theme: application::StyleSheet,
+{
     /// Creates a new [`State`] for the provided [`Application`] and window.
     pub fn new(application: &A, window: &Window) -> Self {
         let title = application.title();
         let mode = application.mode();
-        let background_color = application.background_color();
         let scale_factor = application.scale_factor();
+        let theme = application.theme();
+        let appearance = theme.appearance(application.style());
 
         let viewport = {
             let physical_size = window.inner_size();
@@ -39,22 +48,18 @@ impl<A: Application> State<A> {
         Self {
             title,
             mode,
-            background_color,
             scale_factor,
             viewport,
             viewport_version: 0,
             // TODO: Encode cursor availability in the type-system
             cursor_position: winit::dpi::PhysicalPosition::new(-1.0, -1.0),
             modifiers: winit::event::ModifiersState::default(),
+            theme,
+            appearance,
             application: PhantomData,
         }
     }
 
-    /// Returns the current background [`Color`] of the [`State`].
-    pub fn background_color(&self) -> Color {
-        self.background_color
-    }
-
     /// Returns the current [`Viewport`] of the [`State`].
     pub fn viewport(&self) -> &Viewport {
         &self.viewport
@@ -95,6 +100,21 @@ impl<A: Application> State<A> {
         self.modifiers
     }
 
+    /// Returns the current theme of the [`State`].
+    pub fn theme(&self) -> &<A::Renderer as crate::Renderer>::Theme {
+        &self.theme
+    }
+
+    /// Returns the current background [`Color`] of the [`State`].
+    pub fn background_color(&self) -> Color {
+        self.appearance.background_color
+    }
+
+    /// Returns the current text [`Color`] of the [`State`].
+    pub fn text_color(&self) -> Color {
+        self.appearance.text_color
+    }
+
     /// Processes the provided window event and updates the [`State`]
     /// accordingly.
     pub fn update(
@@ -187,9 +207,6 @@ impl<A: Application> State<A> {
             self.mode = new_mode;
         }
 
-        // Update background color
-        self.background_color = application.background_color();
-
         // Update scale factor
         let new_scale_factor = application.scale_factor();
 
@@ -203,5 +220,9 @@ impl<A: Application> State<A> {
 
             self.scale_factor = new_scale_factor;
         }
+
+        // Update theme and appearance
+        self.theme = application.theme();
+        self.appearance = self.theme.appearance(application.style());
     }
 }