Android dark theme just darkens colors instead of applying night theme colors

Question

We're trying to make our app able to both look good (via Android Studios' themes) on both light UI and dark UI modes on Android 10.

The light theme works fine, and it applies the primary and primary accent colors fine. The issue comes with the dark theme. If dark mode is activated on the phone (Xiaomi Mi 9 updated to MIUI 12), then the colors just become a darker shade, even though we have set the same primary and accent colors on the dark theme file as well. Even constant colors that we have applied with "@colors/name_of_color" darken (and from my understanding this shouldn't happen at all).

Here are our theme files:

theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.DynaswayConcussion" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/main_green</item>
    <item name="colorPrimaryVariant">@color/main_green</item>
    <item name="colorOnPrimary">@color/main_gray</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

<style name="Theme.DynaswayConcussion.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="Theme.DynaswayConcussion.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="Theme.DynaswayConcussion.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

theme.xml (night)

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.DynaswayConcussion" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/main_green</item>
    <item name="colorPrimaryVariant">@color/main_green</item>
    <item name="colorOnPrimary">@color/main_gray</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_200</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

<style name="Theme.DynaswayConcussion.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="Theme.DynaswayConcussion.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

<style name="Theme.DynaswayConcussion.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark" />
</resources>

colors.xml

    <?xml version="1.0" encoding="utf-8"?>
<resources>

<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="accent_green">#377854</color>
<color name="main_green">#66d999</color>

<color name="main_gray">#4d4543</color>
<color name="main_pink">#d971cd</color>
<color name="accent_pink">#fadadd</color>

<color name="chart_baseline">#ebd810</color>
<color name="chart_test">#d13e11</color>

</resources>

We're using AppCompatActivity and Fragment to develop the screens for the application, and we're not directly applying colors on any buttons (those become a really dark shade of green). We're only applying background colors directly to some backgrounds on cards (accent_pink color) and even those darken.

Is this an issue with MIUI? Or is this an issue with our configuration?

score 2 · Answer 1 · answered Mar 01 '22 at 13:34

2

You have to set android:forceDarkModeAllowed to false in your base theme for API 29+

Solution found here: Theme Problem when Dark Mode is activated under MIUI 11 / 12

answered Mar 01 '22 at 13:34

Daniel Knauf

559
3
11

I think I tested this at some point, but I'll try it again and see if it solves it. At the very least, thank you for the answer. – Enrique Torres Mar 02 '22 at 14:56
@EnriqueTorres do you find solution? – Sky May 27 '22 at 11:36
@Sky no, sorry. I stopped needing it in the end, but none of the solutions worked – Enrique Torres May 27 '22 at 15:14

score 1 · Answer 2 · answered Mar 13 '21 at 00:17

I've got the same problem actually and a guy answered to me telling me to remove "Theme.MaterialComponents.DayNight.DarkActionBar" and putting "Theme.MaterialComponents.Light" but honestly it didn't worked with me.. if you want to see the topic here it is : Dark theme problem with my App in Android Studio. I saw other tutorials where they advice to copy a new values resource and rename it with dark mode and changing parameters about "Theme.MaterialComponents.DayNight" setting the same parameters of the Light that you use.

Thank you for your response, at the very least it's very informative as I know I'm not the only one with the problem. I still haven't been able to fix it — Enrique Torres, Mar 14 '21 at 01:12

Android dark theme just darkens colors instead of applying night theme colors

2 Answers2