changing_styles.md

Changing Styles

Changing styles changed substantially in iced 0.13.x. Like previous versions, most widgets support the style method to change their styles.

However, the style method now takes a closure that receives the theme and the widget's state as arguments, if applicable. This allows for more dynamic and flexible styling. You can use the widget's Style struct directly in the closure to define styling attributes like color, background, and more.

Also, the widgets expose predefined functions like danger, primary, etc. This is particular for each widget.

For example, the Text widget accepts a text::Style struct on its style method. But you can also use the predefined styles like danger or primary. Similarly, the Button widget accepts a button::Style struct on its style method. But you can also use the predefined styles like danger or primary. Note that the button widget gets a status argument on its style method that can be used to change the style based on the button's state.

use iced::{
    Background, Color, theme,
    widget::{button, column, row, text},
};

fn main() -> iced::Result {
    iced::run("My App", MyApp::update, MyApp::view)
}

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

#[derive(Default)]
struct MyApp;

impl MyApp {
    fn update(&mut self, _message: Message) {}

    fn view(&self) -> iced::Element<Message> {
        column![
            text("A solid color").style(|_| text::Style {
                color: Some(Color::from_rgb(0.5, 0.5, 0.0))
            }),
            text("A color from the theme").style(text::danger),
            row![
                button("Cancel").style(button::danger),
                button("Go!~~").style(button::primary),
                button("Save").style(|_, _| button::Style {
                    background: Some(Background::Color(Color::from_rgb(0.0, 0.5, 0.5))),
                    ..Default::default()
                })
            ],
        ]
        .into()
    }
}

➡️ Next: Multipage Apps

📘 Back: Table of contents