在手机上更改深色模式下html电子邮件的背景色
在手机上更改深色模式下HTML电子邮件的背景色，可以通过CSS媒体查询和CSS变量来实现。
首先，使用CSS媒体查询来检测是否启用了深色模式。可以使用@media (prefers-color-scheme: dark)来检测是否启用了深色模式。如果是深色模式，则可以应用相应的样式。
接下来，使用CSS变量来定义不同模式下的背景色。可以使用:root伪类来定义全局的CSS变量。例如，可以定义一个名为--background-color的变量，并为浅色模式和深色模式分别设置不同的值。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--background-color-light: #ffffff; /* 浅色模式下的背景色 */
--background-color-dark: #000000; /* 深色模式下的背景色 */
}
@media (prefers-color-scheme: dark) {
body {
background-color: var(--background-color-dark);
}
}
@media (prefers-color-scheme: light) {
body {
background-color: var(--background-color-light);
}
}
</style>
</head>
<body>
<!-- 邮件内容 -->
</body>
</html>在上述示例代码中，使用了:root伪类定义了两个CSS变量--background-color-light和--background-color-dark，分别表示浅色模式和深色模式下的背景色。然后使用CSS媒体查询来根据深色模式和浅色模式分别应用不同的背景色。
这样，在手机上启用深色模式时，邮件的背景色会自动切换为深色模式下定义的背景色。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
我试图让HTML电子邮件有正常的白色背景，即使移动暗模式是打开的，我已经添加了以下元和媒体查询 meta name="color-scheme" content="light dark"important; h1,h2,h3,h4,p{ }
} 但当我打开我的手机中的黑暗模式时，背景被覆盖为黑色
浏览 51提问于2021-07-02得票数 0
关于苹果的macOS电子邮件程序，我有一个问题。电子邮件的样式大多是黑白的，而且两种颜色都会切换。我
浏览 1提问于2019-04-11得票数 2
3回答
我刚刚为更新2安装了WebEssrites2013，自从我安装它之后，cshtml文件中的C#就被高亮显示为白色。我有个黑暗的主题。因此，由于文本也是白色的，所以它是不可读的。我使用的主题是：如何关闭高亮显示？
浏览 2提问于2014-05-27得票数 3
回答已采纳
3回答
暗模式下的电子邮件渲染
、、、、
我在黑暗模式下呈现自定义编码的HTML电子邮件模板时遇到问题。电子邮件和所有的颜色都工作得很好，除了这个顶部的标题。我不明白为什么在深色模式下查看电子邮件时，绿色会变暗。请看附件中的图片，看看它在黑暗模式下的样子： ? 相反，它应该呈现绿色，如下所示： ? 谁能帮我解决这个绿色标题的问题。 谢谢
浏览 36提问于2020-09-22得票数 0
我正在创建一个html电子邮件模板。我是专门为电子邮件开发HTML的新手，我知道它可能很挑剔。
我希望电子邮件的背景与电子邮件客户端(Apple Mail、Gmail、Outlook等)的背景相匹配。这似乎是默认的纯文本电子邮件。但是在创建HTML电子邮件时，我发现只要在<body>标记中添加文本以外的任何内容，电子邮件</e
浏览 5提问于2022-10-14得票数 1
回答已采纳
2回答
我试图为在终端模式下运行的Emacs设置溶胶化配色方案。我使用的是的solarized-dark主题。然而，虽然这适用于桌面窗口，但在终端模式emacs -nw中运行时，颜色会被修改。
标准背景色#002b36被定义为。我试图改变它，但在Emacs中似乎有一个插值层，它将它更改为蓝色，除非我将它更改为更不同的
浏览 0提问于2018-12-25得票数 1
回答已采纳
. /></AppBar> 在我的页面上，当我将MUI主题更改为Light时，它没有改变它的默认颜色 import { MuiThemeProvider, createMuiTheme如果我把这个添加到调色板上，我会得到黑色的背景...我想我可以改变整体调色板，当我从浅色改为深色..？ primary: {}
浏览 40提问于2019-05-21得票数 5
回答已采纳
第一篇文章，也是我唯一的业余程序员。简而言之，我通过添加法语和西班牙语的翻译来国际化我的应用程序，它在模拟器和iPhone6(12.4.6版)上测试没有问题，没有错误或应用程序崩溃。当我在我的另一部手机上从应用商店更新更新应用程序时，它丢失了所有的NSLocalized文本(所以看起来像是链接断开了)，带占位符的文本字段现在有一个黑色的背景。这使得应用程序无法使用。我匆忙地将版本回滚到一个预本地化版本，但是它似乎继承了同样的问题，但是它没有任何意义，因
浏览 18提问于2020-04-05得票数 1
1回答
android:fillColor="@android:color/white"</vector>我试着改变android:fillColor="@android:color/transparent"如何更改此填充物<em
浏览 0提问于2020-01-19得票数 1
在我的Rails应用程序的一个视图中，有一个签名块，用户可以点击编辑(它打开了一个模式，他们可以更改文本)。签名块的一部分是用户的电话号码。当在手机上使用该应用程序时，如果用户单击签名块的电话号码部分，则电话试图拨打该号码。签名块中的电子邮件部分也是如此(为了允许用户发送电子邮件，这个部分将用户带到他们的电子邮件应用程序中)。我该如何防止这两件事
浏览 4提问于2016-04-01得票数 0
回答已采纳
1回答
我见过一些关于SSRS报告在IPhones上不能正确显示的帖子。我已经尝试通过订阅发送SSRS报告作为html 4.0，但仍然没有运气。我看到有人不得不强制他们的报告在严格模式下运行，不确定这是什么，但这是来自自定义报告应用程序。
浏览 0提问于2015-07-07得票数 1
我创建了一个深色/浅色主题切换器，我发现的问题是，当我在输入字段中输入任何信息，而网站处于深色模式时，输入字段内的文本显示为黑色，如何才能将其更改为亮模式下的黑色文本颜色和深色模式下的白色文本颜色。这是我的亮/暗模式的CSS。如何为暗模式添加不同的文本颜色
浏览 12提问于2020-05-14得票数 0
我对用于主导航的NavigationView ()元素的背景色有问题。问题是，NavigationView的背景色总是窗口设置的背景色(我使用windows 10)，即背景色在“暗模式”下是暗的，或者在“光模式”中是白色/浅灰色的，与我在应用程序中使用的设置/主题无关。如果我在窗口中使用“光照”设置，并将应用程序中的<
浏览 12提问于2022-04-06得票数 0
回答已采纳
我有一个可以生成HTML电子邮件正文并将其发送给用户的python脚本。这封电子邮件有一个正在生成的数据表，该表最好在600px下查看。我有一些用户，他们主要是在手机上看电子邮件，因为他们的表格缩小了，格式中断了。有没有办法保持表格宽度固定为600，并且用户在移动设备上查看时必须向右滚动才能查看完整内容，而不会缩小/大小。
浏览 6提问于2018-08-29得票数 0
回答已采纳
介绍性信息
为mj-wrapper标记和mj-section标记设置背景色：
<mj-wrapper background-color="#27273F" background-url="https://driv
浏览 10提问于2022-07-25得票数 2
回答已采纳
我有一个LG g风格的智能手机，当我点击运行应用程序时，它处于MTP模式，当我在谷歌上搜索它时，它显示没有USB设备似乎所有的答案都是在哪里安装驱动程序和打开调试器选项。我按照Goolges网站上的说明安装了驱动程序，在那里一切都准备好了，LG g风格的驱动程序。我的手机打开了开发者选项。
我不知道该怎么办？
浏览 23提问于2017-12-22得票数 0
我正在开发一个基于网络的应用程序，可以让用户收集某些信息。
在最后一页中，将显示对收集到的数据的分析。这部分是通过数字和改变显示数字的字段的背景色来完成的。在查看了手机上的分析后，用户应该以一种形式输入他的电子邮件入口和他的名字。点击“发送”按钮，我的目标是通过电子邮件向用户发送pdf (或任何包含html和css代码(因为颜色
浏览 1提问于2017-01-17得票数 1
我试图从一个包含希伯来字符的文本文件中读取数据，但是它显示的是胡言乱语。在Android应用程序中，无论是在调试模式下还是在手机上，它都会使用ES、Note Editor、或HTML 自动打开它。在计算机上，我可以用、记事本、或Notepad++打开文本文件，它可以很好地显示字符。
有兼容的格式吗？
浏览 9提问于2016-05-04得票数 0
当以移动(xs和sm)大小查看时，我想隐藏链接的文本部分。我怎样才能做到这一点？引导4提供了什么吗？HTML <a href="#"><i class="fa fa-icon"></i> Text Link</a>在手机上，我应该只看到(icon)。在桌面或平板模式下，我将看到(icon) Text Link
浏览 1提问于2017-07-05得票数 3
回答已采纳
2回答
我真的不明白为什么下划线链接不显示在深色模式(只在手机上的一些浏览器上)。rgba(255, 255, 255, 1); color: inherit;<a href="#"> example </a>在黑暗模式下但在Brave，Bromite和Privacy浏览器上，下划线链接就会消失(否则，在轻模式下它们就可以正
浏览 13提问于2021-10-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
