logo标签列表

安卓暗黑主题反转矢量图标的颜色

androidmaterial-designandroidxmaterial-components-android
3

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

这里有一个类似的问题：为什么 Android 会为暗色主题（夜间）反转我的一些可绘制图形，而不是其他的？，但它没有回答我的问题，因为适用的答案是针对图标而非图形或插图。

我在寻找什么？

一种手动覆盖的方法，可以防止对矢量可绘制图形进行颜色反转，因为这些颜色不是材料主题系统的一部分。此外，将所有可能的颜色调整放入我的themes.xml中并不实际。

示例矢量可绘制头像

<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>

更新： 作为临时解决方案，我已将所有头像可绘制文件复制到drawable-night目录下；但这似乎不是一种高效的解决方案。

你的个人资料头像矢量可绘制图形是如何定义的？ - Edric
@Edric 这只是从SVG文件导入到Android Studio中。我在问题中添加了一个示例头像。 - Siddharth Kamaria
3个回答
2
只需将此添加到XML中。
android:tint="?attr/colorControlNormal"
这是不可能的，因为SVG是一种插图（带有多种颜色），而不是图标。 - Siddharth Kamaria
0
我使用的即兴解决方案是：
在HTML中：
<img src="logo.svg">

对于logo.svg文件：

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

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

我感谢你的回答。但是，这种方法的问题在于我有50多个矢量可绘制对象（这些是插图化身），每个对象都有多个硬编码颜色（如问题中所示的示例可绘制对象）。 - Siddharth Kamaria
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接