5
votes

Texte de la barre d'action du thème clair / sombre Android

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>


0 commentaires

5 Réponses :


3
votes

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>


0 commentaires

6
votes

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

  • Utilisez le 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"
    .../>
  • Définissez un style dans votre 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"
    ...>

entrez la description de l'image ici entrez la description de l'image ici


1 commentaires

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.



1
votes

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>


0 commentaires

0
votes

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>


0 commentaires

0
votes

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)


1 commentaires

Je ne pense pas que ce soit nouveau, vous avez dû utiliser des fichiers séparés depuis l'introduction du mode sombre.