Question

我在我的应用程序中使用MaterialComponents.DayNight主题。在白天模式下，工具栏文本颜色为黑色。但是当我切换到夜间模式时，工具栏的文本颜色仍为黑色，因此不再可见。

<script src="https://unpkg.com/vue@2.6.3/dist/vue.min.js"></script>

<div id="app" v-cloak>
  <p>Hello Vue.js!</p>
</div>
<div id="loader"></div>

我想在夜间模式下将工具栏文本颜色更改为白色。我该怎么办？

Answer 1

将此条目添加到您的主题：

<item name="android:itemTextAppearance">@style/PopupMenuTextAppearance</item>

之后，将样式相应地添加到styles.xml：

<style name="PopupMenuTextAppearance" parent="TextAppearance.AppCompat.Menu">
    <item name="android:textColor">?attr/colorOnBackground</item>
</style>

?attr/colorOnBackground在Material Components library中可用。如果您不使用它，则应该可以使用?android:attr/textColorPrimary。

Answer 2

我认为您应该在noActionbar上设置样式并设计新的工具栏并对其进行自定义

Answer 3

将您的父主题设置为parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"

使用此方法，可以将ActionBar的原始主题和DarkActionBar属性保留在MaterialComponents的总体DayNight主题之上。

Answer 4

只需在您的布局中使用（它也与androidx.appcompat.widget.Toolbar一起使用）即可：

<com.google.android.material.appbar.MaterialToolbar
    style="@style/Widget.MaterialComponents.Toolbar.Primary"

然后在values-night/colors.xml中定义 colorOnPrimary 。

然后有很多选择。
您可以使用以下方法在应用程序主题中全局自定义工具栏的样式：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
  <item name="toolbarStyle">@style/MyToolbar</item>
</style>

具有：

  <style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="titleTextColor">@color/.....</item>
  </style>

，然后在values/colors.xml和values-night/colors.xml中定义颜色。

或者仅在工具栏中应用样式

<com.google.android.material.appbar.MaterialToolbar
    style="@style/MyToolbar"

或简单地使用以下主题覆盖

：

<com.google.android.material.appbar.MaterialToolbar
   android:theme="@style/MyThemeOverlay_Toolbar"

具有：

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="colorOnPrimary">@color/...</item>
  </style>

Answer 5

我在styles.xml文件中使用了这两行代码：

<item name="colorControlNormal">@android:color/white</item>
<item name="android:textColorPrimary">@android:color/white</item>

它将工具栏文本和工具栏X图标上的颜色更改为白色。

整个代码如下：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#00695c</item>
        <item name="colorPrimaryVariant">#439889</item>
        <item name="colorOnPrimary">#ffffff</item>
        <item name="colorSecondary">#007769</item>
        <item name="colorSecondaryVariant">#48a697</item>
        <item name="colorOnSecondary">#ffffff</item>
        <item name="colorControlNormal">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>
</resources>

如何从MaterialComponents.DayNight主题更改工具栏文本颜色？

5 个答案: