如何在html电子邮件上为明暗模式设置文本颜色，如背景颜色答案

【问题标题】：how to set text color like background color for light and dark mode on html email如何在html电子邮件上为明暗模式设置文本颜色，如背景颜色
【发布时间】：2022-01-26 13:42:01
【问题描述】：

这里有人开发 html 电子邮件吗？我需要一些帮助。我正在尝试在页脚部分中制作一些与背景颜色相同颜色的文本，因此它就像“不可见”，并且仅在您用鼠标标记它时显示（而不是悬停）。例如： example 它适用于浅色模式，但不适用于深色模式，即使我设置了@media (prefers-color-scheme: dark) 并将那里的文本颜色更改为黑色。它不起作用 - 在暗模式下，文本看起来是白色的。备注：

我无法将 css 拆分为另一个文件，因为我的公司用来发送时事通讯的系统只能接收一个文件。这就是我的 html 和 css 在同一个文件中的原因。
当涉及到 html 电子邮件时，您必须考虑所有电子邮件客户端。例如，雅虎不阅读课程。所以我需要大部分样式是内联的。
html 邮件无法读取 js。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <title></title>
    <style type="text/css">
        body{
            Margin: 0;
            padding: 0;
            min-width: 100%;
            background-color: #F3F3F3;
        }
        table{
            border-spacing: 0;
        }
        td{
            padding: 0;
        }
        @media (prefers-color-scheme: dark ) {

            h6 {
                color: black!important;;
            }

        }

        @media (prefers-color-scheme: light ) {
            h6 {
                color: #F3F3F3 !important;
            }

        }
    </style>
    <!--[if mso]>
    <style>
        body{
            font-family: Helvetica, Arial, sans-serif!important;
            text-align: center!important;
            display: inline-block!important;
        }
        table{
            border-collapse: collapse!important;
        }
    </style>
    <![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;">
    <table style="background-color: #F3F3F3; margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; font-family: Helvetica, Arial, sans-serif; padding-bottom: 20px;" width="100%" align="center">
        <tr>
            <td>
                <h6 style="width:20%; color: #F3F3F3; direction: ltr; font-size: 12px; padding-top: 15px; display: inline-block; margin: 0;text-align: left; float: left">some text right here</h6>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

有什么帮助吗？

【问题讨论】：

你能分享一下是哪个电子邮件客户端给你带来的问题吗？ Apple Mail、Outlook 或 Gmail 中的深色模式非常不同（甚至在 Gmail iOS 和 Android 之间）。
Gmail 应用 android、Gmail 应用 iOS、outlook（各种）。基本上是那些有全彩色转换的人。

标签： html css html-email email-client

【解决方案1】：

到目前为止，Gmail 应用不支持暗模式媒体查询。 This site 列出了一些小的解决方法，但无法自定义 Gmail 的大部分暗模式处理。

【讨论】：

【解决方案2】：

试试这个：

  h6::selection {
    background: red;
    color: #fff;
  }

【讨论】：