Android Dark theme inverts colours of vector drawables

Viewed 1769

I'm using user profile avatars imported as vector drawables from an SVG file. I also extend my theme to the material theme Theme.MaterialComponents.DayNight.NoActionBar. However, when I switch to dark mode, the vector graphic inverts the colours and it looks awful.

There's a similar question on SO here: Why is Android inverting some of my drawables for dark theme (night) but not others?, which doesn't answer my question, because the applicable answer is for icons (and not graphics / illustrations).

What am I looking for?

Some kind of a manual override which prevents inverting of colours for vector drawables, since the colours are not a part of the material theming system. Also, it is not practical for me to put in all the possible colour shades from all the avatars into my themes.xml.

Example vector drawable avatar

<vector android:height="24dp" android:viewportHeight="128"
    android:viewportWidth="128" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#a7aece" android:pathData="M64,64m-60,0a60,60 0,1 1,120 0a60,60 0,1 1,-120 0"/>
    <path android:fillAlpha="0.3" android:fillColor="#fff"
        android:pathData="M64,64m-48,0a48,48 0,1 1,96 0a48,48 0,1 1,-96 0" android:strokeAlpha="0.3"/>
    <path android:fillColor="#8f5653" android:pathData="M110.08,80.5l-0.88,-2.69c-2.89,-7.83 -17.3,-46.91 -17.78,-48l-0.5,-1.29H90.8a30,30 0,0 0,-53.6 0h-0.13l-0.52,1.36C35.51,32.44 19.07,77.1 19,77.42a47.49,47.49 0,0 0,-1.54 24.39,60 60,0 0,0 93.16,0 49.66,49.66 0,0 0,-0.5 -21.31Z"/>
    <path android:fillColor="#4bc190" android:pathData="M23.45,108.21a60,60 0,0 0,81.1 0,43.38 43.38,0 0,0 0.84,-29.09l-0.14,-0.46c-4.87,-13.2 -16.91,-45.81 -17.49,-47.22l-0.05,-0.1a26,26 0,0 0,-47.42 0l0,0.08c-0.57,1.38 -16.82,45.28 -17.5,47.26a43.4,43.4 0,0 0,0.7 29.52Z"/>
    <path android:fillAlpha="0.5" android:fillColor="#f8dc25"
        android:pathData="M99.57,80.59C93.23,63.4 83,35.81 82.23,33.78a20,20 0,0 0,-36.46 0C44.63,36.72 29.1,78.67 28.44,80.59a37.42,37.42 0,0 0,7 36.2,60.05 60.05,0 0,0 57.06,0A37.41,37.41 0,0 0,99.66 80.9Z" android:strokeAlpha="0.5"/>
    <path android:fillAlpha="0.3" android:fillColor="#fff"
        android:pathData="M99.57,80.59C93.23,63.4 83,35.81 82.23,33.78a20,20 0,0 0,-36.46 0C44.63,36.72 29.1,78.67 28.44,80.59a37.42,37.42 0,0 0,7 36.2,60.05 60.05,0 0,0 57.06,0A37.41,37.41 0,0 0,99.66 80.9Z" android:strokeAlpha="0.3"/>
    <path android:fillAlpha="0.5" android:fillColor="#fff"
        android:pathData="M64,122A29.49,29.49 0,0 1,36 83.13c0.67,-1.93 15.5,-42 17.11,-46.24a12,12 0,0 1,21.72 0c1.07,2.79 9.4,25.32 17.13,46.26l0,0.12A29.49,29.49 0,0 1,64 122Z" android:strokeAlpha="0.5"/>
    <path android:fillColor="#515570" android:pathData="M64,92.5m-20.5,0a20.5,20.5 0,1 1,41 0a20.5,20.5 0,1 1,-41 0"/>
    <path android:fillColor="#393c54" android:pathData="M64,92.5m-11,0a11,11 0,1 1,22 0a11,11 0,1 1,-22 0"/>
    <path android:fillColor="#fff" android:pathData="M79.66,56.5m-7.49,0a7.49,7.49 0,1 1,14.98 0a7.49,7.49 0,1 1,-14.98 0"/>
    <path android:fillAlpha="0.2" android:fillColor="#00000000"
        android:pathData="M48.34,68a11.46,11.46 0,0 1,-9.1 -4.48"
        android:strokeAlpha="0.2" android:strokeColor="#515570"
        android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
    <path android:fillAlpha="0.2" android:fillColor="#00000000"
        android:pathData="M79.84,68a11.52,11.52 0,0 0,9.85 -5.56"
        android:strokeAlpha="0.2" android:strokeColor="#515570"
        android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="2"/>
    <path android:fillColor="#fff" android:pathData="M48.34,56.5m-7.49,0a7.49,7.49 0,1 1,14.98 0a7.49,7.49 0,1 1,-14.98 0"/>
    <path android:fillColor="#f85565" android:pathData="M64,113A20.49,20.49 0,0 0,84.13 96.3,22.3 22.3,0 0,0 72,93.17c-0.54,0 -1.08,0 -1.63,0.11A2.07,2.07 0,0 0,68.63 95a1.2,1.2 0,0 1,-1.81 0.67A3.12,3.12 0,0 0,63.87 95a22.58,22.58 0,0 0,-12.49 13.66A20.36,20.36 0,0 0,64 113Z"/>
    <path android:fillColor="#393c54" android:pathData="M79.66,56.5m-4.09,0a4.09,4.09 0,1 1,8.18 0a4.09,4.09 0,1 1,-8.18 0"/>
    <path android:fillColor="#393c54" android:pathData="M48.34,56.5m-4.09,0a4.09,4.09 0,1 1,8.18 0a4.09,4.09 0,1 1,-8.18 0"/>
    <path android:fillAlpha="0.2" android:fillColor="#fff"
        android:pathData="M68.29,95.5a1.16,1.16 0,0 1,-1.47 0.13,4.87 4.87,0 0,0 -0.59,-0.36c0.43,3.56 1.66,9.24 5.21,13.08a1,1 0,0 0,0.73 0.32,1 1,0 0,0 0.68,-0.27 1,1 0,0 0,0.06 -1.41C69.91,103.75 68.74,98.81 68.29,95.5Z" android:strokeAlpha="0.2"/>
    <path android:fillColor="#4bc190" android:pathData="M61.68,59.51 L60,64.28A2,2 0,0 0,61.93 67h4.19a2,2 0,0 0,1.93 -2.72l-1.67,-4.77A2.49,2.49 0,0 0,61.68 59.51Z"/>
    <path android:fillColor="#8f5653" android:pathData="M61.68,59.51 L60,64.28A2,2 0,0 0,61.93 67h4.19a2,2 0,0 0,1.93 -2.72l-1.67,-4.77A2.49,2.49 0,0 0,61.68 59.51Z"/>
</vector>

Update: As an interim fix, I've duplicated all my avatar drawables into drawable-night; but that seems like an inefficient solution to me.

3 Answers

Just add this to the XML

android:tint="?attr/colorControlNormal"

You can define the color of your vector in colors.xml file in both values & values-night folder with same name and then just set the tint of your vector to that color.

The spontaneous solution that worked for me:

in html:

<img src="logo.svg">

and for logo.svg file:

<svg style="color-scheme: dark;">
    ...
</svg>
Related