Change background and text input hint color in dark mode

[viadro]

I try to implement dark mode for my adten drop in following this documentation: https://github.com/Adyen/adyen-android/blob/develop/docs/UI_CUSTOMIZATION.md#adding-dark-mode-support However I noticed that when I set colorSurface to a value that I want my background to be and then set set colorOnSurface to some other color then the background is not correct color but instead has this tint from colorOnSurface. Just like colorOnSurface would be put on top with some alpha. Here is my style. I used black as my colorSurface and red as colorOnSurfac to illustrate the issue:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AdyenCheckout" parent="Theme.MaterialComponents.DayNight">
        <!-- These color values are both defined in values/colors.xml and values-night/colors.xml to change the color based on selected mode -->
        <item name="colorPrimary">#1A73E8</item>
        <item name="colorOnPrimary">#FFFFFF</item>
        <item name="android:colorBackground">#000000</item>
        <item name="colorBackgroundFloating">#000000</item>
        <item name="colorOnBackground">#FFFFFF</item>
        <item name="colorSurface">#000000</item>
        <item name="colorOnSurface">#FF0000</item>

        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:textColorSecondary">#D3D3D3</item>
        <item name="android:textColorTertiary">#808080</item>
        <item name="bottomSheetDialogTheme">@style/AdyenCheckout.BottomSheetDialogTheme</item>
    </style>

    <style name="AdyenCheckout.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/adyen_text_input_color</item>
        <item name="hintTextColor">@color/adyen_text_input_color</item>
        <item name="android:minHeight">@dimen/input_layout_height</item>
    </style>
</resources>

adyen_text_input_color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true"
        android:color="#1A73E8"/>
    <item android:state_focused="true"
        android:color="#1A73E8"/>
    <item android:color="#FF0000"/>
</selector>

Here is the result: As you can is it is not exactly black but has this red tint.

I tried setting colorOnSurface to transparent but then hint in TextInputLayout is not being shown. Also what I've noticed that hint is not exactly displayed in colorOnSurface. In my style I ovveride AdyenCheckout.TextInputLayout so that outline of the input is in correct color. Here is the screen: It may not be very clearly visible on the screenshot but the hint is different color than the outline. It looks muted, like it would have some alpha added. Also as you can see I tried to ovveride hintTextColor in AdyenCheckout.TextInputLayout but it doesn't seem to work.

So what I would like to know is how can I set background color to exactly what I want and at the same time display hint also in the color I want.

[araratthehero]

Hi @viadro, thanks for the detailed explanation.

Could you please share which SDK version you're using? Also, does this issue occur only on the screens you shared, or on others as well?

[viadro]

I've been using version 5.3.1. Now I've updated it to 5.6.0 and the issue still occures. And it does occur on all screens in drop in

[araratthehero]

Hi @viadro,

According to the Material Design documentation, in dark mode, onColorSurface is applied as a semi-transparent overlay:

Higher elevation, lighter surface The higher a surface's elevation (raising it closer to an implied light source), the lighter that surface becomes. That lightness is expressed through the application of a semi-transparent overlay using the On Surface color.

You can set the colorOnSurface as transparent, which would hide the overlay, but I'd not recommend that approach, as it also styles other elements, which might cause some of them to not show. Following Material Design and your product guidelines should help you achieve the best result.

As for styling the text field hint color, use android:textColorHint instead of hintTextColor. If you don't, it defaults to onColorSurface with opacity applied.

Please try the suggestions above and let us know if you have any further questions.

[jreij]

@viadro do you still need any help with this?

[jreij]

Closing this for inactivity, please reopen if you need more help.