Colors and themes
Use Ailloli UI's built-in dark theme tokens without promising a theme switch that does not exist yet.
Outcome: the app stops scattering visual numbers and starts speaking one consistent design language.
01
Start with Theme::dark
Theme::default currently returns the same built-in dark theme. It carries orange action accents and semantic tokens used by the framework controls.
backgroundsurfaceaccentsuccesswarninginfoCurrent beta.2 boundary
The public source currently exposes one built-in dark theme. There is no built-in light theme or application-wide runtime theme switch to document yet.
02
Five useful token families
Read the tokens once near the application setup, then reuse them across layout and text styles.
Palette
Semantic colors cover background, surfaces, text, accent, danger, success, warning, info, and focus.
Spacing
The fixed scale is 4, 8, 12, 16, and 24 logical pixels.
Radius
The fixed radius scale is 4, 8, 12, and 16 logical pixels.
Typography
Ready-made UI and monospace TextStyle values combine font, size, and the theme text color.
Shadows
Small, medium, and large BoxShadow presets add depth without inventing new values.
03
Refactor the card with tokens
Read the theme once, then apply its tokens in one small surface. The two fragments separate token access from styling.
Build it in small steps
Each code block changes one idea from the verified reference application.
Step 1: name the token families
The accessors return small Copy values, so the content closure can reuse them without scattering raw numbers and colours.
let theme = Theme::dark();
let palette = theme.palette();
let spacing = theme.spacing();
let radius = theme.radius();
let typography = theme.typography();
let shadows = theme.shadows();Step 2: style one surface
Container::surface starts flat. Adding shadows.lg once creates deliberate depth without stacking the panel preset shadow.
Container::surface(theme)
.width(520.0)
.padding(spacing.xl)
.radius(radius.xl)
.shadow(shadows.lg)
.child(
Column::new()
.gap(spacing.lg)
.child(
Text::new("One visual language")
.style(typography.ui_lg),
)
.child(
Text::new("Spacing, type, color, radius, and depth now agree.")
.style(typography.ui_md),
)
.child(
Text::new("Ready to interact")
.style(TextStyle::new(
FontId::Ui,
14,
palette.success,
)),
),
),Checked with Rust 1.88 against Theme::dark, its five token families, Container::surface, and Text::style.
Try it yourself
Exercise: tune meaning and depth
Make one status clearer, then compare two deliberate shadow levels.
- 1Replace palette.success with palette.warning in the status text.
- 2Replace shadows.lg with shadows.sm, run the app, then remove the shadow once and compare both results.
Container::surface starts flat. Add exactly one shadow token only when the surface needs elevation.
The text reads as a warning, and you can explain which of the flat, small-shadow, or large-shadow surfaces best fits the card.