我正在设计一个HTML电子邮件模板，该模板支持所有电子邮件客户端的黑暗模式，但面临徽标的问题。
徽标是黑色.png图像，默认/光背景为白色，因此在黑暗模式下它变成黑色。在徽标上添加大纲不是一个选项，使用2个带有类的图像并控制一个使用媒体查询显示的图像对Gmail iOS和一些Outlook版本不起作用，因此请留下三种选择，但不确定它们是枯萎的。所有著名客户的适用和支持：
- 使用梯度用作背景色值，而不是
- 使用此方法来强迫白色背景，而不是我在线用于网页的方法：
<picture>
<source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
<img src="light-image.png">
</picture>
- 使用SVG代替图像，以便填充颜色会更改。
那么，其中任何一个适用和支持吗？
此外，还要感谢更多建议/想法/选择。
am designing a html email template that supports dark mode for all email clients but am facing a problem with the logo.
The logo is a black .png image and the default/light background is white, so in dark mode it becomes black over black. Adding an outline to the logo is not an option, using 2 images with classes and controlling which one to display using media queries won't work for Gmail ios and some outlook versions, so am left with three choices but am not sure wither they are applicable and supported by all famous clients:
- forcing the white background by using a gradient as the background-color value instead of a hex value
- using this method that I found online for webpages:
<picture>
<source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
<img src="light-image.png">
</picture>
- using an SVG instead of the image so the fill color will change.
So, are any of them is applicable and supported?
Also, more suggestions/ideas/options are appreciated.
发布评论
评论（1）
对SVG的支持非常有限，因此不幸的是，这不是一个选择： https：//www.caniemail。 com/features/image-svg/
@media prefers-color-scheme：gmail/loodlooks不支持黑暗，因此这是行不通的。
使用梯度强迫不变的背景不是理想的（我们应该支持客户的喜好），也不是100％交叉兼容。 （
背景图像：线性毕业生（＃ffffff，＃ffffff）;）如果1px White Stroke对您不利，则可以像Litmus一样尝试柔和的光芒。
或者，有时我们最终只是在图像本身中放置一个单色的背景（即摆脱透明度），也许是圆角（拐角处的一点点透明度） 。最适合图标，但可能是您唯一的选择。
Support for SVG is quite limited so unfortunately that's not an option: https://www.caniemail.com/features/image-svg/
@media prefers-color-scheme: dark is not supported on Gmail/some Outlooks, so that's not going to work. https://www.caniemail.com/features/css-at-media-prefers-color-scheme/
Using a gradient to force unchanging background is not ideal (we should be supporting customer's preferences), and also not 100% cross-compatible. (
background-image: linear-gradient(#ffffff,#ffffff);)If a 1px white stroke is no good for you, you could try a soft glow like Litmus do.
Alternatively, sometimes we just end up putting a single-colour background in the image itself (i.e. getting rid of the transparency), perhaps with rounded corners (a tiny bit of transparency on the corners). Works best for icons, but might be your only option.