繁体   English   中英

Android 浅色/深色主题操作栏文字

[英]Android light/dark theme action bar text

我正在我的 Playground Android 应用程序中实现一个深色主题,并且正在努力使操作栏文本颜色变为白色。

下面是我的款式和颜色。 操作栏的背景跟随着colorPrimary,很棒。 但是,两种颜色(浅色和深色)都是非常深的颜色,并且希望操作栏文本颜色始终为白色。 由于我现在使用 DayNight.NoActionBar 作为父级,所以它是黑色的浅色和白色的深色。 我有几个不同的操作栏实例,所以我不想改变每个单独的实例,而只是在样式中定义它。 我该怎么做?

样式文件

<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>

夜\\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>

值\\颜色.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>

使用材质主题,您可以使用不同的选项来自定义Toolbar使用的文本颜色

  • 使用android:theme仅覆盖Toolbar默认值
<com.google.android.material.appbar.MaterialToolbar
    android:theme="@style/MyThemeOverlay_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>
  • Toolbar设置样式
<com.google.android.material.appbar.MaterialToolbar
    style="@style/MyToolbar"
    .../>

然后使用materialThemeOverlay覆盖默认值(它需要材质组件库版本 1.1.0):

  <!-- 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>

在此处输入图片说明 在此处输入图片说明

首先,将这三个添加到您的主要样式中(您可以随意命名样式):

<item name="toolbarStyle">@style/ToolbarStyle</item>
<item name="actionOverflowButtonStyle">@style/ToolbarStyle.Overflow</item>
<item name="toolbarNavigationButtonStyle">@style/Toolbar.Button.Navigation.Tinted</item>

然后定义这些样式:

<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>

在你的styles.xml 中使用此代码

<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>

我认为这个问题的答案可能会因您在应用程序中使用的其他组件而异。 在我的情况下,以下是一个有效的解决方案:

styles.xml定义这三种样式

  <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>

然后将它们设置在您的主题中:

<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>

在新版本的 Android Studio 中,我们有两个主题颜色文件。 要更改深色主题,您应该使用此文件:

Res > values > themes > themes.xml (night)

对于日版:

Res > values > themes > themes.xml

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM