CSS 深色/浅色主题

Question

我需要 Gmail 横幅的深色背景，我们以两种主题（浅色和深色）将其发送给用户。我在 html{--background-color:#010101!important} 中使用 css 和样式。但事实上，我可以看到我的风格发生了变化，在智能手机的深色主题中看到了白色背景，反之亦然，在真正的按摩中，浅色主题中出现了深色背景。它也适用于 svg 图像。

我还补充了

我应该注意什么？我应该注意什么？

Answer 1

1. 内联背景颜色：

   直接在包含横幅的父级 t apply. I 或

   background-color

   上应用内联

   <table>

   样式：<div>

2. 深色模式兼容性：

   Gmail 会覆盖深色模式的颜色。使用媒体查询定位

   <table role="presentation" width="100%" style="background-color: #010101;">
      <tr>
         <td>
            <img src="your-banner.jpg" alt="Banner" style="display: block; width: 100%; height: auto;">
         </td>
      </tr>
   </table>

   :

   prefers-color-scheme

3. 深色模式下的 SVG 图像：

   如果 SVG 被覆盖，请直接内联 SVG 代码并使用

   <style>
      @media (prefers-color-scheme: dark) {
         .dark-bg {
            background-color: #010101 !important;
         }
      }
      @media (prefers-color-scheme: light) {
         .dark-bg {
            background-color: #FFFFFF !important;
         }
      }
   </style>
   <table role="presentation" width="100%" class="dark-bg" style="background-color: #FFFFFF;">
      <tr>
         <td>Your Content</td>
      </tr>
   </table>

   颜色属性：

   fill

4. 测试压缩的 HTML：

   Gmail 可能会忽略或破坏过度压缩的代码。确保您的代码可读且不会删除关键元素，例如

   <svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" fill="#FFFFFF">
      <rect width="200" height="50" style="fill: #010101;"></rect>
      <text x="50%" y="50%" fill="#FFFFFF" dy=".3em" text-anchor="middle">Your Text</text>
   </svg>

   标签或属性。

5. 不支持的功能的后备：

   Gmail 可能不支持 style。使用明确的样式并避免仅仅依赖现代 CSS 功能。