From c1bd60d78f5383b99554e347bbc876f1b073dd57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Thu, 12 May 2022 03:02:31 +0200 Subject: [PATCH 1/4] Start a draft of the theming RFC --- text/0000-theming.md | 95 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 text/0000-theming.md diff --git a/text/0000-theming.md b/text/0000-theming.md new file mode 100644 index 0000000..315c19f --- /dev/null +++ b/text/0000-theming.md @@ -0,0 +1,95 @@ +# Theming + +## Summary + +This proposal introduces the first-class concept of a __theme__ in iced. A __theme__ is defined as some data type capable of changing the default look of the widgets of an application. + + +## Motivation + +Applications tend to use a single, consistent look for all of its widgets. + +However, styling in iced currently works in a case-by-case basis. In other words, the style of every widget in an application needs to be explicitly set with the `style` methods of the specific widget. For instance: + +```rust +let text_input = TextInput::new(/* ... */).style(theme); +let button = Button::new(/* ... */).style(theme); +let slider = Slider::new(/* ... */).style(theme); +let progress_bar = ProgressBar::new(/* ... */).style(theme); + +let scrollable = Scrollable::new(/* ... */) + .style(theme) + .push(text_input) + .push(button); + .push(slider); +``` + +In the snippet above, all of the widgets use the same `theme` as their `style`. The only way to achieve a consistent look in an application is by passing the same `theme` to every widget. Obviously, this is cumbersome as well as error-prone. + +Given how common and basic this use case is, iced should introduce new ideas to support a single, centralized, consistent theme for an application. + +## Guide-level explanation + +Explain the proposal as if it was already included in the library and you were teaching it to another iced programmer. That generally means: + +- Introducing new named concepts. +- Explaining the feature largely in terms of examples. +- Explaining how iced programmers should *think* about the feature, and how it should impact the way they use iced. It should explain the impact as concretely as possible. + +For implementation-oriented RFCs (e.g. for compiler internals), this section should focus on how compiler contributors should think about the change, and give examples of its concrete impact. For policy RFCs, this section should provide an example-driven introduction to the policy, and explain its impact in concrete terms. + + +## Implementation strategy + +This is the technical portion of the RFC. Explain the design in sufficient detail that: + +- Its interaction with other features is clear. +- It is reasonably clear how the feature would be implemented. +- Corner cases are dissected by example. + +The section should return to the examples given in the previous section, and explain more fully how the detailed proposal makes those examples work. + + +## Drawbacks + +Why should we *not* do this? + + +## Rationale and alternatives + +- Why is this design the best in the space of possible designs? +- What other designs have been considered and what is the rationale for not choosing them? +- What is the impact of not doing this? + + +## [Optional] Prior art + +Discuss prior art, both the good and the bad, in relation to this proposal. +A few examples of what this can include are: + +- Does this feature exist in other GUI toolkits and what experience have their community had? +- Are there any published papers or great posts that discuss this? If you have some relevant papers to refer to, this can serve as a more detailed theoretical background. + +This section is intended to encourage you as an author to think about the lessons from other toolkits, provide readers of your RFC with a fuller picture. +If there is no prior art, that is fine - your ideas are interesting to us whether they are brand new or if it is an adaptation from other languages. + +Note that while precedent set by other languages is some motivation, it does not on its own motivate an RFC. +Please also take into consideration that iced sometimes intentionally diverges from common toolkit features. + + +## Unresolved questions + +- What parts of the design do you expect to resolve through the RFC process before this gets merged? +- What parts of the design do you expect to resolve through the implementation of this feature before stabilization? +- What related issues do you consider out of scope for this RFC that could be addressed in the future independently of the solution that comes out of this RFC? + + +## [Optional] Future possibilities + +Think about what the natural extension and evolution of your proposal would be and how it would affect the toolkit and project as a whole in a holistic way. Try to use this section as a tool to more fully consider all possible interactions with the project and language in your proposal. Also consider how this all fits into the roadmap for the project. + +This is also a good place to "dump ideas", if they are out of scope for the RFC you are writing but otherwise related. + +If you have tried and cannot think of any future possibilities, you may simply state that you cannot think of anything. + +Note that having something written down in the future-possibilities section is not a reason to accept the current or a future RFC; such notes should be in the section on motivation or rationale in this or subsequent RFCs. The section merely provides additional information. From e9c3722429ec6aed565f08e3d7e7e66aa09170c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Thu, 12 May 2022 05:40:48 +0200 Subject: [PATCH 2/4] Finish first draft for theming RFC --- text/0000-theming.md | 477 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 443 insertions(+), 34 deletions(-) diff --git a/text/0000-theming.md b/text/0000-theming.md index 315c19f..5091632 100644 --- a/text/0000-theming.md +++ b/text/0000-theming.md @@ -30,66 +30,475 @@ Given how common and basic this use case is, iced should introduce new ideas to ## Guide-level explanation -Explain the proposal as if it was already included in the library and you were teaching it to another iced programmer. That generally means: +### First-class themes -- Introducing new named concepts. -- Explaining the feature largely in terms of examples. -- Explaining how iced programmers should *think* about the feature, and how it should impact the way they use iced. It should explain the impact as concretely as possible. +An `Application` has a new `Theme` associated type alongside a new `theme` method: -For implementation-oriented RFCs (e.g. for compiler internals), this section should focus on how compiler contributors should think about the change, and give examples of its concrete impact. For policy RFCs, this section should provide an example-driven introduction to the policy, and explain its impact in concrete terms. +```rust +struct Example; + +impl Application for Example { + type Theme = /* ... */; + + // ... + + fn theme(&self) -> Self::Theme { + // ... + } +} +``` + +The `theme` method works analogously to other methods in the trait like `view`, `title`, `mode`, etc. The theme returned in this method will be used to draw the `Application`. + + +Widgets may require the `Application::Theme` to implement their own specific style sheets. For instance, a `Button` requires `Application::Theme` to implement `button::StyleSheet` before it can be used. + +Furthermore, the `StyleSheet` trait of a widget can introduce associated types to offer additional styling flexibility. For instance, `button::StyleSheet` introduces a `Variant` associated type which can be used to set the specific variant of a `Button` instance with the new `Button::variant` method. + +Widgets and `Element` in `iced` now have a `Theme` generic type, alongside the potentially present `Message`, that needs to be specified in the type signatures. The compiler will be able to infer the type in other instances, so the overall impact on the API should be relatively low. + +Let's see an example of how all of this works together! Let's say we want to use our own custom theme type in our `Application`. We start by defining our custom `Theme` type: + +```rust +struct Theme { + text: Color, + action: Color, + positive: Color, + negative: Color, +} +``` + +Then, we define the variants of a `Button` we will have in our application: + +```rust +#[derive(Debug, Clone, Copy)] +enum Button { + Primary, + Positive, + Destructive, +} + +// The `Button` widget demands that the `Variant` of a `button::StyleSheet` +// implements `Default` +impl Default for Button { + fn default() -> Self { + Self::Primary + } +} +``` + +Now, we can implement `button::StyleSheet` for our `Theme`: + +```rust +use iced::button; + +impl button::StyleSheet for Theme { + type Variant = Button; + + fn active(&self, variant: Button) -> button::Style { + // We can use the `Theme` colors in `self` here and produce a different + // `button::Style` for each `Button` variant + match variant { + Variant::Primary => /* ... */, + Variant::Positive => /* ... */, + Variant::Destructive => /* ... */, + } + } +} +``` + +Then, we can use our brand new custom `Theme` in our `Application`: + +```rust +use iced::pure::{Application, Element}; +use iced::pure::{button, column}; + +use theme::{self, Theme}; + +struct Example; + +impl Application for Example { + type Theme = Theme; + + // ... + + // Notice that `Element` needs to know about the custom `Theme` now! + fn view(&self) -> Element { + // Let's show all of our button variants + column() + .push(button("Primary")) // The default `Button` variant is used! + .push(button("Positive").variant(theme::Button::Positive)) + .push(button("Destructive").variant(theme::Button::Destructive)) + .into() + } + + fn theme(&self) -> Theme { + // We generate the `Theme` on the fly here, but we could also store it + // in our application state and return a copy + Theme { + /* ... */ + } + } +} +``` + +As you can see, the new `Theme` associated type ties everything up together in a type-safe way. If we were to change our `Theme` to a different type, our `view` code would stop compiling unless the new type supported the same button variants. + + +### Built-in themes +Overall, custom themes are considered an advanced use case. + +Users that are getting started with iced do not want to be forced to build a custom theme and manually implement the `StyleSheet` trait of every widget they need. Additionally, they may not be interested in fine-tuning the looks of the application, but instead they may just want to choose an existing good-looking theme. + +For these reasons, `iced` provides a built-in `Theme` type and `theme` module with variants for some widgets that can be used out of the box: + +```rust +use iced::pure::{Application, Element}; +use iced::pure::button; +use iced::theme::{self, Theme}; + +struct Example; + +impl Application for Example { + type Theme = Theme; + + fn view(&self) -> Element { + button("Hello!").variant(theme::Button::Secondary) + } + + fn theme(&self) -> Theme { + Theme::Light + } +} +``` + +Notice how, in this case, we didn't specify the `Theme` in the `Element`. All of the built-in widgets (and `Element`) will use the built-in `Theme` type as the default type for their new `Theme` generic type. As a result, when using the built-in `Theme`, all of the type signatures can stay simple! + +For now, the built-in `Theme` will be a simple enum with two variants: + +```rust +pub enum Theme { + Light, + Dark, +} +``` + +The built-in `Theme`, as well as the supported widget variants, can be thoroughly extended in the future! See "[Future possibilities](#future-possibilities)". ## Implementation strategy -This is the technical portion of the RFC. Explain the design in sufficient detail that: +We introduce a `Theme` associated type to the `Renderer` trait in `iced_native`. -- Its interaction with other features is clear. -- It is reasonably clear how the feature would be implemented. -- Corner cases are dissected by example. +As a consequence, widgets can easily add bounds on this `Theme` as needed. For instance, the `Button` described above can be implemented as follows: -The section should return to the examples given in the previous section, and explain more fully how the detailed proposal makes those examples work. +```rust +pub use iced_style::button::{Style, StyleSheet}; + +pub struct Button<'a, Message, Renderer> +where + Renderer: iced_native::Renderer, + // The `Theme` needs to implement `StyleSheet` + Renderer::Theme: StyleSheet, +{ + // ... + // A `Button` stores the `Variant` defined by the `StyleSheet` + variant: ::Variant, +} + +impl<'a, Message, Renderer> Button<'a, Message, Renderer> +where + Renderer: iced_native::Renderer, + Renderer::Theme: StyleSheet, + // We require the `Variant` to implement `Default` as well, so we can + // initialize it! + ::Variant: Default, +{ + pub fn new(content: impl Into>) -> Self { + Button { + // ... + variation: ::Variation::default(), + } + } + + // ... + + /// Sets the style variant of this [`Button`]. + pub fn variant( + mut self, + variant: ::Variation, + ) -> Self { + self.variant = variant; + self + } +} +``` +Additionally, we need to provide the current `Renderer::Theme` to the widgets during `draw`. Therefore, we need to introduce the `Renderer::Theme` as an argument to the `draw` method in the `Widget`: -## Drawbacks +```rust +pub trait Widget +where + Renderer: crate::Renderer, +{ + /// Draws the [`Widget`] using the associated `Renderer`. + fn draw( + &self, + renderer: &mut Renderer, + theme: &Renderer::Theme, + style: &renderer::Style, + layout: Layout<'_>, + cursor_position: Point, + viewport: &Rectangle, + ); +} +``` -Why should we *not* do this? +Notice that we need to add the `crate::Renderer` bound to the `Renderer` generic type in order to properly reference `Renderer::Theme` in the trait body. +Besides the `Widget` trait, the `Overlay` trait needs to change analogously, as well as their `pure` counterparts. -## Rationale and alternatives +Now that widgets need a `Renderer::Theme`, we will need to provide it to `UserInterface::draw` as well: -- Why is this design the best in the space of possible designs? -- What other designs have been considered and what is the rationale for not choosing them? -- What is the impact of not doing this? +```rust +impl<'a, Message, Renderer> UserInterface<'a, Message, Renderer> +where + Renderer: crate::Renderer, +{ + pub fn draw( + &mut self, + renderer: &mut Renderer, + theme: &Renderer::Theme, + cursor_position: Point, + ) -> mouse::Interaction { + // ... + } +} +``` + +The `update` method in `program::State` in `iced_native` will need it too: + +```rust +impl

State

+where + P: Program + 'static, +{ + pub fn update( + &mut self, + bounds: Size, + cursor_position: Point, + renderer: &mut P::Renderer, + theme: &::Theme, + clipboard: &mut dyn Clipboard, + debug: &mut Debug, + ) -> Option> { + // ... + } +} +``` +Since we want `Application` to choose the `Theme`, we will need to make the `Renderer` in `iced_graphics` generic over a `Theme` generic type: -## [Optional] Prior art +```rust +#[derive(Debug)] +pub struct Renderer { + backend: B, + primitives: Vec, + theme: PhantomData, +} +``` -Discuss prior art, both the good and the bad, in relation to this proposal. -A few examples of what this can include are: +And then implement `iced_native::Renderer` as follows: -- Does this feature exist in other GUI toolkits and what experience have their community had? -- Are there any published papers or great posts that discuss this? If you have some relevant papers to refer to, this can serve as a more detailed theoretical background. +```rust +impl iced_native::Renderer for Renderer +where + B: Backend, +{ + type Theme = T; + + // ... +} +``` -This section is intended to encourage you as an author to think about the lessons from other toolkits, provide readers of your RFC with a fuller picture. -If there is no prior art, that is fine - your ideas are interesting to us whether they are brand new or if it is an adaptation from other languages. +These changes prompt the `Renderer` in `iced_wgpu` and `iced_glow` to change analogously: -Note that while precedent set by other languages is some motivation, it does not on its own motivate an RFC. -Please also take into consideration that iced sometimes intentionally diverges from common toolkit features. +```rust +pub type Renderer = + iced_graphics::Renderer; +``` +Notice that we set the default type of the `Theme` generic type as `iced_native::Theme`, which should reduce verbosity when choosing the built-in `Theme`. -## Unresolved questions +The `Compositor` in `iced_wgpu` and `iced_glow` need to also be aware of the `Theme` too: -- What parts of the design do you expect to resolve through the RFC process before this gets merged? -- What parts of the design do you expect to resolve through the implementation of this feature before stabilization? -- What related issues do you consider out of scope for this RFC that could be addressed in the future independently of the solution that comes out of this RFC? +```rust +pub struct Compositor { + // ... + theme: PhantomData, +} +``` +So they can implement the `Compositor` traits from `iced_graphics`: -## [Optional] Future possibilities +```rust +impl iced_graphics::window::Compositor for Compositor { + type Renderer = Renderer; + + // ... +} +``` + +Now, we can introduce the new `theme` method to the `Application` trait in `iced_winit`: + + +```rust +trait Application: Program { + // ... + + /// Returns the current [`Theme`] of the [`Application`]. + fn theme(&self) -> ::Theme; + + // ... +} +``` + +We initialize the `theme` in `run_instance`: + +```rust +// ... + +let mut state = State::new(&application, &window); +let mut viewport_version = state.viewport_version(); +let mut theme = application.theme(); + +// ... +``` + +Then, we properly update it after an `update`: + +```rust +// ... + +theme = application.theme(); +user_interface = ManuallyDrop::new(build_user_interface( + &mut application, + cache, + &mut renderer, + state.logical_size(), + &mut debug, +)); + +// ... +``` + +And we provide it to `UserInterface::draw`: + +```rust +debug.draw_started(); +let new_mouse_interaction = user_interface.draw( + &mut renderer, + &theme, + state.cursor_position(), +); +debug.draw_finished(); +``` + +`iced_glutin` needs to change analogously. + +Finally, we can update the `Application` trait in the `iced` crate. We need to introduce the `Theme` associated type and the `theme` method: + +```rust +pub trait Application: Sized { + // ... + + /// The theme of your [`Application`]. + type Theme; + + // ... + + /// Returns the current [`Theme`] of the [`Application`]. + fn theme(&self) -> Self::Theme; + + // ... +} +``` + +Then, we complete its implementation of both `iced_winit::Program` and `iced_winit::Application` traits: + +```rust + +impl iced_winit::Program for Instance +where + A: Application, +{ + type Renderer = crate::renderer::Renderer; + + // ... +} + +impl crate::runtime::Application for Instance +where + A: Application, +{ + fn theme(&self) -> A::Theme { + self.0.theme() + } +} +``` + +We also need to introduce the `Theme` generic type to all the type aliases for widget (and `Element`): + +```rust +pub type Column<'a, Message, Theme = crate::Theme> = + iced_native::widget::Column<'a, Message, crate::Renderer>; + +pub type Row<'a, Message, Theme = crate::Theme> = + iced_native::widget::Row<'a, Message, crate::Renderer>; + +// ... + +pub type Element<'a, Message, Theme = crate::Theme> = + crate::runtime::Element<'a, Message, crate::Renderer>; +``` + +As before, we set the default type of to the built-in `Theme`. + +And that should be it! + + +## Drawbacks + +The design introduces some complexity on the type signature of the widgets (and `Element`) when using custom themes. However, this issue isn't particularly worrying because users can always define their own type aliases. For instance: + +```rust +pub type Element<'a, Message> = iced::Element<'a, Message, MyCustomTheme>; +``` + +This could be a nice side-effect, since encouraging users to build their own `view` helpers on top of `iced` is great. + +An important drawback is that the current design does not allow for widget customization outside of a `Theme`. For instance, if a user is using an existing `Theme`, they will not be able to easily fine-tune the specific properties of the styling of a `Button` to their liking. They will be forced to create a new custom theme. + +However, I believe this is a good thing since consistency is the main motivation for this feature. Furthermore, users can always leverage composition to reuse existing themes. + + +## Rationale and alternatives +This design is quite elegant, simple, and type-safe. + +Using the existing `Renderer` generic type in the widgets to introduce bounds for the `Theme` is quite straightforward and powerful. + +Furthermore, the design leverages the type system and generics to monomorphize the supported variants of a `Theme`. As a result, it removes the `Box` present everywhere in the current widgets, which should in turn help reduce allocations in `view` code. + +The design also allows for easy customization and extensibility. Supporting custom themes is the main satisfied use case and should allow the community to create and maintain their own custom theme crates. The built-in `Theme` can also be easily extended as well. + + +## Unresolved questions -Think about what the natural extension and evolution of your proposal would be and how it would affect the toolkit and project as a whole in a holistic way. Try to use this section as a tool to more fully consider all possible interactions with the project and language in your proposal. Also consider how this all fits into the roadmap for the project. +- Should we introduce the `Theme` associated type to `Sandbox` too? Or should we hardcode the built-in `Theme` for any `Sandbox` application? +- This may be a good change to rethink and improve the default styling for every widget. What kind of styling should we use for the `Light` and `Dark` variants of the built-in `Theme`? -This is also a good place to "dump ideas", if they are out of scope for the RFC you are writing but otherwise related. -If you have tried and cannot think of any future possibilities, you may simply state that you cannot think of anything. +## Future possibilities -Note that having something written down in the future-possibilities section is not a reason to accept the current or a future RFC; such notes should be in the section on motivation or rationale in this or subsequent RFCs. The section merely provides additional information. +- In the future, the built-in `Theme` can be extended with additional variants for supporting different color schemes. A `Custom` variant offering fine-tune control over the color palette could eventually be possible as well. +- An `Autodetect` variant could be added to the built-in `Theme` to let `iced` choose the best fitting variant of the `Theme` based on the environment (e.g. OS settings). From 25a952592f3850569eec85691092c79d68a89ca1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Thu, 12 May 2022 05:42:44 +0200 Subject: [PATCH 3/4] Update filename of theming RFC --- text/{0000-theming.md => 0006-theming.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename text/{0000-theming.md => 0006-theming.md} (100%) diff --git a/text/0000-theming.md b/text/0006-theming.md similarity index 100% rename from text/0000-theming.md rename to text/0006-theming.md From 6d1a89cf48ef86ea37831c16ba00b4919ca61f7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Sat, 4 Jun 2022 01:19:43 +0200 Subject: [PATCH 4/4] Update `theming` RFC with latest changes - Rename `Variant` to `Style` in a `StyleSheet` - Introduce `Custom` variant to built-in `Theme` - Explain `Palette` type - Add section about extending the built-in themes - Clarify `Sandbox` changes --- text/0006-theming.md | 113 +++++++++++++++++++++++++++++++------------ 1 file changed, 82 insertions(+), 31 deletions(-) diff --git a/text/0006-theming.md b/text/0006-theming.md index 5091632..2933e3f 100644 --- a/text/0006-theming.md +++ b/text/0006-theming.md @@ -53,7 +53,7 @@ The `theme` method works analogously to other methods in the trait like `view`, Widgets may require the `Application::Theme` to implement their own specific style sheets. For instance, a `Button` requires `Application::Theme` to implement `button::StyleSheet` before it can be used. -Furthermore, the `StyleSheet` trait of a widget can introduce associated types to offer additional styling flexibility. For instance, `button::StyleSheet` introduces a `Variant` associated type which can be used to set the specific variant of a `Button` instance with the new `Button::variant` method. +Furthermore, the `StyleSheet` trait of a widget can introduce associated types to offer additional styling flexibility. For instance, `button::StyleSheet` introduces a `Style` associated type which can be used to set the specific style of a `Button` instance with the `Button::style` method. Widgets and `Element` in `iced` now have a `Theme` generic type, alongside the potentially present `Message`, that needs to be specified in the type signatures. The compiler will be able to infer the type in other instances, so the overall impact on the API should be relatively low. @@ -68,7 +68,7 @@ struct Theme { } ``` -Then, we define the variants of a `Button` we will have in our application: +Then, we define the styles of a `Button` we will have in our application: ```rust #[derive(Debug, Clone, Copy)] @@ -78,7 +78,7 @@ enum Button { Destructive, } -// The `Button` widget demands that the `Variant` of a `button::StyleSheet` +// The `Button` widget demands that the `Style` of a `button::StyleSheet` // implements `Default` impl Default for Button { fn default() -> Self { @@ -93,15 +93,15 @@ Now, we can implement `button::StyleSheet` for our `Theme`: use iced::button; impl button::StyleSheet for Theme { - type Variant = Button; + type Style = Button; - fn active(&self, variant: Button) -> button::Style { + fn active(&self, style: Button) -> button::Style { // We can use the `Theme` colors in `self` here and produce a different - // `button::Style` for each `Button` variant - match variant { - Variant::Primary => /* ... */, - Variant::Positive => /* ... */, - Variant::Destructive => /* ... */, + // `button::Style` for each `Button` style + match style { + Button::Primary => /* ... */, + Button::Positive => /* ... */, + Button::Destructive => /* ... */, } } } @@ -124,11 +124,11 @@ impl Application for Example { // Notice that `Element` needs to know about the custom `Theme` now! fn view(&self) -> Element { - // Let's show all of our button variants + // Let's show all of our button styles column() - .push(button("Primary")) // The default `Button` variant is used! - .push(button("Positive").variant(theme::Button::Positive)) - .push(button("Destructive").variant(theme::Button::Destructive)) + .push(button("Primary")) // The default `Button` style is used! + .push(button("Positive").style(theme::Button::Positive)) + .push(button("Destructive").style(theme::Button::Destructive)) .into() } @@ -142,7 +142,7 @@ impl Application for Example { } ``` -As you can see, the new `Theme` associated type ties everything up together in a type-safe way. If we were to change our `Theme` to a different type, our `view` code would stop compiling unless the new type supported the same button variants. +As you can see, the new `Theme` associated type ties everything up together in a type-safe way. If we were to change our `Theme` to a different type, our `view` code would stop compiling unless the new type supported the same button styles. ### Built-in themes @@ -150,7 +150,7 @@ Overall, custom themes are considered an advanced use case. Users that are getting started with iced do not want to be forced to build a custom theme and manually implement the `StyleSheet` trait of every widget they need. Additionally, they may not be interested in fine-tuning the looks of the application, but instead they may just want to choose an existing good-looking theme. -For these reasons, `iced` provides a built-in `Theme` type and `theme` module with variants for some widgets that can be used out of the box: +For these reasons, `iced` provides a built-in `Theme` type and `theme` module with styles for some widgets that can be used out of the box: ```rust use iced::pure::{Application, Element}; @@ -163,7 +163,7 @@ impl Application for Example { type Theme = Theme; fn view(&self) -> Element { - button("Hello!").variant(theme::Button::Secondary) + button("Hello!").style(theme::Button::Secondary) } fn theme(&self) -> Theme { @@ -174,17 +174,72 @@ impl Application for Example { Notice how, in this case, we didn't specify the `Theme` in the `Element`. All of the built-in widgets (and `Element`) will use the built-in `Theme` type as the default type for their new `Theme` generic type. As a result, when using the built-in `Theme`, all of the type signatures can stay simple! -For now, the built-in `Theme` will be a simple enum with two variants: +For now, the built-in `Theme` will be a simple enum with three variants: ```rust pub enum Theme { Light, Dark, + Custom(Palette), } ``` The built-in `Theme`, as well as the supported widget variants, can be thoroughly extended in the future! See "[Future possibilities](#future-possibilities)". +The `Custom` variant can be used to define a custom color `Palette`, which is defined as follows: + +```rust +pub struct Palette { + background: Color, + text: Color, + primary: Color, + success: Color, + danger: Color, +} +``` + +Internally, all of the `Theme` variants will define its own `Palette`. In other words, both `Light` and `Dark` themes are just built-in custom color palettes: + +```rust +assert_eq!(Theme::Light.palette(), Theme::Custom(Theme::Light.palette()).palette()); +``` + +### Extending the built-in themes + +The built-in `Theme` can be supported by custom widgets defined in other crates of the ecosystem. + +A custom widget can define its own `StyleSheet` trait: + +```rust +pub trait StyleSheet { + type Style: Default + Copy; + + // ... +} +``` + +And then, implement the trait for the built-in `Theme` in the same crate: + +```rust +use iced::Theme; + +impl StyleSheet for Theme { + type Style = /* ... */; + + // ... +} +``` + +`Theme` exposes an `extended_palette` method that can be leveraged in the `StyleSheet` implementation to choose the proper colors. `extended_palette` returns a `palette::Extended` type that contains different shades generated from the original `Palette` of a `Theme`. + +These internal details are likely to change as we fine-tune the specific styling for `iced`, which falls out of scope of this RFC. + +### `Sandbox` and simplicity + +For simplicity, the `Sandbox` trait does not have the `Theme` associated type and, as a result, will always use the default built-in `Theme` type. + +As a consequence, users will need to migrate to the `Application` trait if they decide to leverage a custom `Theme` type. However, `Sandbox` does have a `theme` method that can be used to change the `Theme` variant. + ## Implementation strategy @@ -202,33 +257,30 @@ where Renderer::Theme: StyleSheet, { // ... - // A `Button` stores the `Variant` defined by the `StyleSheet` - variant: ::Variant, + // A `Button` stores the `Style` defined by the `StyleSheet` + style: ::Style, } impl<'a, Message, Renderer> Button<'a, Message, Renderer> where Renderer: iced_native::Renderer, Renderer::Theme: StyleSheet, - // We require the `Variant` to implement `Default` as well, so we can - // initialize it! - ::Variant: Default, { pub fn new(content: impl Into>) -> Self { Button { // ... - variation: ::Variation::default(), + style: Default::default(), } } // ... - /// Sets the style variant of this [`Button`]. - pub fn variant( + /// Sets the style of this [`Button`]. + pub fn style( mut self, - variant: ::Variation, + style: impl Into<::Style>, ) -> Self { - self.variant = variant; + self.style = style.into(); self } } @@ -494,11 +546,10 @@ The design also allows for easy customization and extensibility. Supporting cust ## Unresolved questions -- Should we introduce the `Theme` associated type to `Sandbox` too? Or should we hardcode the built-in `Theme` for any `Sandbox` application? -- This may be a good change to rethink and improve the default styling for every widget. What kind of styling should we use for the `Light` and `Dark` variants of the built-in `Theme`? +- All questions resolved for now! ## Future possibilities -- In the future, the built-in `Theme` can be extended with additional variants for supporting different color schemes. A `Custom` variant offering fine-tune control over the color palette could eventually be possible as well. +- In the future, the built-in `Theme` can be extended with additional variants for supporting different color schemes. - An `Autodetect` variant could be added to the built-in `Theme` to let `iced` choose the best fitting variant of the `Theme` based on the environment (e.g. OS settings).