You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Gmail深色模式下强制设置背景色与文本色？

avatar
AI 小北
2026-8-6
HTML邮件深色模式兼容解决方案（支持Outlook+Gmail）

问题说明

我正在开发HTML邮件模板，现在碰到了深色模式下强制设置背景色和文本色的问题。常规模式下我用内联CSS设置了background-color:#f2f2f2、color:#191919，深色模式下希望把背景色改成#ff5f00、文本色改成#ffffff。我已经通过@media实现了Outlook端的效果，但按博客建议用混合模式时，Gmail里达不到预期。求可用的HTML模板或代码。

修改后的兼容代码 

<html>
<head>
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <style>
        :root {
            color-scheme: light dark;
            supported-color-schemes: light dark;
        }

        body {
            font-family: Arial;
            background-color: #eee;
            color: #111;
        }

        .Greetings_section {
            background-color: #f2f2f2;
            padding: 40px 20px;
        }

        .darkmodecustom {
            background-color: #f2f2f2;
            color: #191919;
            padding: 5px;
        }

        .bg-orange {
            background-color: #FF5F00;
            border: 1px solid #ff5f00;
        }

        .button_text {
            color: #ffffff;
        }

        .darkimage {
            display: none;
        }

        a[href] {
            color: #ffffff;
        }

        /* 通用深色模式媒体查询 */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #111;
                color: #eee;
            }

            .Greetings_section {
                background-color: #ff5f00;
                padding: 20px 10px;
            }

            .darkmodecustom {
                background-color: #ff5f00;
                color: #ffffff;
                padding: 5px;
            }

            .bg-orange {
                background-color: #FF5F00;
                border: 1px solid #FF5F00;
            }

            .button_text {
                color: #ffffff;
            }
        }

        /* Outlook深色模式支持 */
        [data-ogsc] body {
            background-color: #111;
            color: #eee;
        }

        [data-ogsc] .Greetings_section {
            background-color: #ff5f00;
            padding: 40px 20px;
        }

        [data-ogsc] .darkmodecustom {
            background-color: #ff5f00;
            color: #ffffff;
            padding: 5px;
        }

        [data-ogsc] .bg-orange {
            background-color: #FF5F00;
            border: 1px solid #ff5f00;
        }

        [data-ogsc] .button_text {
            color: #ffffff;
        }

        /* Gmail深色模式支持 */
        [data-darkreader-mode="dynamic"] .Greetings_section,
        [data-darkreader-mode="dynamic"] .darkmodecustom {
            background-color: #ff5f00 !important;
            color: #ffffff !important;
        }
    </style>
</head>
<body class="body">
    <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center">
                <table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" style="background-color:azure;padding:10px">
                    <tr>
                        <td style="padding: 5px;">Dark mode - System (User Agent Styles)</td>
                    </tr>
                    <tr>
                        <td align="center" bgcolor="transparent" style="padding:0px; font-size:0px; line-height:0px;" valign="top" width="100%">
                            <!--[if (gte mso 9)|(IE)]>
                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                                        <tr>
                                            <td align="center" valign="top" width="600">
                                                <![endif]-->
                            <table align="center" border="0" cellpadding="0" cellspacing="0" style="padding:0; max-width:600px; font-size:0px; line-height:0px; background-color:#ffffff" width="100%">
                                <tr>
                                    <td align="left" class="mobile-padding Greetings_section" style="padding:0px 24px 20px 24px; font-size:0px; line-height:0px" valign="top">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="left" class="mobile-padding Greetings_section" style=" font-size:0px; line-height:0px;" valign="top">
                                                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                        <tr>
                                                            <td align="left" class="fs14lh16 darkmodecustom" style="padding:0px 0px 8px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919" valign="top">
                                                                <span class="fs14lh16" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facilis assumenda soluta id ut labore ipsa aliquam reprehenderit</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" style="padding:0px; font-size:0px; line-height:0px" valign="top">
                                                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                    <tr>
                                                                        <td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
                                                                            <span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">&bull;</span>
                                                                        </td>
                                                                        <td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
                                                                            <span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
                                                                            <span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">&bull;</span>
                                                                        </td>
                                                                        <td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
                                                                            <span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" style="padding:16px 0px 0px 0px; font-size:0px; line-height:0px" valign="top">
                                                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                    <tr>
                                                                        <td align="left" valign="middle">
                                                                            <table border="0" cellpadding="0" cellspacing="0" class="bg-orange" width="auto">
                                                                                <tr>
                                                                                    <!--[if (gte mso 9)|(IE)]>
                                                                                                        <td width="20">&nbsp;</td>
                                                                                                        <![endif]-->
                                                                                    <td align="center" class="h32px fs12lh14 bg-orange" width="144" height="44" style="color:#ffffff; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; mso-line-height-rule:exactly; line-height:16px; font-weight:600; padding:0" valign="middle">
                                                                                        <a class="fs12lh14 button_text" href="#" style="text-decoration:none; display:block; padding:8px 16px 8px 16px;" target="_blank">Lorem ipsum dolor </a>
                                                                                    </td>
                                                                                    <!--[if (gte mso 9)|(IE)]>
                                                                                                        <td width="20">&nbsp;</td>
                                                                                                        <![endif]-->
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                        </tr>
                                    </table>
                                    <![endif]-->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

关键修改说明

  • 修复选择器错误：原代码中[data-ogsc].button_text缺少空格，修正为[data-ogsc] .button_text，确保Outlook能正确识别样式
  • Gmail深色模式适配：添加[data-darkreader-mode="dynamic"]选择器，Gmail开启深色模式时会给根元素添加该属性，通过!important强制覆盖内联样式
  • 深色模式样式修正：在@media (prefers-color-scheme: dark)中，将.Greetings_section和.darkmodecustom的背景色改为#ff5f00，文本色改为#ffffff，匹配需求
  • 按钮文本修正：将按钮内联样式的color改为#ffffff，确保浅色模式下显示正确，深色模式下通过样式覆盖保持一致

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.06 00:45:48