英文:
How can I ensure my email design stays consistent across light and dark mode settings?
问题
如何使我的电子邮件设计在用户设备上使用的主题设置不变。
例如:
我希望我的电子邮件无论用户是否使用浅色模式或深色模式,都能保持相同的外观。
一个例子是 Gmail 应用自动将我的白色颜色更改为接收我的电子邮件的用户的深色颜色。
我如何阻止这种情况发生?
我尝试过为深色模式设计,但我不太喜欢,所以我真的希望我的浅色主题电子邮件保持浅色主题。
英文:
How to make my email design stay the same regardless of the theme setting the user uses on his device.
Per se:
I want my email to look the same if my user has light mode on or dark mode on.
An example would be Gmail App automatically changing my white colors to dark colors for the user that received my email.
How do I stop that from happening?
I tried making a design for dark mode but I don't like it as much, so I would really like for my light theme email to stay light themed.
答案1
得分: 1
开玩笑的话,简短的答案是你实际上不能这样做。而且你也不应该想要这样做。
长话短说... 邮件客户端(Apple Mail、Gmail、Outlook等)都有它们自己的特定方法来将强制的深色模式应用于HTML邮件。一些支持@media (prefers-color-scheme: dark)
媒体查询,让你在深色模式下拥有自己的样式(例如Apple Mail)。一些有它们自己的小技巧来应用你的样式(例如Outlook.com或移动版Outlook应用使用[data-ogsb]
选择器属性)。但是有些根本没有这些功能(主要是Gmail和Windows上的Outlook)。
以下是关于电子邮件深色模式的一些好的讲座:
- 深色模式终极指南,由Litmus提供
- 电子邮件深色模式技巧,由Matthieu Solente提供
- 如何解决Outlook深色模式问题,由Nicole Merlin提供
- 使用CSS混合模式修复Gmail的深色模式问题,由我提供
- 使邮件适应Outlook.com的深色模式,由我提供
- 处理Outlook.com的深色模式,由我提供
在我看来,你不应该与深色模式作对抗,而是应该接受它。这些技巧存在的好处在于当自动深色模式导致不希望的问题时(比如白色文字显示在白色背景上),这些技巧可以派上用场。但是尽量让邮件客户端尽可能地按照它们的方式运行。
英文:
Joke aside, the short answer is that you can't really do that. And you shouldn’t want to do that either.
Long answer… Email clients (Apple Mail, Gmail, Outlook, …) all have their own specific way to apply a forced dark mode to HTML emails. Some have support for the @media (prefers-color-scheme:dark)
media query to let you have your own styles in dark mode (like Apple Mail). Some have their own little hacks to apply your styles (like Outlook.com or the Outlook apps on mobile with the [data-ogsb]
selector attributes). But some have none of that (mainly Gmail and Outlook on Windows).
Here are some good lectures around dark mode in emails:
- Ultimate Guide to Dark Mode, by Litmus
- Email Dark Mode Techniques, by Matthieu Solente
- How To Fix Outlook Dark Mode Problems, by Nicole Merlin
- Fixing Gmail’s dark mode issues with CSS Blend Modes, by me
- Making Emails React to Outlook.com’s Dark Mode, by me
- Dealing with Outlook.com’s Dark Mode, by me
In my opinion, you should never fight against dark mode but instead embrace it. The hacks that exist are good for when automatic dark modes create undesired issues (like a white text on a white background). But you should let email clients do their thing as much as possible.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论