Thèmes

Un thème est un ensemble de styles ou d'attributs tels que la couleur, le type et la forme, qui peuvent affecter l'apparence de l'appareil mobile ou de l'appareil à grand écran d'un utilisateur et dans l'application.

Points à retenir

• Pour offrir aux utilisateurs une expérience plus personnalisée et accessible, assurez-vous que votre application adopte les préférences système, y compris les thèmes, comme clair ou sombre, dynamique et le contraste.
• Créez un thème personnalisé à utiliser comme création de remplacement si le thème dynamique n'est pas disponible.
• Tenez compte des paramètres de type lorsque vous utilisez différents thèmes.
• Vérifiez toujours le contraste du texte et de la surface pour assurer la lisibilité.

Types de thèmes

Les thèmes peuvent être basés sur le système ou sur les applications. Les thèmes système peuvent affecter l'intégralité d'un appareil et proposent les commandes correspondantes dans les paramètres de l'appareil, tandis qu'une application le thème ne s'applique qu'à l'application dans laquelle il est implémenté.

Votre application doit implémenter l'un ou l'autre type de thème pour l'afficher, mais les thèmes d'application s'appliquent uniquement dans l'application et non ailleurs sur l'appareil. Vous pouvez aussi remplacer certaines les paramètres du thème système par les paramètres de l'application.

Thèmes système

Les thèmes système s'appliquent à l'ensemble d'un appareil Android, y compris à des applications individuelles en fonction des paramètres utilisateur. Les thèmes système incluent les thèmes clair et sombre, les thèmes générés par les utilisateurs et les thèmes du fabricant.

Thèmes clair et sombre

Le thème clair, ou mode Jour, se compose d'un mode d'affichage lumineux avec une luminance et surfaces construites à partir de valeurs tonales élevées. À l'inverse, le thème sombre, ou le mode Nuit, déplace l'interface utilisateur pour réduire la luminance. Surfaces de couleur sombre ou des valeurs tonales faibles.

Le thème sombre offre plusieurs avantages: il améliore la lisibilité de l'écran par temps ensoleillé ou bas en réduisant la fatigue oculaire due à une luminosité plus faible, et en préservant de la batterie. En outre, il s'agit souvent de la fonctionnalité d'application la plus demandée par les utilisateurs.

</ph>

Tenez compte des points suivants lorsque vous intégrez des thèmes clair et sombre:

• Vous pouvez personnaliser un jeu de couleurs pour améliorer l'expression. Si vous utilisez Material Theme Builder pour créer un schéma, crée automatiquement un thème sombre d'un schéma. En savoir plus sur la personnalisation de Material et le système de couleurs pour créer un avec un thème de marque.
• Les utilisateurs peuvent définir un thème clair ou sombre dans les paramètres d'affichage au niveau du système. "Toujours activé", "Toujours désactivé" ou "Automatique" en fonction de l'heure de la journée. Nous vous recommandons qui reflètent les paramètres système préférés de l'utilisateur, mais c'est aussi créer des contrôles dans l'application afin de fournir aux utilisateurs des modifications plus précises.
• Le contenu Web dans WebView peut également utiliser le style clair, sombre ou par défaut. Lire la prise en charge du thème sombre dans WebViews.
• Si les utilisateurs l'ont activé, Android peut forcer l'activation d'un thème sombre. Vous pouvez également créer thème sombre personnalisé pour plus de contrôle.
• Si l'utilisateur n'a pas activé d'autres thèmes ou paramètres, vous pouvez "verrouillage" le thème clair pour votre application. Nous vous déconseillons toutefois de le faire, car elle peut aller à l'encontre des besoins d'accessibilité et de personnalisation d'un utilisateur.

</ph>

Thèmes générés par les utilisateurs

Les thèmes générés par les utilisateurs sont compatibles avec la couleur dynamique, que nous disponible avec Material You à partir d'Android 12. Lorsque cette option est activée, les créations dynamiques la couleur dérive des couleurs personnalisées à partir du fond d'écran d'un utilisateur pour l'appliquer à ses applications et de l'UI du système. Cette palette de couleurs est utilisée comme point de départ pour générer des jeux de couleurs claires et sombres.

Les paramètres de police peuvent également être mis à jour dans les paramètres de l'appareil pour répondre aux exigences préférences et besoins d'accessibilité. Ces paramètres peuvent et doit être appliquée aux applications. Veillez donc à utiliser des valeurs de pixels évolutives pour les polices.

</ph>

</ph>

Thèmes du fabricant

Les fabricants d'appareils peuvent proposer d'autres fonctionnalités de thématisation propriétaires ce qui peut affecter l'UI du système et les paramètres d'affichage.

Thèmes d'application

Référence

Les composants Material de la bibliothèque Material fournissent un thème de référence utilise un jeu de couleurs violet et une police Roboto. Toute application qui ne définit pas de thème revient à ces attributs de référence.

Personnalisé (marque)

Les thèmes personnalisés vous offrent plus de possibilités d'expression pour l'apparence de votre application ou comme solution de secours lorsque certains thèmes système ne sont pas disponibles. Ceci est utile que vous travailliez avec un système de conception personnalisé complet, une petite guide de marque ou quelques-unes de vos couleurs préférées.

Votre application peut également comporter plusieurs schémas personnalisés, que l'utilisateur puisse de contenus, d'éléments de marque ou de sous-marques.

</ph>

</ph>

Contenu

Pour mettre davantage l'accent sur certains contenus, l'UI peut utiliser une couleur dynamique pour hériter de la couleur de ce contenu. La couleur du contenu fonctionne bien avec une source de contenu principale, mais utilisez-le avec précaution dans les vues associées à plusieurs sources.

</ph>

Un thème a généralement un impact sur l'ensemble de l'application, mais peut également être appliqué de manière sélective et à côté d'autres thèmes. Évitez trop de thèmes et de combinaisons en gardant avec une hiérarchie: la source principale du thème (dynamique ou personnalisé) s'applique à la majeure partie de l'interface utilisateur.

</ph>

Material

Material Design fournit un thème de référence et des systèmes de thématisation (couleur, type, forme). La thématisation Material peut également être étendue pour offrir au thème.

Marque

Si les systèmes de thèmes Material Design ne correspondent pas à l'apparence que vous souhaitez dans votre application, vous pouvez implémenter un thème entièrement personnalisé. Veillez à tester les de contraste et de lisibilité.

Découvrez comment implémenter un système personnalisé dans Compose.

Attributs de thème

Les attributs de thème sont alignés sur les styles visuels courants utilisés dans la conception d'interface utilisateur pour évoquer une gamme d'esthétiques. Dans l'application, ces propriétés sont souvent liées à Material des systèmes de thématisation pour permettre la personnalisation du créateur d'applis.

Couleur

Utilisez la couleur pour exprimer le style et communiquer du sens. Définir les couleurs de votre application peut être crucial pour la personnalisation, définir l'objectif sémantique et, bien sûr, définir l'identité de la marque.

Dans un thème, un jeu de couleurs est le groupe de tons assignés à des rôles spécifiques mappés à des composants. En savoir plus sur les couleurs dans Android UI et le système de couleurs Material 3.

</ph>

Type

La police système d'Android est Roboto (disponible sans frais pour toutes les applications), mais vous vous pouvez personnaliser le type. Tenir compte de la lisibilité des polices choisies à aligner leurs rôles. En savoir plus sur l'application d'un type

</ph>

Forme

Personnaliser la forme des angles des conteneurs au-delà des valeurs de référence par défaut permet définir le caractère de votre application. Par exemple, vous pouvez utiliser des coins arrondis complets pour apporter une touche de douceur et de fun avec une coupe angulaire pour un effet plus sérieux. Consultez les jetons de forme et les styles des composants Material.

</ph>

Icônes

Les icônes Material peuvent être utilisées dans votre application dans cinq styles: plein, Contours, nets, arrondis, bicolores. Utilisez le même style d'icône dans l'ensemble de votre pour conserver une apparence cohérente et soignée.

</ph>

Autres attributs du thème

Si la couleur, le type et la forme constituent les principaux systèmes de thématisation Material, systèmes de conception ne sont pas limités aux concepts sur lesquels s'appuie Material. Vous pouvez modifier les systèmes existants et en introduire de nouveaux, avec de nouvelles classes et types - pour rendre d'autres concepts compatibles avec les thèmes. Vous devrez peut-être aussi étendent ou remplacent les systèmes existants afin d'utiliser des attributs personnalisés est fournie. Par exemple, vous pouvez ajouter un système de dégradés ou d'espacement .

Appliquer un thème à votre application

Thème/style plus classes

Les thèmes et les styles peuvent avoir plusieurs attributs de conception. Un style peut être indépendant d'un thème et se réfère à l'apparence d'un élément individuel (ou une vue), tandis que vous pouvez appliquer un thème à plusieurs éléments, voire à l'intégralité l'application. Un style est un choix stylistique réutilisable, analogue à un style ou à un jeton dans votre logiciel de conception. Par exemple, Corps de grande taille est un style, tandis que sont des thèmes.

Implémenter un thème dans Compose

Un thème se compose généralement de plusieurs systèmes qui regroupent des éléments visuels et des concepts comportementaux, que vous modélisez à l'aide de classes avec des valeurs de thématisation.

Pour en savoir plus sur l'utilisation de Jetpack, consultez Material Design 3 dans Compose. Compose pour créer une implémentation du thème Material Design 3.

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)

Implémenter un thème dans Views

Les thèmes sont un ensemble de ressources nommées sémantiquement qui peuvent être utilisées dans l'ensemble de votre application. Les thèmes partagent la même syntaxe de style.

Premiers pas avec les vues

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

WebViews

Le contenu Web dans WebView peut également utiliser le style clair, sombre ou par défaut. En savoir plus le thème sombre dans WebViews est compatible.

Personnaliser un thème Material

Vous pouvez utiliser le plug-in Figma Material Theme Builder pour personnaliser un thème Material. Créer un thème avec ce thème vous offre de thèmes avec des jeux de couleurs clair et sombre déjà générés, ce qui vous permet pour aller encore plus loin dans la personnalisation en mettant à jour le fichier de thème exporté avec votre des valeurs exactes.

</ph>