Couleurs et thèmes
Utilisez les jetons du thème sombre intégré sans promettre un changement de thème qui n'existe pas encore.
Résultat : l'application cesse de disperser des valeurs visuelles et adopte un langage graphique cohérent.
01
Commencez avec Theme::dark
Theme::default renvoie actuellement le même thème sombre intégré. Il fournit des accents orange pour les actions et les jetons sémantiques utilisés par les contrôles du framework.
backgroundsurfaceaccentsuccesswarninginfoLimite actuelle de beta.2
La source publique expose actuellement un seul thème sombre intégré. Il n'existe pas encore de thème clair intégré ni de changement de thème global à l'exécution à documenter.
02
Cinq familles de jetons utiles
Lisez les jetons une seule fois près de la configuration de l'application, puis réutilisez-les dans la mise en page et les styles de texte.
Palette
Les couleurs sémantiques couvrent l'arrière-plan, les surfaces, le texte, l'accent, le danger, le succès, l'avertissement, l'information et le focus.
Espacements
L'échelle fixe contient 4, 8, 12, 16 et 24 pixels logiques.
Rayons
L'échelle fixe des rayons contient 4, 8, 12 et 16 pixels logiques.
Typographie
Des valeurs TextStyle prêtes à l'emploi pour l'interface et le texte monospace combinent police, taille et couleur de texte du thème.
Ombres
Les préréglages BoxShadow petit, moyen et grand ajoutent de la profondeur sans inventer de nouvelles valeurs.
03
Remaniez la carte avec les jetons
Lisez le thème une fois, puis appliquez ses jetons dans une petite surface. Les deux extraits séparent l'accès aux jetons de la mise en forme.
Construisez par petites étapes
Chaque bloc de code change une seule idée de l'application de référence vérifiée.
Étape 1 : nommer les familles de jetons
Les accesseurs renvoient de petites valeurs Copy. La fermeture de contenu peut donc les réutiliser sans disperser de nombres ni de couleurs brutes.
let theme = Theme::dark();
let palette = theme.palette();
let spacing = theme.spacing();
let radius = theme.radius();
let typography = theme.typography();
let shadows = theme.shadows();Étape 2 : styliser une surface
Container::surface démarre à plat. Ajouter shadows.lg une seule fois crée une profondeur volontaire sans cumuler l'ombre du panneau.
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,
)),
),
),Vérifié avec Rust 1.88 sur Theme::dark, ses cinq familles de jetons, Container::surface et Text::style.
À vous de jouer
Exercice : ajustez le sens et la profondeur
Rendez un état plus clair, puis comparez deux niveaux d'ombre choisis volontairement.
- 1Remplacez palette.success par palette.warning dans le texte d'état.
- 2Remplacez shadows.lg par shadows.sm, lancez l'application, puis retirez l'ombre et comparez les deux résultats.
Container::surface commence à plat. Ajoutez exactement un jeton d'ombre lorsque la surface a besoin de relief.
Le texte se lit comme un avertissement et vous pouvez expliquer si la carte convient mieux à plat, avec une petite ombre ou avec une grande ombre.