Just use label.add_css_class(), label.remove_css_class() or label.set_css_classes() and make sure to properly load your CSS style sheets, this is usually done by including them as a resource alongside .ui files and icons. If you are using libadwaita, you can also use its predefined style classes.
full example (requires nightly toolchain)
#!/usr/bin/env -S cargo +nightly -Zscript
***
[dependencies]
gtk = { package = "gtk4", version = "0.9.3", features = ["v4_12"] }
***
use gtk::{glib, prelude::*};
const STYLESHEET: &str = r#"
.green {
color: green;
}
.red {
color: red;
}
"#;
fn main() -> glib::ExitCode {
let app = gtk::Application::builder()
.application_id("org.example.HelloWorld")
.build();
app.connect_activate(|app| {
let window = gtk::ApplicationWindow::builder()
.application(app)
.title("Hello, World!")
.build();
// Stylesheets are usually bundled with application resources
// and automatically loaded
let css_provider = gtk::CssProvider::new();
css_provider.load_from_string(STYLESHEET);
gtk::style_context_add_provider_for_display(
&RootExt::display(&window),
&css_provider,
0
);
let box_ = gtk::Box::new(gtk::Orientation::Vertical, 6);
let label = gtk::Label::builder()
.label("Hello, World")
.css_classes(["green"].as_slice())
.build();
box_.append(&label);
let button = gtk::Button::builder()
.label("Toggle Color")
.build();
box_.append(&button);
button.connect_clicked(glib::clone!(#[weak] label, move |_| {
if label.has_css_class("red") {
label.add_css_class("green");
label.remove_css_class("red");
} else {
label.add_css_class("red");
label.remove_css_class("green");
}
}));
window.set_child(Some(&box_));
window.present();
});
app.run()
}