Trouble removing pink hue from TextInputLayout after migrating to Material 3

Question

I'm migrating my app theme from MaterialComponents to Material3. While I managed to restore most of my app's original colors, I'm struggling with my TextInputLayouts, which now have a subtle (but noticeable) pink hue I can't seem to remove.

MaterialComponents (previous look):

Material3 (new look):

I’ve tried adjusting attributes such as my theme's colorSurfaceContainerHighest and my TextInputLayouts' boxBackgroundColor, but setting a grey color like #15000000 (which seem to be approximately the previous color) still results in a pinkish rendering, while colors like blue or green update the color like expected.

Here's my current theme file:

<resources>
    <!-- Base application theme. -->
    <style name="Theme.Kanji" parent="Theme.Material3.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/light_blue</item>
        <item name="colorPrimaryVariant">@color/navy_blue</item>
        <item name="colorOnPrimary">@color/black</item>

        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/brown</item>
        <item name="colorSecondaryVariant">@color/yellow</item>
        <item name="colorOnSecondary">@color/white</item>

        <item name="android:textColor">@color/black</item>
        <item name="android:colorBackground">@color/white</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

    <style name="TextInputLayout.FormField" parent="Widget.Material3.TextInputLayout.FilledBox">
        <item name="boxStrokeColor">?attr/colorPrimaryVariant</item>
        <item name="cursorColor">?attr/colorPrimaryVariant</item>
        <item name="hintTextColor">?attr/colorPrimaryVariant</item>
    </style>

</resources>

Switching the parent of TextInputLayout.FormField between Widget.Material3.TextInputLayout.FilledBox and Widget.MaterialComponents.TextInputLayout.FilledBox has no effect on the pink hue—it only changes when I modify the main theme.

Answer 1

Turns out the boxBackgroundColor attribute was the correct one to change, but using a partially transparent color prevented it from updating properly (which is something I still don't fully understand).

Instead, what was needed was setting a fully opaque grey color like this:

<item name="boxBackgroundColor">#FFDDDDDD</item>

And this correctly applies the grey color, eliminating the unwanted pink hue.