如何通过应用主题修改ActionMode中Toolbar填充菜单项的图标颜色

现有配置 #

应用主主题 #

<resources>
    <!-- Learn more about theming: https://m2.material.io/design/material-theming/implementing-your-theme.html#color -->
    <!-- Base application theme -->
    <style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Custom toolbar style -->
        <item name="toolbarStyle">@style/CustomToolbar</item>
        <!-- Background color for application windows -->
        <item name="android:windowBackground">@color/grey_200</item>
        <!-- Default text color throughout the app -->
        <item name="android:textColor">@color/default_text</item>
        <!-- Color for text/icons over the background -->
        <item name="colorOnBackground">@color/default_text</item>

        <!-- Primary branding color for the app -->
        <item name="colorPrimary">@color/primary</item>
        <!-- Dark variant of the primary color for depth/elevation -->
        <item name="colorPrimaryDark">?colorPrimary</item>
        <!-- Primary color variant for differentiation -->
        <item name="colorPrimaryVariant">?colorPrimary</item>
        <!-- Text/icon color on primary surfaces -->
        <item name="colorOnPrimary">@android:color/white</item>

        <!-- Color used to indicate errors in components -->
        <item name="colorError">@color/red_500</item>
        <!-- Text/icon color on error surfaces -->
        <item name="colorOnError">@android:color/white</item>

        <!-- Accent color for highlighting interactive elements -->
        <item name="colorSecondary">@color/secondary</item>
        <!-- Variant of the secondary color for differentiation -->
        <item name="colorSecondaryVariant">?colorSecondary</item>
        <!-- Text/icon color on secondary surfaces -->
        <item name="colorOnSecondary">@android:color/white</item>

        <!-- Color for component surfaces like cards/menus -->
        <item name="colorSurface">@android:color/white</item>
        <!-- Text/icon color on surface elements -->
        <item name="colorOnSurface">@color/default_text</item>

        <!-- Enable activity transition animations -->
        <item name="android:windowActivityTransitions">true</item>
        <!-- Transition animation for entering activities -->
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <!-- Transition animation for exiting activities -->
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
        <!-- Overlay for the action mode bar -->
        <item name="windowActionModeOverlay">true</item>
    </style>

    <!-- Custom toolbar styling -->
    <style name="CustomToolbar" parent="Widget.MaterialComponents.Toolbar">
        <!-- Toolbar background color -->
        <item name="android:background">?colorPrimary</item>
        <!-- Theme overlay for toolbar icons -->
        <item name="materialThemeOverlay">@style/CustomToolbarThemeOverlay</item>
        <!-- Theme for toolbar pop-up elements -->
        <item name="popupTheme">@style/CustomPopupTheme</item>
    </style>

    <!-- Theme overlay for toolbar -->
    <style name="CustomToolbarThemeOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
        <!-- Icon tint color in the toolbar -->
        <item name="iconTint">@android:color/white</item>
    </style>

    <!-- Pop-up theme for toolbar -->
    <style name="CustomPopupTheme" parent="ThemeOverlay.MaterialComponents.Light">
        <!-- Icon tint color for pop-up items -->
        <item name="tint">?colorPrimary</item>
    </style>
</resources>

Toolbar布局实现 #

<com.google.android.material.appbar.MaterialToolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp" />

问题描述 #

当前主题无需为每个菜单项或Drawable单独设置app:iconTint="@android:color/white"，即可让Toolbar图标显示为白色。但启动默认Android ActionMode时，菜单项图标显示为黑色。希望通过主题统一修改图标颜色，而非修改Drawable或单独配置菜单项，此前尝试用Toolbar的配置方式处理ActionMode未成功。

解决方案 #

ActionMode拥有独立的样式体系，需要单独配置其样式及主题覆盖：

1. 在BaseTheme中添加actionModeStyle属性，关联自定义ActionMode样式：

<item name="actionModeStyle">@style/CustomActionMode</item>

2. 添加自定义ActionMode样式，指定背景并关联主题覆盖：

<style name="CustomActionMode" parent="Widget.MaterialComponents.ActionMode">
    <!-- 保持ActionMode背景与Toolbar一致 -->
    <item name="android:background">?colorPrimary</item>
    <!-- 通过主题覆盖统一配置图标、文本颜色 -->
    <item name="materialThemeOverlay">@style/CustomActionModeThemeOverlay</item>
</style>

3. 定义ActionMode的主题覆盖，设置图标和文本颜色：

<style name="CustomActionModeThemeOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionMode">
    <!-- 将ActionMode菜单项图标设为白色 -->
    <item name="iconTint">@android:color/white</item>
    <!-- 可选：将ActionMode文本设为白色 -->
    <item name="android:textColorPrimary">@android:color/white</item>
</style>

修改后的完整主题代码 #

<resources>
    <!-- Learn more about theming: https://m2.material.io/design/material-theming/implementing-your-theme.html#color -->
    <!-- Base application theme -->
    <style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Custom toolbar style -->
        <item name="toolbarStyle">@style/CustomToolbar</item>
        <!-- Custom action mode style -->
        <item name="actionModeStyle">@style/CustomActionMode</item>
        <!-- Background color for application windows -->
        <item name="android:windowBackground">@color/grey_200</item>
        <!-- Default text color throughout the app -->
        <item name="android:textColor">@color/default_text</item>
        <!-- Color for text/icons over the background -->
        <item name="colorOnBackground">@color/default_text</item>

        <!-- Primary branding color for the app -->
        <item name="colorPrimary">@color/primary</item>
        <!-- Dark variant of the primary color for depth/elevation -->
        <item name="colorPrimaryDark">?colorPrimary</item>
        <!-- Primary color variant for differentiation -->
        <item name="colorPrimaryVariant">?colorPrimary</item>
        <!-- Text/icon color on primary surfaces -->
        <item name="colorOnPrimary">@android:color/white</item>

        <!-- Color used to indicate errors in components -->
        <item name="colorError">@color/red_500</item>
        <!-- Text/icon color on error surfaces -->
        <item name="colorOnError">@android:color/white</item>

        <!-- Accent color for highlighting interactive elements -->
        <item name="colorSecondary">@color/secondary</item>
        <!-- Variant of the secondary color for differentiation -->
        <item name="colorSecondaryVariant">?colorSecondary</item>
        <!-- Text/icon color on secondary surfaces -->
        <item name="colorOnSecondary">@android:color/white</item>

        <!-- Color for component surfaces like cards/menus -->
        <item name="colorSurface">@android:color/white</item>
        <!-- Text/icon color on surface elements -->
        <item name="colorOnSurface">@color/default_text</item>

        <!-- Enable activity transition animations -->
        <item name="android:windowActivityTransitions">true</item>
        <!-- Transition animation for entering activities -->
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <!-- Transition animation for exiting activities -->
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
        <!-- Overlay for the action mode bar -->
        <item name="windowActionModeOverlay">true</item>
    </style>

    <!-- Custom toolbar styling -->
    <style name="CustomToolbar" parent="Widget.MaterialComponents.Toolbar">
        <!-- Toolbar background color -->
        <item name="android:background">?colorPrimary</item>
        <!-- Theme overlay for toolbar icons -->
        <item name="materialThemeOverlay">@style/CustomToolbarThemeOverlay</item>
        <!-- Theme for toolbar pop-up elements -->
        <item name="popupTheme">@style/CustomPopupTheme</item>
    </style>

    <!-- Theme overlay for toolbar -->
    <style name="CustomToolbarThemeOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
        <!-- Icon tint color in the toolbar -->
        <item name="iconTint">@android:color/white</item>
    </style>

    <!-- Pop-up theme for toolbar -->
    <style name="CustomPopupTheme" parent="ThemeOverlay.MaterialComponents.Light">
        <!-- Icon tint color for pop-up items -->
        <item name="tint">?colorPrimary</item>
    </style>

    <!-- Custom action mode styling -->
    <style name="CustomActionMode" parent="Widget.MaterialComponents.ActionMode">
        <!-- ActionMode background color -->
        <item name="android:background">?colorPrimary</item>
        <!-- Theme overlay for action mode icons/text -->
        <item name="materialThemeOverlay">@style/CustomActionModeThemeOverlay</item>
    </style>

    <!-- Theme overlay for action mode -->
    <style name="CustomActionModeThemeOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionMode">
        <!-- Icon tint color in action mode -->
        <item name="iconTint">@android:color/white</item>
        <!-- Text color in action mode -->
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>
</resources>

原理说明 #

ActionMode作为独立的UI组件，其样式不受Toolbar的主题配置影响。通过指定actionModeStyle并设置对应的materialThemeOverlay，可以统一覆盖ActionMode内部的图标 tint 属性，实现和Toolbar一致的图标颜色效果，无需逐个修改菜单项或Drawable资源。

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