How to use Theme ?

[wiiznokes]

I want to set a background color to my app and set some colors.

Right now, I have a module theme and widget to handle this:

use iced::{application, color};


#[derive(Debug, Clone, Copy, Default)]
pub struct Theme;

impl application::StyleSheet for Theme {

    type Style = ();

    fn appearance(&self, style: &Self::Style) -> application::Appearance {
        
        application::Appearance {
            background_color: color![0x45, 0x85, 0x88],
            text_color: color![0x45, 0x85, 0x88],
        }
    }
}

// Always import widget types from this module since it
// uses our custom theme instead of the built-in iced::Theme.
// Otherwise you will get compilation errors since iced::Element
// expects use of iced::Theme by default.
pub mod widget {
    #![allow(dead_code)]
    use crate::theme::Theme;

    pub type Renderer = iced::Renderer<Theme>;
    pub type Element<'a, Message> = iced::Element<'a, Message, Renderer>;
    pub type Container<'a, Message> = iced::widget::Container<'a, Message, Renderer>;
    pub type Button<'a, Message> = iced::widget::Button<'a, Message, Renderer>;
    pub type Column<'a, Message> = iced::widget::Column<'a, Message, Renderer>;
    pub type Row<'a, Message> = iced::widget::Row<'a, Message, Renderer>;

}

But I get error, and I want to know if there is a better way to do this, because it's not very practical to rewrite all types, even those which don't have custom theme.

[brianch]

If you decide to use a custom theme, you do need to define stylesheets for all widgets you're using (but you can use default appearance options when available, or take a look at Iced's default theme and copy things from there).
If you don't want to redefine the types, you could rewrite your view signature like:

fn view(&self) -> Element<Message, iced::Renderer<theme::MyOwnTheme>> {

And use Iced widgets as usual.

In case you really just need to style the Application, it has a Custom style variant that accepts a Box with a stylesheet, this way you can just create the stylesheet for the Application and set it using the .style() function. Other widgets have this Custom variant as well.

[wiiznokes]

Hello @brianch, thanks for the response!

I had started using a custom theme, then I saw the size of the StyleSheet implementation of text_input 😧
I believe I'm going to use the individual style modification approach.

I defined the implementation of Application this way:

impl Application for Notes {
   ...
   fn view(&self) -> Element<Message, iced::Renderer<theme::Theme>> {
     ...

But I don't see when applying the method .style to Application. Should I use a Box widget as the parent of everything else? But there is no Box widget.

As shown above, I modified the view function with my custom theme. But this way obliges me to modify all the types of the widgets that I use, because otherwise, the return type Renderer will not be the good one. So I have to use Iced's Theme if I understand correctly ?

Also, how to define a style in an individual way ?
For example, I use this to modify the style of a container:

Container::new(tabs).style(theme::Container::Bordered)

But how to do the same thing without touching the appearance function of Container ?

[brianch]

Oh, if you're only adding a custom style for one widget, you don't need to create a new Theme, you would use iced's default one.

Correcting myself, I guess a better way to achieve what you want would be to wrap everything in a Container (you're probably doing it already) and create a separate stylesheet for that Container instead of the Application (like I said before, but with a Container instead of the Application directly).

This is a full example:

use iced::widget::{container, text};
use iced::{executor, Length};
use iced::{Application, Color, Element, Settings, Command};

#[derive(Default)]
struct ContainerExample;

#[derive(Debug, Clone, Copy)]
enum Message {
}

#[derive(Default)]
struct MyContainerStyle;

impl iced::widget::container::StyleSheet for MyContainerStyle {
    type Style = iced::Theme;

    fn appearance(&self, _style: &Self::Style) -> iced::widget::container::Appearance {
        iced::widget::container::Appearance {
                background: Some(iced::Background::Color(iced::Color::BLACK)),
                text_color: Some(Color::WHITE),
                ..Default::default()
        }
    }
}

impl Application for ContainerExample {
    type Executor = executor::Default;
    type Flags = ();
    type Message = Message;
    type Theme = iced::Theme;

    fn new(_flags: ()) -> (ContainerExample, Command<Self::Message>) {
        (ContainerExample::default(), Command::none())
    }

    fn title(&self) -> String {
        String::from("Container Style Example")
    }

    fn update(&mut self, _message: Self::Message) -> Command<Self::Message> {
        Command::none()
    }

    fn view(&self) -> Element<Self::Message> {
        let hello = text("Hello world").size(40.);
        container(hello)
            .style(iced::theme::Container::Custom(Box::new(MyContainerStyle)))
            .width(Length::Fill)
            .height(Length::Fill)
            .center_x()
            .center_y()
            .into()
    }
}

pub fn main() -> iced::Result {
    ContainerExample::run(Settings::default())
}

[anshap1719]

This is what helped me understand how themes work so I'll just post it here, despite the other answers. Just check out the following source code:

https://github.com/veloren/Airshipper/blob/master/client/src/gui/widget.rs

https://github.com/veloren/Airshipper/tree/master/client/src/gui/style

Their code is pretty simple to understand, I think.