J'implémente un thème sombre dans mon application Android de terrain de jeu et j'ai du mal à faire en sorte que la couleur du texte de la barre d'action soit blanche.
Voici mon style et mes couleurs. L'arrière-plan de la barre d'action suit colorPrimary, ce qui est génial. Cependant, les deux couleurs (claires et foncées) sont des couleurs assez sombres et souhaiteraient que la couleur du texte de la barre d'action soit toujours blanche. Puisque j'utilise le DayNight.NoActionBar comme parent en ce moment, il est noir pour la lumière et blanc pour l'obscurité. J'ai quelques instances différentes de la barre d'action, donc je préférerais ne pas avoir à changer chacune d'elles, mais plutôt simplement la définir dans le style. Comment dois-je procéder?
styles.xml
<resources> <color name="colorPrimary">#00348e</color> <color name="colorPrimaryDark">#002e72</color> <color name="colorAccent">#e66f00</color> <color name="colorYellow">#FFE800</color> <color name="colorError">#E53935</color> </resources>
nuit \ colors.xml
<resources> <color name="colorPrimary">#3d85c6</color> <color name="colorPrimaryDark">#002e72</color> <color name="colorAccent">#e66f00</color> <color name="colorYellow">#FFE800</color> <color name="colorError">#E53935</color> </resources>
valeurs \ couleurs.xml
<style name="DarkThemeApp" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="colorError">@color/colorError</item> <item name="android:textColor">?android:attr/textColorPrimary</item> </style>
5 Réponses :
Tout d'abord, ajoutez ces trois styles à votre style principal (vous pouvez nommer les styles comme vous le souhaitez):
<style name="ToolbarStyle" parent="@style/Widget.AppCompat.Toolbar"> <!-- Makes the toolbar text whatever color you want for both light/dark--> <item name="titleTextColor">@color/actionBarText</item> <item name="android:background">?attr/colorPrimary</item> </style> <style name="ToolbarStyle.Overflow" parent="Widget.AppCompat.ActionButton.Overflow"> <!-- For toolbar menu --> <item name="android:tint">@color/actionBarText</item> </style> <style name="Toolbar.Button.Navigation.Tinted" parent="Widget.AppCompat.Toolbar.Button.Navigation"> <!-- For the hamburger menu, back button, etc --> <item name="tint">@color/actionBarText</item> </style>
Définissez ensuite ces styles:
<item name="toolbarStyle">@style/ToolbarStyle</item> <item name="actionOverflowButtonStyle">@style/ToolbarStyle.Overflow</item> <item name="toolbarNavigationButtonStyle">@style/Toolbar.Button.Navigation.Tinted</item>
En utilisant un thème de matériau, vous disposez de différentes options pour personnaliser la couleur du texte utilisée dans la Toolbar
android:theme
pour remplacer les valeurs par défaut uniquement pour votre Toolbar
<!-- Toolbar --> <style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar"> <item name="materialThemeOverlay">@style/MyThemeOverlay_Toolbar</item> </style> <style name="MyThemeOverlay_Toolbar" parent=""> <item name="android:textColorPrimary">@color/secondaryColor</item> <item name="colorOnPrimary">@color/secondaryColor</item> </style>
et utilise:
<com.google.android.material.appbar.MaterialToolbar style="@style/MyToolbar" .../>
Toolbar
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary"> <!-- color used by the toolbar title --> <item name="android:textColorPrimary">@color/secondaryColor</item> <!-- color used by navigation icon and overflow icon --> <item name="colorOnPrimary">@color/secondaryColor</item> </style>
Et puis utilisez le materialThemeOverlay
pour remplacer les valeurs par défaut (il nécessite la bibliothèque de composants de matériaux version 1.1.0):
<com.google.android.material.appbar.MaterialToolbar android:theme="@style/MyThemeOverlay_Toolbar" ...>
A travaillé pour moi. Je peux simplement ajouter que colorOnPrimary devrait aller dans colors.xml ou themes.xml pour une fonction plus à l'échelle du système, car ce n'est pas un attribut lié uniquement à la barre d'outils.
dans votre styles.xml utilisez ce code
<style name="DarkThemeApp" parent="Theme.AppCompat.DayNight.DarkActionBar"> <item name="android:actionBarStyle">@style/MyActionBarStyle</item> </style> <style name="MyActionBarStyle" parent="Theme.AppCompat.DayNight.DarkActionBar"> <item name="android:titleTextStyle">@style/MyActionBarTitleTextStyle</item> </style> <style name="MyActionBarTitleTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textColor">@color/white</item> </style>
Je pense que la réponse à cette question peut varier en fonction des autres composants que vous utilisez dans votre application. Dans mon cas, ce qui suit était une solution de travail:
Définissez ces trois styles dans styles.xml
<style name="DarkThemeApp" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar"> <!-- color for stuff in action bar --> <item name="toolbarStyle">@style/ToolbarStyle</item> <item name="actionOverflowButtonStyle">@style/ToolbarStyle.Overflow</item> <item name="drawerArrowStyle">@style/ToolbarStyle.DrawerIcon</item> <!-- rest of your attributes go here ... --> </style>
puis définissez-les dans votre (vos) thème (s):
<style name="ToolbarStyle" parent="@style/Widget.MaterialComponents.Toolbar"> <item name="titleTextColor">@android:color/white</item> <item name="android:background">@color/primary</item> </style> <style name="ToolbarStyle.Overflow" parent="@style/Widget.AppCompat.ActionButton.Overflow"> <item name="android:tint">@android:color/white</item> </style> <style name="ToolbarStyle.DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="color">@android:color/white</item> </style>
Dans la nouvelle version d'Android Studio, nous avons deux fichiers pour les couleurs de thème. Pour changer le thème sombre, vous devez utiliser ce fichier:
Res > values > themes > themes.xml
Et pour la version jour:
Res > values > themes > themes.xml (night)
Je ne pense pas que ce soit nouveau, vous avez dû utiliser des fichiers séparés depuis l'introduction du mode sombre.