如何屏蔽在Android深色模式下浏览器自动对代码的修改？

Question

在使用svg画图的时候发现如果字体使用的深色，
在移动端手机调整到深色模式时
Android自带的流量器会修改svg字体的颜色

正常情况下是这样的

在夜间模式下发现变成这个样子了

我的字体颜色是 #333333

svg 原图地址是 https://zz-plan.com/api/svg/6b12fb156a12fb5c70/

Answer 1

lzc828 下午好🌅🌅🌅
本答案参考通义千问

**问题关键点：**如何在Android深色模式下保持浏览器内SVG字体颜色不变

**答案：**要在Android深色模式下保持浏览器内SVG字体颜色不变，你需要确保你的SVG文件正确设置了颜色属性，并且不受系统默认主题更改的影响。以下是一些解决方案：

1. 使用CSS样式: 在SVG中，你可以为文本元素添加CSS样式来指定颜色，而不是直接使用颜色名称。这样可以避免浏览器根据系统主题更改颜色。例如：

   <svg>
     <text fill="#333333">你的文本内容</text>
   </svg>
   

   在CSS中，你可以这样做：

   svg text {
     fill: #333333 !important; /* !important 用于确保优先级 */
   }
   

2. 使用viewBox和color-profile: 如果你希望SVG在不同颜色背景下都能保持一致，可以设置viewBox属性，并使用color-profile来定义颜色空间。这有助于浏览器解析颜色值。

   <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" color-profile="http://www.w3.org/2005/10/sketch/patterns#svgart">
     <text fill="#333333">你的文本内容</text>
   </svg>
   

3. **避免浏览器自动渲染：**某些浏览器可能会在深色模式下自动改变颜色，你可以尝试使用will-change CSS属性阻止这种行为：

   svg text {
     will-change: none; /* 阻止渲染变化 */
   }
   

4. **使用Web字体（Web Font）：**如果你的SVG字体是自定义字体，考虑使用Web字体，这样可以在不同的浏览器和系统主题下保持一致。

5. **测试兼容性：**确保在各种设备和浏览器上进行测试，包括模拟不同的系统主题设置。

解决方案总结：

• 使用CSS样式指定颜色
• 设置viewBox和color-profile
• 阻止will-change渲染
• 考虑使用Web字体
• 全面兼容性测试