Merge pull request #146 from hecrj/feature/custom-styling

Custom styling

21 files changed, 345 insertions, 194 deletions

diff --git a/native/src/element.rs b/native/src/element.rs
index 63d2de0c..9b5adb9c 100644
--- a/native/src/element.rs
+++ b/native/src/element.rs
@@ -235,10 +235,12 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
-        self.widget.draw(renderer, layout, cursor_position)
+        self.widget
+            .draw(renderer, defaults, layout, cursor_position)
     }
 
     pub(crate) fn hash_layout(&self, state: &mut Hasher) {
@@ -316,10 +318,12 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
-        self.widget.draw(renderer, layout, cursor_position)
+        self.widget
+            .draw(renderer, defaults, layout, cursor_position)
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
@@ -384,10 +388,12 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
         renderer.explain(
+            defaults,
             self.element.widget.as_ref(),
             layout,
             cursor_position,
diff --git a/native/src/renderer.rs b/native/src/renderer.rs
index 7a68ada4..284c95f6 100644
--- a/native/src/renderer.rs
+++ b/native/src/renderer.rs
@@ -21,14 +21,15 @@
 //! [`checkbox::Renderer`]: ../widget/checkbox/trait.Renderer.html
 
 mod debugger;
-#[cfg(debug_assertions)]
-mod null;
 mod windowed;
 
 pub use debugger::Debugger;
+pub use windowed::{Target, Windowed};
+
+#[cfg(debug_assertions)]
+mod null;
 #[cfg(debug_assertions)]
 pub use null::Null;
-pub use windowed::{Target, Windowed};
 
 use crate::{layout, Element};
 
@@ -43,6 +44,13 @@ pub trait Renderer: Sized {
     /// [`Renderer`]: trait.Renderer.html
     type Output;
 
+    /// The default styling attributes of the [`Renderer`].
+    ///
+    /// This type can be leveraged to implement style inheritance.
+    ///
+    /// [`Renderer`]: trait.Renderer.html
+    type Defaults: Default;
+
     /// 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/debugger.rs b/native/src/renderer/debugger.rs
index 4cc50661..30f3d9a0 100644
--- a/native/src/renderer/debugger.rs
+++ b/native/src/renderer/debugger.rs
@@ -17,6 +17,7 @@ pub trait Debugger: super::Renderer {
     /// [`Element::explain`]: struct.Element.html#method.explain
     fn explain<Message>(
         &mut self,
+        defaults: &Self::Defaults,
         widget: &dyn Widget<Message, Self>,
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs
index 43076d61..df261cdc 100644
--- a/native/src/renderer/null.rs
+++ b/native/src/renderer/null.rs
@@ -1,20 +1,33 @@
 use crate::{
-    button, checkbox, column, radio, row, scrollable, text, text_input,
-    Background, Color, Element, Font, HorizontalAlignment, Layout, Point,
+    button, checkbox, column, progress_bar, radio, row, scrollable, slider,
+    text, text_input, Color, Element, Font, HorizontalAlignment, Layout, Point,
     Rectangle, Renderer, Size, VerticalAlignment,
 };
 
 /// A renderer that does nothing.
+///
+/// It can be useful if you are writing tests!
 #[derive(Debug, Clone, Copy)]
 pub struct Null;
 
+impl Null {
+    /// Creates a new [`Null`] renderer.
+    ///
+    /// [`Null`]: struct.Null.html
+    pub fn new() -> Null {
+        Null
+    }
+}
+
 impl Renderer for Null {
     type Output = ();
+    type Defaults = ();
 }
 
 impl column::Renderer for Null {
     fn draw<Message>(
         &mut self,
+        _defaults: &Self::Defaults,
         _content: &[Element<'_, Message, Self>],
         _layout: Layout<'_>,
         _cursor_position: Point,
@@ -25,6 +38,7 @@ impl column::Renderer for Null {
 impl row::Renderer for Null {
     fn draw<Message>(
         &mut self,
+        _defaults: &Self::Defaults,
         _content: &[Element<'_, Message, Self>],
         _layout: Layout<'_>,
         _cursor_position: Point,
@@ -49,6 +63,7 @@ impl text::Renderer for Null {
 
     fn draw(
         &mut self,
+        _defaults: &Self::Defaults,
         _bounds: Rectangle,
         _content: &str,
         _size: u16,
@@ -61,6 +76,8 @@ impl text::Renderer for Null {
 }
 
 impl scrollable::Renderer for Null {
+    type Style = ();
+
     fn scrollbar(
         &self,
         _bounds: Rectangle,
@@ -79,12 +96,15 @@ impl scrollable::Renderer for Null {
         _is_mouse_over_scrollbar: bool,
         _scrollbar: Option<scrollable::Scrollbar>,
         _offset: u32,
+        _style: &Self::Style,
         _content: Self::Output,
     ) {
     }
 }
 
 impl text_input::Renderer for Null {
+    type Style = ();
+
     fn default_size(&self) -> u16 {
         20
     }
@@ -112,24 +132,31 @@ impl text_input::Renderer for Null {
         _placeholder: &str,
         _value: &text_input::Value,
         _state: &text_input::State,
+        _style: &Self::Style,
     ) -> Self::Output {
     }
 }
 
 impl button::Renderer for Null {
-    fn draw(
+    type Style = ();
+
+    fn draw<Message>(
         &mut self,
+        _defaults: &Self::Defaults,
         _bounds: Rectangle,
         _cursor_position: Point,
+        _is_disabled: bool,
         _is_pressed: bool,
-        _background: Option<Background>,
-        _border_radius: u16,
-        _content: Self::Output,
+        _style: &Self::Style,
+        _content: &Element<'_, Message, Self>,
+        _content_layout: Layout<'_>,
     ) -> Self::Output {
     }
 }
 
 impl radio::Renderer for Null {
+    type Style = ();
+
     fn default_size(&self) -> u32 {
         20
     }
@@ -140,11 +167,14 @@ impl radio::Renderer for Null {
         _is_selected: bool,
         _is_mouse_over: bool,
         _label: Self::Output,
+        _style: &Self::Style,
     ) {
     }
 }
 
 impl checkbox::Renderer for Null {
+    type Style = ();
+
     fn default_size(&self) -> u32 {
         20
     }
@@ -155,6 +185,41 @@ impl checkbox::Renderer for Null {
         _is_checked: bool,
         _is_mouse_over: bool,
         _label: Self::Output,
+        _style: &Self::Style,
+    ) {
+    }
+}
+
+impl slider::Renderer for Null {
+    type Style = ();
+
+    fn height(&self) -> u32 {
+        30
+    }
+
+    fn draw(
+        &mut self,
+        _bounds: Rectangle,
+        _cursor_position: Point,
+        _range: std::ops::RangeInclusive<f32>,
+        _value: f32,
+        _is_dragging: bool,
+        _style_sheet: &Self::Style,
+    ) {
+    }
+}
+
+impl progress_bar::Renderer for Null {
+    type Style = ();
+
+    const DEFAULT_HEIGHT: u16 = 30;
+
+    fn draw(
+        &self,
+        _bounds: Rectangle,
+        _range: std::ops::RangeInclusive<f32>,
+        _value: f32,
+        _style: &Self::Style,
     ) {
     }
 }
diff --git a/native/src/renderer/windowed.rs b/native/src/renderer/windowed.rs
index 813a03f2..ee020ab1 100644
--- a/native/src/renderer/windowed.rs
+++ b/native/src/renderer/windowed.rs
@@ -4,13 +4,16 @@ use raw_window_handle::HasRawWindowHandle;
 
 /// A renderer that can target windows.
 pub trait Windowed: super::Renderer + Sized {
+    /// The settings of the renderer.
+    type Settings: Default;
+
     /// The type of target.
     type Target: Target<Renderer = Self>;
 
     /// Creates a new [`Windowed`] renderer.
     ///
     /// [`Windowed`]: trait.Windowed.html
-    fn new() -> Self;
+    fn new(settings: Self::Settings) -> Self;
 
     /// Performs the drawing operations described in the output on the given
     /// target.
diff --git a/native/src/user_interface.rs b/native/src/user_interface.rs
index 07b936a9..970bf0c1 100644
--- a/native/src/user_interface.rs
+++ b/native/src/user_interface.rs
@@ -43,24 +43,7 @@ where
     /// use iced_wgpu::Renderer;
     ///
     /// # mod iced_wgpu {
-    /// #     pub struct Renderer;
-    /// #
-    /// #     impl Renderer {
-    /// #         pub fn new() -> Self { Renderer }
-    /// #     }
-    /// #
-    /// #     impl iced_native::Renderer for Renderer { type Output = (); }
-    /// #
-    /// #     impl iced_native::column::Renderer for Renderer {
-    /// #         fn draw<Message>(
-    /// #             &mut self,
-    /// #             _children: &[iced_native::Element<'_, Message, Self>],
-    /// #             _layout: iced_native::Layout<'_>,
-    /// #             _cursor_position: iced_native::Point,
-    /// #         ) -> Self::Output {
-    /// #             ()
-    /// #         }
-    /// #     }
+    /// #     pub use iced_native::renderer::Null as Renderer;
     /// # }
     /// #
     /// # use iced_native::Column;
@@ -139,24 +122,7 @@ where
     /// use iced_wgpu::Renderer;
     ///
     /// # mod iced_wgpu {
-    /// #     pub struct Renderer;
-    /// #
-    /// #     impl Renderer {
-    /// #         pub fn new() -> Self { Renderer }
-    /// #     }
-    /// #
-    /// #     impl iced_native::Renderer for Renderer { type Output = (); }
-    /// #
-    /// #     impl iced_native::column::Renderer for Renderer {
-    /// #         fn draw<Message>(
-    /// #             &mut self,
-    /// #             _children: &[iced_native::Element<'_, Message, Self>],
-    /// #             _layout: iced_native::Layout<'_>,
-    /// #             _cursor_position: iced_native::Point,
-    /// #         ) -> Self::Output {
-    /// #             ()
-    /// #         }
-    /// #     }
+    /// #     pub use iced_native::renderer::Null as Renderer;
     /// # }
     /// #
     /// # use iced_native::Column;
@@ -241,24 +207,7 @@ where
     /// use iced_wgpu::Renderer;
     ///
     /// # mod iced_wgpu {
-    /// #     pub struct Renderer;
-    /// #
-    /// #     impl Renderer {
-    /// #         pub fn new() -> Self { Renderer }
-    /// #     }
-    /// #
-    /// #     impl iced_native::Renderer for Renderer { type Output = (); }
-    /// #
-    /// #     impl iced_native::column::Renderer for Renderer {
-    /// #         fn draw<Message>(
-    /// #             &mut self,
-    /// #             _children: &[iced_native::Element<'_, Message, Self>],
-    /// #             _layout: iced_native::Layout<'_>,
-    /// #             _cursor_position: iced_native::Point,
-    /// #         ) -> Self::Output {
-    /// #             ()
-    /// #         }
-    /// #     }
+    /// #     pub use iced_native::renderer::Null as Renderer;
     /// # }
     /// #
     /// # use iced_native::Column;
@@ -304,6 +253,7 @@ where
     pub fn draw(&self, renderer: &mut Renderer) -> Renderer::Output {
         self.root.widget.draw(
             renderer,
+            &Renderer::Defaults::default(),
             Layout::new(&self.layout),
             self.cursor_position,
         )
diff --git a/native/src/widget.rs b/native/src/widget.rs
index ccc9b47e..f9424b02 100644
--- a/native/src/widget.rs
+++ b/native/src/widget.rs
@@ -107,6 +107,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output;
diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs
index 2881105f..51b02172 100644
--- a/native/src/widget/button.rs
+++ b/native/src/widget/button.rs
@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::{
     input::{mouse, ButtonState},
-    layout, Background, Clipboard, Element, Event, Hasher, Layout, Length,
-    Point, Rectangle, Widget,
+    layout, Clipboard, Element, Event, Hasher, Layout, Length, Point,
+    Rectangle, Widget,
 };
 use std::hash::Hash;
 
@@ -28,7 +28,7 @@ use std::hash::Hash;
 ///     .on_press(Message::ButtonPressed);
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct Button<'a, Message, Renderer> {
+pub struct Button<'a, Message, Renderer: self::Renderer> {
     state: &'a mut State,
     content: Element<'a, Message, Renderer>,
     on_press: Option<Message>,
@@ -37,11 +37,13 @@ pub struct Button<'a, Message, Renderer> {
     min_width: u32,
     min_height: u32,
     padding: u16,
-    background: Option<Background>,
-    border_radius: u16,
+    style: Renderer::Style,
 }
 
-impl<'a, Message, Renderer> Button<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Button<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
     /// Creates a new [`Button`] with some local [`State`] and the given
     /// content.
     ///
@@ -60,8 +62,7 @@ impl<'a, Message, Renderer> Button<'a, Message, Renderer> {
             min_width: 0,
             min_height: 0,
             padding: 0,
-            background: None,
-            border_radius: 0,
+            style: Renderer::Style::default(),
         }
     }
 
@@ -105,28 +106,19 @@ impl<'a, Message, Renderer> Button<'a, Message, Renderer> {
         self
     }
 
-    /// Sets the [`Background`] of the [`Button`].
-    ///
-    /// [`Button`]: struct.Button.html
-    /// [`Background`]: ../../struct.Background.html
-    pub fn background<T: Into<Background>>(mut self, background: T) -> Self {
-        self.background = Some(background.into());
-        self
-    }
-
-    /// Sets the border radius of the [`Button`].
+    /// Sets the message that will be produced when the [`Button`] is pressed.
     ///
     /// [`Button`]: struct.Button.html
-    pub fn border_radius(mut self, border_radius: u16) -> Self {
-        self.border_radius = border_radius;
+    pub fn on_press(mut self, msg: Message) -> Self {
+        self.on_press = Some(msg);
         self
     }
 
-    /// Sets the message that will be produced when the [`Button`] is pressed.
+    /// Sets the style of the [`Button`].
     ///
     /// [`Button`]: struct.Button.html
-    pub fn on_press(mut self, msg: Message) -> Self {
-        self.on_press = Some(msg);
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
         self
     }
 }
@@ -227,22 +219,19 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
-        let content = self.content.draw(
-            renderer,
-            layout.children().next().unwrap(),
-            cursor_position,
-        );
-
         renderer.draw(
+            defaults,
             layout.bounds(),
             cursor_position,
+            self.on_press.is_none(),
             self.state.is_pressed,
-            self.background,
-            self.border_radius,
-            content,
+            &self.style,
+            &self.content,
+            layout.children().next().unwrap(),
         )
     }
 
@@ -260,17 +249,22 @@ where
 /// [`Button`]: struct.Button.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer + Sized {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// Draws a [`Button`].
     ///
     /// [`Button`]: struct.Button.html
-    fn draw(
+    fn draw<Message>(
         &mut self,
+        defaults: &Self::Defaults,
         bounds: Rectangle,
         cursor_position: Point,
+        is_disabled: bool,
         is_pressed: bool,
-        background: Option<Background>,
-        border_radius: u16,
-        content: Self::Output,
+        style: &Self::Style,
+        content: &Element<'_, Message, Self>,
+        content_layout: Layout<'_>,
     ) -> Self::Output;
 }
 
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index 06a484c7..95165997 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -3,7 +3,7 @@ use std::hash::Hash;
 
 use crate::{
     input::{mouse, ButtonState},
-    layout, row, text, Align, Clipboard, Color, Element, Event, Font, Hasher,
+    layout, row, text, Align, Clipboard, Element, Event, Font, Hasher,
     HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
     VerticalAlignment, Widget,
 };
@@ -13,7 +13,7 @@ use crate::{
 /// # Example
 ///
 /// ```
-/// # use iced_native::Checkbox;
+/// # type Checkbox<Message> = iced_native::Checkbox<Message, iced_native::renderer::Null>;
 /// #
 /// pub enum Message {
 ///     CheckboxToggled(bool),
@@ -26,15 +26,15 @@ use crate::{
 ///
 /// ![Checkbox drawn by `iced_wgpu`](https://github.com/hecrj/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/checkbox.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Checkbox<Message> {
+pub struct Checkbox<Message, Renderer: self::Renderer> {
     is_checked: bool,
     on_toggle: Box<dyn Fn(bool) -> Message>,
     label: String,
-    label_color: Option<Color>,
     width: Length,
+    style: Renderer::Style,
 }
 
-impl<Message> Checkbox<Message> {
+impl<Message, Renderer: self::Renderer> Checkbox<Message, Renderer> {
     /// Creates a new [`Checkbox`].
     ///
     /// It expects:
@@ -53,29 +53,30 @@ impl<Message> Checkbox<Message> {
             is_checked,
             on_toggle: Box::new(f),
             label: String::from(label),
-            label_color: None,
             width: Length::Shrink,
+            style: Renderer::Style::default(),
         }
     }
 
-    /// Sets the color of the label of the [`Checkbox`].
+    /// Sets the width of the [`Checkbox`].
     ///
     /// [`Checkbox`]: struct.Checkbox.html
-    pub fn label_color<C: Into<Color>>(mut self, color: C) -> Self {
-        self.label_color = Some(color.into());
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
         self
     }
 
-    /// Sets the width of the [`Checkbox`].
+    /// Sets the style of the [`Checkbox`].
     ///
     /// [`Checkbox`]: struct.Checkbox.html
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Checkbox<Message>
+impl<Message, Renderer> Widget<Message, Renderer>
+    for Checkbox<Message, Renderer>
 where
     Renderer: self::Renderer + text::Renderer + row::Renderer,
 {
@@ -134,6 +135,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
@@ -146,11 +148,12 @@ where
 
         let label = text::Renderer::draw(
             renderer,
+            defaults,
             label_layout.bounds(),
             &self.label,
             text::Renderer::default_size(renderer),
             Font::Default,
-            self.label_color,
+            None,
             HorizontalAlignment::Left,
             VerticalAlignment::Center,
         );
@@ -163,6 +166,7 @@ where
             self.is_checked,
             is_mouse_over,
             label,
+            &self.style,
         )
     }
 
@@ -179,6 +183,9 @@ where
 /// [`Checkbox`]: struct.Checkbox.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// Returns the default size of a [`Checkbox`].
     ///
     /// [`Checkbox`]: struct.Checkbox.html
@@ -199,16 +206,19 @@ pub trait Renderer: crate::Renderer {
         is_checked: bool,
         is_mouse_over: bool,
         label: Self::Output,
+        style: &Self::Style,
     ) -> Self::Output;
 }
 
-impl<'a, Message, Renderer> From<Checkbox<Message>>
+impl<'a, Message, Renderer> From<Checkbox<Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: self::Renderer + text::Renderer + row::Renderer,
+    Renderer: 'static + self::Renderer + text::Renderer + row::Renderer,
     Message: 'static,
 {
-    fn from(checkbox: Checkbox<Message>) -> Element<'a, Message, Renderer> {
+    fn from(
+        checkbox: Checkbox<Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(checkbox)
     }
 }
diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs
index 0901bff4..79ec5ab4 100644
--- a/native/src/widget/column.rs
+++ b/native/src/widget/column.rs
@@ -173,10 +173,11 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
-        renderer.draw(&self.children, layout, cursor_position)
+        renderer.draw(defaults, &self.children, layout, cursor_position)
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
@@ -213,6 +214,7 @@ pub trait Renderer: crate::Renderer + Sized {
     /// [`Layout`]: ../layout/struct.Layout.html
     fn draw<Message>(
         &mut self,
+        defaults: &Self::Defaults,
         content: &[Element<'_, Message, Self>],
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index 74f0e0ef..5682fc87 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -3,7 +3,7 @@ use std::hash::Hash;
 
 use crate::{
     layout, Align, Clipboard, Element, Event, Hasher, Layout, Length, Point,
-    Widget,
+    Rectangle, Widget,
 };
 
 use std::u32;
@@ -12,17 +12,21 @@ use std::u32;
 ///
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
-pub struct Container<'a, Message, Renderer> {
+pub struct Container<'a, Message, Renderer: self::Renderer> {
     width: Length,
     height: Length,
     max_width: u32,
     max_height: u32,
     horizontal_alignment: Align,
     vertical_alignment: Align,
+    style: Renderer::Style,
     content: Element<'a, Message, Renderer>,
 }
 
-impl<'a, Message, Renderer> Container<'a, Message, Renderer> {
+impl<'a, Message, Renderer> Container<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
     /// Creates an empty [`Container`].
     ///
     /// [`Container`]: struct.Container.html
@@ -37,6 +41,7 @@ impl<'a, Message, Renderer> Container<'a, Message, Renderer> {
             max_height: u32::MAX,
             horizontal_alignment: Align::Start,
             vertical_alignment: Align::Start,
+            style: Renderer::Style::default(),
             content: content.into(),
         }
     }
@@ -78,7 +83,6 @@ impl<'a, Message, Renderer> Container<'a, Message, Renderer> {
     /// [`Container`]: struct.Container.html
     pub fn center_x(mut self) -> Self {
         self.horizontal_alignment = Align::Center;
-
         self
     }
 
@@ -87,7 +91,14 @@ impl<'a, Message, Renderer> Container<'a, Message, Renderer> {
     /// [`Container`]: struct.Container.html
     pub fn center_y(mut self) -> Self {
         self.vertical_alignment = Align::Center;
+        self
+    }
 
+    /// Sets the style of the [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
         self
     }
 }
@@ -95,7 +106,7 @@ impl<'a, Message, Renderer> Container<'a, Message, Renderer> {
 impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Container<'a, Message, Renderer>
 where
-    Renderer: crate::Renderer,
+    Renderer: self::Renderer,
 {
     fn width(&self) -> Length {
         self.width
@@ -147,13 +158,17 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
-        self.content.draw(
-            renderer,
-            layout.children().next().unwrap(),
+        renderer.draw(
+            defaults,
+            layout.bounds(),
             cursor_position,
+            &self.style,
+            &self.content,
+            layout.children().next().unwrap(),
         )
     }
 
@@ -168,10 +183,35 @@ where
     }
 }
 
+/// The renderer of a [`Container`].
+///
+/// Your [renderer] will need to implement this trait before being
+/// able to use a [`Container`] in your user interface.
+///
+/// [`Container`]: struct.Container.html
+/// [renderer]: ../../renderer/index.html
+pub trait Renderer: crate::Renderer {
+    /// The style supported by this renderer.
+    type Style: Default;
+
+    /// Draws a [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        bounds: Rectangle,
+        cursor_position: Point,
+        style: &Self::Style,
+        content: &Element<'_, Message, Self>,
+        content_layout: Layout<'_>,
+    ) -> Self::Output;
+}
+
 impl<'a, Message, Renderer> From<Container<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + crate::Renderer,
+    Renderer: 'a + self::Renderer,
     Message: 'static,
 {
     fn from(
diff --git a/native/src/widget/image.rs b/native/src/widget/image.rs
index 20375822..1efe4570 100644
--- a/native/src/widget/image.rs
+++ b/native/src/widget/image.rs
@@ -95,6 +95,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Renderer::Output {
diff --git a/native/src/widget/progress_bar.rs b/native/src/widget/progress_bar.rs
index b1d4fd92..67d1ab83 100644
--- a/native/src/widget/progress_bar.rs
+++ b/native/src/widget/progress_bar.rs
@@ -1,7 +1,6 @@
 //! Provide progress feedback to your users.
 use crate::{
-    layout, Background, Color, Element, Hasher, Layout, Length, Point,
-    Rectangle, Size, Widget,
+    layout, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
 };
 
 use std::{hash::Hash, ops::RangeInclusive};
@@ -10,8 +9,9 @@ use std::{hash::Hash, ops::RangeInclusive};
 ///
 /// # Example
 /// ```
-/// # use iced_native::ProgressBar;
+/// # use iced_native::renderer::Null;
 /// #
+/// # pub type ProgressBar = iced_native::ProgressBar<Null>;
 /// let value = 50.0;
 ///
 /// ProgressBar::new(0.0..=100.0, value);
@@ -19,16 +19,15 @@ use std::{hash::Hash, ops::RangeInclusive};
 ///
 /// ![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 {
+pub struct ProgressBar<Renderer: self::Renderer> {
     range: RangeInclusive<f32>,
     value: f32,
     width: Length,
     height: Option<Length>,
-    background: Option<Background>,
-    active_color: Option<Color>,
+    style: Renderer::Style,
 }
 
-impl ProgressBar {
+impl<Renderer: self::Renderer> ProgressBar<Renderer> {
     /// Creates a new [`ProgressBar`].
     ///
     /// It expects:
@@ -42,8 +41,7 @@ impl ProgressBar {
             range,
             width: Length::Fill,
             height: None,
-            background: None,
-            active_color: None,
+            style: Renderer::Style::default(),
         }
     }
 
@@ -63,24 +61,16 @@ impl ProgressBar {
         self
     }
 
-    /// Sets the background of the [`ProgressBar`].
+    /// Sets the style of the [`ProgressBar`].
     ///
     /// [`ProgressBar`]: struct.ProgressBar.html
-    pub fn background(mut self, background: Background) -> Self {
-        self.background = Some(background);
-        self
-    }
-
-    /// Sets the active color of the [`ProgressBar`].
-    ///
-    /// [`ProgressBar`]: struct.ProgressBar.html
-    pub fn active_color(mut self, active_color: Color) -> Self {
-        self.active_color = Some(active_color);
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for ProgressBar
+impl<Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
 where
     Renderer: self::Renderer,
 {
@@ -111,6 +101,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Renderer::Output {
@@ -118,8 +109,7 @@ where
             layout.bounds(),
             self.range.clone(),
             self.value,
-            self.background,
-            self.active_color,
+            &self.style,
         )
     }
 
@@ -137,6 +127,9 @@ where
 /// [`ProgressBar`]: struct.ProgressBar.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// The default height of a [`ProgressBar`].
     ///
     /// [`ProgressBar`]: struct.ProgressBar.html
@@ -157,17 +150,19 @@ pub trait Renderer: crate::Renderer {
         bounds: Rectangle,
         range: RangeInclusive<f32>,
         value: f32,
-        background: Option<Background>,
-        active_color: Option<Color>,
+        style: &Self::Style,
     ) -> Self::Output;
 }
 
-impl<'a, Message, Renderer> From<ProgressBar> for Element<'a, Message, Renderer>
+impl<'a, Message, Renderer> From<ProgressBar<Renderer>>
+    for Element<'a, Message, Renderer>
 where
-    Renderer: self::Renderer,
+    Renderer: 'static + self::Renderer,
     Message: 'static,
 {
-    fn from(progress_bar: ProgressBar) -> 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 876f4f48..99743ec3 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -1,7 +1,7 @@
 //! Create choices using radio buttons.
 use crate::{
     input::{mouse, ButtonState},
-    layout, row, text, Align, Clipboard, Color, Element, Event, Font, Hasher,
+    layout, row, text, Align, Clipboard, Element, Event, Font, Hasher,
     HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
     VerticalAlignment, Widget,
 };
@@ -12,7 +12,8 @@ use std::hash::Hash;
 ///
 /// # Example
 /// ```
-/// # use iced_native::Radio;
+/// # type Radio<Message> =
+/// #     iced_native::Radio<Message, iced_native::renderer::Null>;
 /// #
 /// #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 /// pub enum Choice {
@@ -34,14 +35,14 @@ use std::hash::Hash;
 ///
 /// ![Radio buttons drawn by `iced_wgpu`](https://github.com/hecrj/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/radio.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct Radio<Message> {
+pub struct Radio<Message, Renderer: self::Renderer> {
     is_selected: bool,
     on_click: Message,
     label: String,
-    label_color: Option<Color>,
+    style: Renderer::Style,
 }
 
-impl<Message> Radio<Message> {
+impl<Message, Renderer: self::Renderer> Radio<Message, Renderer> {
     /// Creates a new [`Radio`] button.
     ///
     /// It expects:
@@ -61,20 +62,20 @@ impl<Message> Radio<Message> {
             is_selected: Some(value) == selected,
             on_click: f(value),
             label: String::from(label),
-            label_color: None,
+            style: Renderer::Style::default(),
         }
     }
 
-    /// Sets the `Color` of the label of the [`Radio`].
+    /// Sets the style of the [`Radio`] button.
     ///
     /// [`Radio`]: struct.Radio.html
-    pub fn label_color<C: Into<Color>>(mut self, color: C) -> Self {
-        self.label_color = Some(color.into());
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
         self
     }
 }
 
-impl<Message, Renderer> Widget<Message, Renderer> for Radio<Message>
+impl<Message, Renderer> Widget<Message, Renderer> for Radio<Message, Renderer>
 where
     Renderer: self::Renderer + text::Renderer + row::Renderer,
     Message: Clone,
@@ -132,6 +133,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
@@ -144,11 +146,12 @@ where
 
         let label = text::Renderer::draw(
             renderer,
+            defaults,
             label_layout.bounds(),
             &self.label,
             text::Renderer::default_size(renderer),
             Font::Default,
-            self.label_color,
+            None,
             HorizontalAlignment::Left,
             VerticalAlignment::Center,
         );
@@ -161,6 +164,7 @@ where
             self.is_selected,
             is_mouse_over,
             label,
+            &self.style,
         )
     }
 
@@ -177,6 +181,9 @@ where
 /// [`Radio`]: struct.Radio.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// Returns the default size of a [`Radio`] button.
     ///
     /// [`Radio`]: struct.Radio.html
@@ -197,16 +204,17 @@ pub trait Renderer: crate::Renderer {
         is_selected: bool,
         is_mouse_over: bool,
         label: Self::Output,
+        style: &Self::Style,
     ) -> Self::Output;
 }
 
-impl<'a, Message, Renderer> From<Radio<Message>>
+impl<'a, Message, Renderer> From<Radio<Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: self::Renderer + row::Renderer + text::Renderer,
+    Renderer: 'static + self::Renderer + row::Renderer + text::Renderer,
     Message: 'static + Clone,
 {
-    fn from(radio: Radio<Message>) -> 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 7d951968..b3dc90ba 100644
--- a/native/src/widget/row.rs
+++ b/native/src/widget/row.rs
@@ -174,10 +174,11 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
-        renderer.draw(&self.children, layout, cursor_position)
+        renderer.draw(defaults, &self.children, layout, cursor_position)
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
@@ -215,6 +216,7 @@ pub trait Renderer: crate::Renderer + Sized {
     /// [`Layout`]: ../layout/struct.Layout.html
     fn draw<Message>(
         &mut self,
+        defaults: &Self::Defaults,
         children: &[Element<'_, Message, Self>],
         layout: Layout<'_>,
         cursor_position: Point,
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 9fa602d5..e83f25af 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -11,14 +11,15 @@ use std::{f32, hash::Hash, u32};
 /// 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: self::Renderer> {
     state: &'a mut State,
     height: Length,
     max_height: u32,
     content: Column<'a, Message, Renderer>,
+    style: Renderer::Style,
 }
 
-impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer> {
+impl<'a, Message, Renderer: self::Renderer> Scrollable<'a, Message, Renderer> {
     /// Creates a new [`Scrollable`] with the given [`State`].
     ///
     /// [`Scrollable`]: struct.Scrollable.html
@@ -29,6 +30,7 @@ impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer> {
             height: Length::Shrink,
             max_height: u32::MAX,
             content: Column::new(),
+            style: Renderer::Style::default(),
         }
     }
 
@@ -90,6 +92,14 @@ impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer> {
         self
     }
 
+    /// Sets the style of the [`Scrollable`] .
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
+
     /// Adds an element to the [`Scrollable`].
     ///
     /// [`Scrollable`]: struct.Scrollable.html
@@ -105,7 +115,7 @@ impl<'a, Message, Renderer> Scrollable<'a, Message, Renderer> {
 impl<'a, Message, Renderer> Widget<Message, Renderer>
     for Scrollable<'a, Message, Renderer>
 where
-    Renderer: self::Renderer + column::Renderer,
+    Renderer: 'static + self::Renderer + column::Renderer,
 {
     fn width(&self) -> Length {
         Length::Fill
@@ -255,6 +265,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
@@ -277,7 +288,12 @@ where
                 Point::new(cursor_position.x, -1.0)
             };
 
-            self.content.draw(renderer, content_layout, cursor_position)
+            self.content.draw(
+                renderer,
+                defaults,
+                content_layout,
+                cursor_position,
+            )
         };
 
         self::Renderer::draw(
@@ -289,12 +305,13 @@ where
             is_mouse_over_scrollbar,
             scrollbar,
             offset,
+            &self.style,
             content,
         )
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
-        std::any::TypeId::of::<Scrollable<'static, (), ()>>().hash(state);
+        std::any::TypeId::of::<Scrollable<'static, (), Renderer>>().hash(state);
 
         self.height.hash(state);
         self.max_height.hash(state);
@@ -441,6 +458,9 @@ pub struct Scroller {
 /// [`Scrollable`]: struct.Scrollable.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer + Sized {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// Returns the [`Scrollbar`] given the bounds and content bounds of a
     /// [`Scrollable`].
     ///
@@ -477,6 +497,7 @@ pub trait Renderer: crate::Renderer + Sized {
         is_mouse_over_scrollbar: bool,
         scrollbar: Option<Scrollbar>,
         offset: u32,
+        style: &Self::Style,
         content: Self::Output,
     ) -> Self::Output;
 }
@@ -484,7 +505,7 @@ pub trait Renderer: crate::Renderer + Sized {
 impl<'a, Message, Renderer> From<Scrollable<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: 'a + self::Renderer + column::Renderer,
+    Renderer: 'static + self::Renderer + column::Renderer,
     Message: 'static,
 {
     fn from(
diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index f446f7e8..008203fe 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -21,8 +21,9 @@ use std::{hash::Hash, ops::RangeInclusive};
 ///
 /// # Example
 /// ```
-/// # use iced_native::{slider, Slider};
+/// # use iced_native::{slider, renderer::Null};
 /// #
+/// # pub type Slider<'a, Message> = iced_native::Slider<'a, Message, Null>;
 /// pub enum Message {
 ///     SliderChanged(f32),
 /// }
@@ -35,15 +36,16 @@ use std::{hash::Hash, ops::RangeInclusive};
 ///
 /// ![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, Message> {
+pub struct Slider<'a, Message, Renderer: self::Renderer> {
     state: &'a mut State,
     range: RangeInclusive<f32>,
     value: f32,
     on_change: Box<dyn Fn(f32) -> Message>,
     width: Length,
+    style: Renderer::Style,
 }
 
-impl<'a, Message> Slider<'a, Message> {
+impl<'a, Message, Renderer: self::Renderer> Slider<'a, Message, Renderer> {
     /// Creates a new [`Slider`].
     ///
     /// It expects:
@@ -71,6 +73,7 @@ impl<'a, Message> Slider<'a, Message> {
             range,
             on_change: Box::new(on_change),
             width: Length::Fill,
+            style: Renderer::Style::default(),
         }
     }
 
@@ -81,6 +84,14 @@ impl<'a, Message> Slider<'a, Message> {
         self.width = width;
         self
     }
+
+    /// Sets the style of the [`Slider`].
+    ///
+    /// [`Slider`]: struct.Slider.html
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
 }
 
 /// The local state of a [`Slider`].
@@ -100,7 +111,8 @@ impl State {
     }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for Slider<'a, Message>
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for Slider<'a, Message, Renderer>
 where
     Renderer: self::Renderer,
 {
@@ -178,6 +190,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
@@ -187,6 +200,7 @@ where
             self.range.clone(),
             self.value,
             self.state.is_dragging,
+            &self.style,
         )
     }
 
@@ -203,6 +217,9 @@ where
 /// [`Slider`]: struct.Slider.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// Returns the height of the [`Slider`].
     ///
     /// [`Slider`]: struct.Slider.html
@@ -227,16 +244,19 @@ pub trait Renderer: crate::Renderer {
         range: RangeInclusive<f32>,
         value: f32,
         is_dragging: bool,
+        style: &Self::Style,
     ) -> Self::Output;
 }
 
-impl<'a, Message, Renderer> From<Slider<'a, Message>>
+impl<'a, Message, Renderer> From<Slider<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
-    Renderer: self::Renderer,
+    Renderer: 'static + self::Renderer,
     Message: 'static,
 {
-    fn from(slider: Slider<'a, Message>) -> Element<'a, Message, Renderer> {
+    fn from(
+        slider: Slider<'a, Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(slider)
     }
 }
diff --git a/native/src/widget/space.rs b/native/src/widget/space.rs
index 2029c52f..24c94bf6 100644
--- a/native/src/widget/space.rs
+++ b/native/src/widget/space.rs
@@ -68,6 +68,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Renderer::Output {
diff --git a/native/src/widget/svg.rs b/native/src/widget/svg.rs
index 25587ffa..063730bb 100644
--- a/native/src/widget/svg.rs
+++ b/native/src/widget/svg.rs
@@ -91,6 +91,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Renderer::Output {
diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs
index caa81db0..e4490fb6 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -146,10 +146,12 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Renderer::Output {
         renderer.draw(
+            defaults,
             layout.bounds(),
             &self.content,
             self.size.unwrap_or(renderer.default_size()),
@@ -209,6 +211,7 @@ pub trait Renderer: crate::Renderer {
     /// [`VerticalAlignment`]: enum.VerticalAlignment.html
     fn draw(
         &mut self,
+        defaults: &Self::Defaults,
         bounds: Rectangle,
         content: &str,
         size: u16,
diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs
index f744da27..25032559 100644
--- a/native/src/widget/text_input.rs
+++ b/native/src/widget/text_input.rs
@@ -15,8 +15,9 @@ use unicode_segmentation::UnicodeSegmentation;
 ///
 /// # Example
 /// ```
-/// # use iced_native::{text_input, TextInput};
+/// # use iced_native::{text_input, renderer::Null};
 /// #
+/// # pub type TextInput<'a, Message> = iced_native::TextInput<'a, Message, Null>;
 /// #[derive(Debug, Clone)]
 /// enum Message {
 ///     TextInputChanged(String),
@@ -35,7 +36,7 @@ use unicode_segmentation::UnicodeSegmentation;
 /// ```
 /// ![Text input drawn by `iced_wgpu`](https://github.com/hecrj/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct TextInput<'a, Message> {
+pub struct TextInput<'a, Message, Renderer: self::Renderer> {
     state: &'a mut State,
     placeholder: String,
     value: Value,
@@ -46,9 +47,10 @@ pub struct TextInput<'a, Message> {
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message>,
     on_submit: Option<Message>,
+    style: Renderer::Style,
 }
 
-impl<'a, Message> TextInput<'a, Message> {
+impl<'a, Message, Renderer: self::Renderer> TextInput<'a, Message, Renderer> {
     /// Creates a new [`TextInput`].
     ///
     /// It expects:
@@ -64,7 +66,7 @@ impl<'a, Message> TextInput<'a, Message> {
         placeholder: &str,
         value: &str,
         on_change: F,
-    ) -> TextInput<'a, Message>
+    ) -> Self
     where
         F: 'static + Fn(String) -> Message,
     {
@@ -79,6 +81,7 @@ impl<'a, Message> TextInput<'a, Message> {
             size: None,
             on_change: Box::new(on_change),
             on_submit: None,
+            style: Renderer::Style::default(),
         }
     }
 
@@ -130,11 +133,20 @@ impl<'a, Message> TextInput<'a, Message> {
         self.on_submit = Some(message);
         self
     }
+
+    /// Sets the style of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
 }
 
-impl<'a, Message, Renderer> Widget<Message, Renderer> for TextInput<'a, Message>
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for TextInput<'a, Message, Renderer>
 where
-    Renderer: self::Renderer,
+    Renderer: 'static + self::Renderer,
     Message: Clone + std::fmt::Debug,
 {
     fn width(&self) -> Length {
@@ -343,6 +355,7 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
+        _defaults: &Renderer::Defaults,
         layout: Layout<'_>,
         cursor_position: Point,
     ) -> Renderer::Output {
@@ -358,6 +371,7 @@ where
                 &self.placeholder,
                 &self.value.secure(),
                 &self.state,
+                &self.style,
             )
         } else {
             renderer.draw(
@@ -368,6 +382,7 @@ where
                 &self.placeholder,
                 &self.value,
                 &self.state,
+                &self.style,
             )
         }
     }
@@ -375,7 +390,7 @@ where
     fn hash_layout(&self, state: &mut Hasher) {
         use std::{any::TypeId, hash::Hash};
 
-        TypeId::of::<TextInput<'static, ()>>().hash(state);
+        TypeId::of::<TextInput<'static, (), Renderer>>().hash(state);
 
         self.width.hash(state);
         self.max_width.hash(state);
@@ -392,6 +407,9 @@ where
 /// [`TextInput`]: struct.TextInput.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer: crate::Renderer + Sized {
+    /// The style supported by this renderer.
+    type Style: Default;
+
     /// Returns the default size of the text of the [`TextInput`].
     ///
     /// [`TextInput`]: struct.TextInput.html
@@ -440,17 +458,18 @@ pub trait Renderer: crate::Renderer + Sized {
         placeholder: &str,
         value: &Value,
         state: &State,
+        style: &Self::Style,
     ) -> Self::Output;
 }
 
-impl<'a, Message, Renderer> From<TextInput<'a, Message>>
+impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
     Renderer: 'static + self::Renderer,
     Message: 'static + Clone + std::fmt::Debug,
 {
     fn from(
-        text_input: TextInput<'a, Message>,
+        text_input: TextInput<'a, Message, Renderer>,
     ) -> Element<'a, Message, Renderer> {
         Element::new(text_input)
     }