问题

我正在处理HTML电子邮件模板。我在强制Dark模式的背景颜色和文本颜色属性方面遇到了问题。我的普通内联CSS是background-color：#f2f2f2和color：#191919。但在Dark模式下，我想要background-color：#ff5f00和color：#ffffff。

在Outlook中，我能够通过@media实现相同的效果，但是根据各种博客的建议在Gmail中使用混合模式，我无法实现相同的效果。有人可以帮助制作HTML模板或HTML代码吗？

以下是您提供的代码：（请注意，我已将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-color: 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: #f2f2f2;
                padding: 20px 10px;
            }

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

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

            .button_text {
                color: #eee;
            }
        }

        [data-ogsc] .body {
            background-color: #111;
            color: #eee;
        }

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

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

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

        [data-ogsc].button_text {
            color: #eee;
        }
    </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 - 系统（用户代理样式）</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

<details>
<summary>英文:</summary>

I am working on HTML email templates.I am stuck with forcing background color and text color attributes for Dark mode.My normal inline css is background-color:#f2f2f2 and color:#191919.But in dark mode I want background-color:#ff5f00 and color:#ffffff.

I am able to achieve the same in outlook using @media but as said in various blogs to use blend modes for gmail,I am not able to achieve the same.Can anyone help with a HTML template or HTML code?


CODE:

    &lt;html&gt;
    &lt;head&gt;
        &lt;meta name=&quot;color-scheme&quot; content=&quot;light dark&quot;&gt;
        &lt;meta name=&quot;supported-color-schemes&quot; content=&quot;light dark&quot;&gt;
        &lt;style&gt;
            :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-color: 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: #f2f2f2;
                    padding: 20px 10px;
                }

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

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

                .button_text {
                    color: #eee;
                }
            }

            [data-ogsc] .body {
                background-color: #111;
                color: #eee;
            }

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

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

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

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




</details>


# 答案1
**得分**: 1

我建议使用 `@media (prefers-color-scheme: dark)` 媒体查询并创建一些类。然后将这些类应用于应该应用深色模式样式的元素。

示例：

```css
@media (prefers-color-scheme: dark) {
  .darkmode-bg {
    background-color: #ff5f00 !important;
  }
  .darkmode-color {
    color: #ffffff !important;
  }
}

很难回答这个问题，没有代码进行测试，但这是我建议的方法。来源。

还建议在您的 <head> 标签中添加以下元标签，以确保对于已启用深色模式的用户，电子邮件中启用了深色模式。

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

希望这有所帮助！

英文:

I would suggest using the @media (prefers-color-scheme: dark) media query and creating a couple classes. Then apply those classes to the elements that should have the darkmode style applied.

Example:

@media (prefers-color-scheme: dark) {
  .darkmode-bg {
    background-color: #ff5f00 !important;
  }
  .darkmode-color {
    color: #ffffff !important;
  }
}

It's hard to answer this without code to test, but that would be what I'd suggest. Source.

It's also recommended to add these meta tags in your <head> tag to ensure that Dark Mode is enabled in your email for users that have Dark Mode turned on.

&lt;meta name=&quot;color-scheme&quot; content=&quot;light dark&quot;&gt;
&lt;meta name=&quot;supported-color-schemes&quot; content=&quot;light dark&quot;&gt;

I hope this helps!

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在 Gmail 的深色模式下强制设置背景颜色？

问题

如何在导航栏中等间距排列图像？

Uncaught TypeError: 无法设置 null 对象的属性 (设置 ‘innerHTML’)

无法在React中显示电影列表数据。

CSS的fit-content在存在换行时无法适应真实内容

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论