Styling and Theming

Beautiful applications need great styling. I’ll explore Freya’s styling capabilities.

Related: See how I applied these styling techniques with the help of AI in my blog post: Building Freya GUI with AI.

Colors

Freya uses the Color enum/struct for colors:

rect()
    .background(Color::from_rgb(30, 30, 30))      // RGB
    .background(Color::from_rgba(30, 30, 30, 0.5)) // RGBA
    .background(Color::parse("#1e1e1e").unwrap()) // Hex (if available or manual r/g/b)
    .background(Color::RED)                       // Named colors

Typography

Typography can be controlled via builder methods:

label()
    .font_size(16.0)
    .font_weight(FontWeight::BOLD)       // Normal, Bold, etc.
    .font_style(FontStyle::Italic)      // Normal, Italic
    .font_family("Arial")
    .line_height(1.5)
    .color(Color::WHITE)

Borders

Borders are defined using the Border struct:

rect()
    .border(
        Border::new(
            2.0,                    // Width
            Color::WHITE            // Color
        )
    )
    .corner_radius(12.0)

Shadows

Shadows are defined using the Shadow struct:

rect()
    .shadow(
        Shadow::new(
            0.0,    // x offset
            4.0,    // y offset
            10.0,   // blur radius
            0.0,    // spread
            Color::from_rgba(0, 0, 0, 0.3)
        )
    )

Creating a Theme

You can define constants or use the Context API for theming:

struct ThemeColors {
    background: Color,
    text: Color,
}

const THEME: ThemeColors = ThemeColors {
    background: Color::from_rgb(10, 10, 10),
    text: Color::from_rgb(255, 255, 255),
};

fn themed_card() -> impl IntoElement {
    rect()
        .background(THEME.background)
        .corner_radius(12.0)
        .padding(20.0)
        .shadow(Shadow::new(0.0, 4.0, 12.0, 0.0, Color::from_rgba(0, 0, 0, 0.5)))
        .child(
            label()
                .color(THEME.text)
                .child("Themed Card")
        )
}

What’s Next

Next, I’ll explore advanced patterns for building complex applications.

Summary

• Colors use Color struct with helpers
• Typography uses builder methods like .font_weight()
• Borders and Shadows use Border and Shadow structs
• Themes unify your app’s appearance