Android Dark 主题反转矢量可绘制对象的颜色

Posted 2023-02-22

【中文标题】Android Dark 主题反转矢量可绘制对象的颜色

【英文标题】：Android Dark theme inverts colours of vector drawables

【发布时间】：2021-03-30 14:10:24

【问题描述】：

我正在使用从 SVG 文件导入为矢量可绘制对象的用户个人资料头像。我还将我的主题扩展到材料主题Theme.MaterialComponents.DayNight.NoActionBar。但是，当我切换到深色模式时，矢量图形会反转颜色，看起来很糟糕。

这里有一个类似的问题：Why is android inverting some of my drawables for dark theme (night) but not others?，它没有回答我的问题，因为适用的答案是图标（而不是图形/插图）。

我在寻找什么？

某种手动覆盖可防止矢量绘图的颜色反转，因为颜色不是材质主题系统的一部分。此外，将所有头像中所有可能的色调都放入我的themes.xml 中对我来说是不切实际的。

示例矢量可绘制头像

<vector android: android:viewportHeight="128"
    android:viewportWidth="128" android: 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>

更新：作为临时修复，我已将所有头像可绘制对象复制到 drawable-night；但这对我来说似乎是一个低效的解决方案。

【问题讨论】：

你的个人资料头像矢量drawables是如何定义的？

@Edric 它只是从 SVG 文件导入到 Android Studio。我在问题中添加了一个示例头像。

【参考方案1】：

对我有用的自发解决方案：

在 html 中：

<img src="logo.svg">

对于 logo.svg 文件：

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

【参考方案2】：

只需将其添加到 XML 中

android:tint="?attr/colorControlNormal"

【讨论】：

这是不可能的，因为 SVG 是插图（有多种颜色）而不是图标。

【参考方案3】：

您可以在 values 和 values-night 文件夹中同名的 colors.xml 文件中定义矢量的颜色，然后将矢量的色调设置为该颜色。

【讨论】：

感谢您的回答。但是，这种方法的问题在于，我有 50 多个矢量可绘制对象（这些是插图化身），并且每个都具有多种硬编码颜色（如问题中的可绘制示例所示）