Android Notification Icon Background Color Issue

[MSL-BIT]

Describe the bug The bug occurs on Android: the color specified via the "color" attribute is applied correctly only in light mode. In dark mode, the color is overridden, and a different color is displayed.

To Reproduce

1. Enable dark mode on your Android device.
2. Open the affected component or screen where the "color" attribute is used.
3. Observe the displayed color.
4. Switch to light mode and compare the color.

Expected behavior The color specified via the "color" attribute should remain consistent across light and dark modes. Or is adjustable also for dark mode.

Current Implementation

  late AndroidNotificationDetails androidNotificationDetails = AndroidNotificationDetails(
    icon: androidAppIconName,
    color: const Color(0x001d1d1d),
    androidNotificationChannelId,
    androidNotificationChannelName,
    importance: Importance.max,
    priority: Priority.high,
  );

Light Mode:

Dark Mode:

[Levi-Lesches]

I don't have a solid source for this, but apparently in dark mode, android will override your color if it determines it's not readable against a dark background. In your case, your color is near black, so it gets changed. You wouldn't want your "regular" color to be shown in dark mode

Advice around the Internet suggests using a white icon in your assets and coloring it with code, changing the color depending on the device's current mode

[MaikuB]

@MSL-BIT unless you can find a source that says otherwise, I don't believe there's a bug. This is based on how all the plugin does is call this method so what you see is what you get as the plugin has no other logic around this

[sai-chandra22]

Hi guys, so is there any other way to change the notifications background color, and change icon of our choice for both IOS and Android?

[Levi-Lesches]

As I mentioned, android takes over this process in dark mode, so you have no control there. Perhaps you can use a runtime check to see if the user is in dark mode and supply a different icon, but your best bet is usually you use a monochromatic icon. That way, whatever color it is shown in will look good.

I don't use iOS, but I haven't found anything about iOS supporting different icon options, so it looks like the answer is no there too.

Again, these are both limitations of the platforms themselves, not this plugin

[fulstadev]

You may have a look at this, it's the currently best workaround I've found.

[LcsGrz]

@MSL-BIT

I was all day today with this same problem, I have a good workaround for this.

it seems that android itself doesn't understand very well the color theme, and if you choose a color from a range of possible 'grayscale and maybe browns' it will make your icon change automatically depending on the theme and this cannot be overwritten.

but I managed to make the notification icon to show one color or another depending on the theme in a very simple way but it cost me to find it... the only detail is that if the notification is in the message center and you change the theme, you will find the 'bug' again.

try this:

First, define color resources for different themes in colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="notification_color">#YOUR_LIGHT_THEME_COLOR</color>
</resources>

<!-- res/values-night/colors.xml -->
<resources>
    <color name="notification_color">#YOUR_DARK_THEME_COLOR</color>
</resources>

Then, reference the appropriate color resource in AndroidManifest.xml:

<application>
    <meta-data
        android:name="com.google.firebase.messaging.default_notification_color"
        android:resource="@color/notification_color" />
</application>

let me know :)