如何确保邮件设计在明暗模式下保持固定浅色主题不变

要让邮件不管用户是否开启深色模式都固定显示浅色主题，尤其是避免Gmail自动将白色背景替换为深色，你可以尝试以下几个实用方法：

• 用meta标签锁定颜色方案
  在邮件的HTML头部添加color-scheme meta标签，明确告知邮件客户端仅使用浅色模式：

  <head>
    <meta name="color-scheme" content="only light">
  </head>
  

  该标签目前被Gmail、Apple Mail等主流客户端支持，能直接阻止客户端自动切换深色主题。

• 硬编码所有元素的背景与文字颜色
  部分客户端可能对meta标签支持有限，这时需要给<body>和所有内容容器明确设置背景色、文字色，避免使用继承或相对颜色值：

  <body style="background-color: #ffffff; color: #333333; margin: 0; padding: 0;">
    <div style="background-color: #ffffff; width: 100%; max-width: 600px; margin: 0 auto; padding: 20px;">
      <!-- 邮件内容区域 -->
      <p style="color: #333333;">示例文本内容</p>
      <a href="#" style="color: #0066cc; text-decoration: none;">示例链接</a>
    </div>
  </body>
  

  这种方式能确保每个区域的颜色都被固定，不会被客户端的深色模式规则覆盖。

• 针对Gmail的特殊优化
  Gmail偶尔会无视部分样式规则，此时可以给关键容器的背景色加上!important提升优先级：

  <div style="background-color: #ffffff !important; ...">
  

  另外，Gmail的深色模式会自动修改链接颜色，所以务必给所有<a>标签明确设置颜色，必要时也可加上!important确保生效。

• 多客户端验证测试
  最后记得在Gmail网页版、Gmail移动端、Outlook、Apple Mail等主流客户端中测试，确保样式在所有场景下都能稳定显示浅色主题。

内容的提问来源于stack exchange，提问作者th0tminik