Android Dark Mode下菜单文字为黑、深灰背景看不清如何解决

问题原因 #

android:actionMenuTextColor 属性仅作用于直接显示在ActionBar/Toolbar上的菜单项，对你设置了app:showAsAction="never"的溢出菜单内的文字无效，因此之前的配置不会生效。

解决方案 #

按以下步骤配置即可适配深浅模式下的菜单文字颜色：

1. 先定义适配深浅模式的颜色资源

在res/values/colors.xml（浅色模式）中添加：

<color name="menu_text_color">#FF1A1A1A</color>
<!-- 可选：菜单背景色 -->
<color name="menu_bg_color">#FFFFFFFF</color>

在res/values-night/colors.xml（深色模式）中添加：

<color name="menu_text_color">#FFF2F2F2</color>
<!-- 可选：菜单背景色 -->
<color name="menu_bg_color">#FF1F1F1F</color>

2. 修改主题配置（覆盖溢出菜单样式）

打开你的主题配置文件（通常是res/values/themes.xml和res/values-night/themes.xml），修改你的主App主题：

<style name="Theme.YourAppName" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- 保留你原有其他主题配置 -->
    <!-- 配置溢出菜单样式 -->
    <item name="actionOverflowMenuStyle">@style/AppOverflowMenu</item>
    <!-- 配置弹出层主题，控制菜单文字颜色 -->
    <item name="popupTheme">@style/AppPopupOverlay</item>
</style>

<!-- 自定义溢出菜单样式 -->
<style name="AppOverflowMenu" parent="Widget.MaterialComponents.PopupMenu.Overflow">
    <item name="android:popupBackground">@color/menu_bg_color</item>
    <!-- 调整菜单距离Toolbar的高度，避免重叠 -->
    <item name="android:overlapAnchor">false</item>
</style>

<!-- 自定义弹出层主题，修改菜单文字颜色 -->
<style name="AppPopupOverlay" parent="ThemeOverlay.MaterialComponents.ActionBar">
    <item name="android:textColor">@color/menu_text_color</item>
</style>

如果你使用的是AppCompat主题，只需要把上述style的parent替换为对应AppCompat前缀的父样式即可，比如Theme.AppCompat.DayNight.NoActionBar、Widget.AppCompat.PopupMenu.Overflow。

3. 检查Toolbar配置（可选，若单独配置过popupTheme需要同步）

如果你的布局文件中给Toolbar单独设置了app:popupTheme属性，需要和上面自定义的弹出层主题统一：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:popupTheme="@style/AppPopupOverlay" />

兜底方案：代码动态设置文字颜色

如果上述配置仍不生效，可以在加载菜单的代码中手动修改每个菜单项的文字颜色：

override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
    inflater.inflate(R.menu.your_menu_file_name, menu)
    // 遍历所有菜单项设置文字颜色
    val textColor = ContextCompat.getColor(this, R.color.menu_text_color)
    for (i in 0 until menu.size()) {
        val item = menu.getItem(i)
        val spannableTitle = SpannableString(item.title)
        spannableTitle.setSpan(
            ForegroundColorSpan(textColor),
            0,
            spannableTitle.length,
            Spannable.SPAN_INCLUSIVE_EXCLUSIVE
        )
        item.title = spannableTitle
    }
    super.onCreateOptionsMenu(menu, inflater)
}

内容的提问来源于stack exchange，提问作者IvanMolow