AppBar 图标的正确主题属性

Question

I have vector icons in my AppBar . How do I ensure they get the correct color depending on the theme?

My application uses Theme.MaterialComponents.DayNight.NoActionBar with custom colorPrimary and colorSecondary .

Should the icons look like so:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?attr/colorOnSurface">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

or should they use colorControlNormal ?

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?attr/colorControlNormal">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

or colorOnPrimarySurface ? (This one makes it always white)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?attr/colorOnPrimarySurface">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

or should the color be in the path ?

<vector xmlns:android="http://schemas.android.com/apk/res/android" >
    <path android:fillColor="?attr/colorControlNormal (colorOnSurface)" android:pathData="..." />
</vector>

or should the color not be set here, but straight in the layout?

<vector xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

<com.google.android.material.appbar.AppBarLayout
        android:foregroundTint="?attr/colorControlNormal" (colorOnSurface)
        android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar"
        app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light">

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

</com.google.android.material.appbar.AppBarLayout>

Answer 1

Ok, I think I found the answer

It should be colorControlNormal

In menu/navigation icons:

 <vector... android:tint="?attr/colorControlNormal">... </vector>

Source: https://material.io/develop/android/components/top-app-bars/#regular-top-app-bar