Dark Mode Support

[ersen-lw]

General information

• SDK/Library version: 4.3.1
• Environment: Sandbox
• Android Version and Device: Any Android 10 device, I used a Pixel 3 XL

Issue description

I've been trying to convert the Braintree Drop-In UI to use dark colours but I ran into some issues trying to do that.

Using the advice here led me to override styles and colours from the library https://github.com/braintree/braintree-android-drop-in/issues/99 like so

  <color name="bt_black_54" tools:override="true">@color/mk1</color>
    <color name="bt_black_12" tools:override="true">@color/contour</color>
    <color name="bt_white" tools:override="true">@color/surface</color>
    <color name="bt_black" tools:override="true">@color/mk1</color>
    <color name="bt_blue" tools:override="true">@color/primary</color>
    <color name="bt_light_gray" tools:override="true">@color/mk2</color>
    <color name="bt_expiration_date_sheet_background_light" tools:override="true">#eceff0</color>
    <color name="bt_expiration_date_sheet_background_dark" tools:override="true">#20272b</color>
    <color name="bt_white_12" tools:override="true">@color/surface_20</color>
    <color name="bt_black_38" tools:override="true">@color/mk1</color>
    <color name="bt_white_38" tools:override="true">@color/surface_50</color>
    <color name="bt_white_54" tools:override="true">@color/surface_50</color>
    <color name="bt_black_87" tools:override="true">@color/mk1</color>
    <color name="bt_white_87" tools:override="true">@color/surface_80</color>
    <color name="bt_base_background" tools:override="true">@color/background_color_surface</color>

    <style name="bt_drop_in_activity_theme" parent="Theme.AppCompat.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowAnimationStyle">@style/bt_fade_activity_animation</item>
        <item name="colorAccent">@color/primary</item>
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
    </style>

    <style name="bt_edit_button" parent="Theme.AppCompat.Light">
        <item name="android:buttonStyle">@style/Widget.AppCompat.Button.Borderless.Colored</item>
        <item name="colorControlHighlight">@color/button_hover_color_primary_dark</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/primary</item>
        <item name="android:textAllCaps">true</item>
    </style>

    <style name="bt_vaulted_payment_method_title">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginTop">8dp</item>
        <item name="android:layout_marginLeft">5dp</item>
        <item name="android:layout_marginRight">5dp</item>
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@color/label_color_black</item>
    </style>

Which is looking like this

The problem however is that certain views do not use a style that I can hook into for example looking at this layout https://github.com/braintree/braintree-android-drop-in/blob/master/Drop-In/src/main/res/layout/bt_vaulted_payment_method_card.xml

Changing the colour of the CardView is not straightforward because in the above image the MasterCard Logo has black text in the image so I am not able to follow the colour conventions I have set out in the app. In addition, the CardView uses "@android:color/white" which is a colour I feel I should not override as it can affect other places or libraries.

Could this particular view use a different colour declaration ?

[scannillo]

Hi @ersen-lw. Thanks for bringing this up.

We will need to provide updated image assets for the payment method type icons, just like the MasterCard one, you've mentioned. Offering more official/standardized support for dark mode is something we would like to do soon, though we don't have any estimate currently on when this will get completed.

We will update when we do!

[hipporasy]

Any update on this?