Thématisation de Material pour Wear
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
La thématisation Wear Material permet de personnaliser systématiquement la mise en page Wear Material pour refléter votre marque. Lorsque vous commencez à modifier certains aspects de votre interface utilisateur, comme la couleur et la typographie, les outils de thématisation Wear Material appliquent votre mise en page tout au long de votre expérience utilisateur. Les outils permettent de basculer facilement entre les workflows de conception et de code en fournissant des valeurs spécifiques à tous les attributs personnalisables. La personnalisation des valeurs d'attribut crée un thème Wear Material pour votre produit.
Utiliser la thématisation Wear Material
La thématisation Material Wear comprend trois actions principales : personnaliser votre thème, l'appliquer à vos simulations de mise en page et l'utiliser dans le code.
Wear Material Design est fourni avec un thème intégré qui peut être utilisé tel quel. Personnalisez le thème intégré pour que Material Design fonctionne correctement avec votre produit.
La thématisation en pratique
Les thèmes affectent l'ensemble de votre interface utilisateur, y compris les composants individuels comme les chips.
L'exemple suivant montre comment personnaliser les valeurs par défaut d'un chip.
On attribue à un chip contenu des valeurs pour une couleur, une forme et une famille de types spécifiques. Modifiez les valeurs par défaut pour les adapter au style de votre application.
| Avant
Chip Wear Material de référence avec les styles par défaut.
|
Après
Chip Wear Material personnalisé.
|
Couleur
Le système de couleurs permet de définir des couleurs personnalisées pour les composants, le texte, les icônes et les surfaces. Définissez les couleurs de votre thème pour les 13 catégories suivantes :
Principal
Variante principal
Secondaire
Variante secondaire
Arrière-plan
Surface
Erreur
Sur principal
Sur secondaire
Sur arrière-plan
Sur surface
Sur variante de surface
Sur erreur
Typographie
Le système de typographie accepte 11 catégories qui forment ensemble l'échelle de type.
Cette échelle détermine les différents types de styles et de tailles qui s'affichent à l'écran, du corps du texte au bouton.
Les attributs de typographie sont contrôlés par des valeurs personnalisables pour la famille de types, la police, la casse, la taille et le suivi.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Wear Material Theming is the ability to systematically customize Wear Material\nDesign to reflect your brand. When you begin changing aspects of your UI such\nas color and typography, Wear Material Theming tools apply your design vision\nthroughout your user experience. The tools allow easy switching between\ndesign and code workflows by providing specific values for all customizable\nattributes. Customizing the attribute values creates a Wear Material Theme for\nyour product.\n\nUse Wear Material Theming\n-------------------------\n\nWear Material Theming consists of three main actions: customizing your theme,\napplying it across your design mocks, and using it in code.\n\nWear Material Design comes with a built-in theme that can be used as is.\nCustomize the built-in theme to make Material work for your product.\n\n### Theming in practice\n\nTheming affects your entire UI, including individual components such as chips.\nThe following example shows how to customize a chip component's default values.\n\nA contained chip is assigned values for a specific color, shape, and type\nfamily. Adjust the default values to suit your app's style.\n\n|---------------------------------------------------------------|--------------------------------------------|\n| **Before** A baseline Wear Material chip with default styles. | **After** A customized Wear Material chip. |\n\nColor\n-----\n\nThe color system supports setting custom colors for components, text, icons, and\nsurfaces. Set your theme colors for the 13 following categories:\n\n1. Primary\n\n2. Primary Variant\n\n3. Secondary\n\n4. Secondary Variant\n\n5. Background\n\n6. Surface\n\n7. Error\n\n8. On Primary\n\n9. On Secondary\n\n10. On Background\n\n11. On Surface\n\n12. On Surface Variant\n\n13. On Error\n\nTypography\n----------\n\nThe typography system supports 11 categories that together form the type scale.\nThis type scale determines the various type styles and sizes that appear\non-screen, ranging from body copy to button text.\n\nTypography attributes are controlled by values that can be customized for the\ntype family, font, case, size, and tracking."]]
