开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在手机上更改深色模式下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媒体查询来根据深色模式和浅色模式分别应用不同的背景色。

这样，在手机上启用深色模式时，邮件的背景色会自动切换为深色模式下定义的背景色。

腾讯云相关产品和产品介绍链接地址：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

DarkMode(1)：产品应用深色模式分析

2018 年的 macOS Mojave 率先支持了深色外观，紧接着 Windows 10 在 2018 年的 10 月份大版本更新中，也引入了 Dark Mode。

02

Flutter适配深色模式的方法（DarkMode）

也不知道写点什么，本来想写写Flutter的集成测试。因为前一阵子给flutter_deer写了一套，不过感觉也没啥内容，写不了几句话就放弃了。(其实本篇内容也不多。。。)

01

echarts在Markdown下深色模式自适应

本文效果均使用JS，没有任何TS 我首先找了一个官方示例做例子。圆角环形饼图：https://echarts.apache.org/examples/zh/editor.html?c=pie-bor

01

echarts在markdown下深色模式自适应

我首先找了一个官方示例做例子。圆角环形饼图：https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius&lang=js

03

目录内文件名导出到Excel文件

1、打印文件夹列表时可以包含其他列。 2、打印文件列表时，可以包含标准文件信息，如文件名，扩展名，类型，所有者和属性以及可执行文件信息（EXE，DLL，OCX），如文件版本，描述，公司等。 3、此外，还可列出音轨，标题，艺术家，专辑，流派，视频格式，每像素位数，每秒帧数，音频格式，每通道位数等多媒体属性（MP3，AVI，WAV，JPG，GIF，BMP）。 4、您可以打印的另一组列是 Microsoft Office 文件（DOC，XLS，PPT），因此您可以查看文档标题，作者，关键字等，而无需逐一打开这些文件。 5、对于每个文件和文件夹，还可以获取其CRC32，MD5，SHA-1和Whirlpool哈希码，以便您可以验证该文件未被修改。 6、打印文件夹中的文件进一步自定义。 7、大量的选项允许您完全自定义输出的外观。您可以设置文件和文件夹的排序方式，以便随时显示它们。您可以定义列顺序，以便最重要的列立即可见。国际显示格式选项允许您根据当地需要调整输出。列表可以包含指向实际文件和目录的链接，这样您就可以将列表放在具有可点击内容的网页上。 8、HTML显示样式完全自定义 – 您可以更改背景颜色，标题，目录行，奇数和偶数文件行以及周围框架的单独样式。 9、您可以通过对文件名，日期，大小或属性应用过滤器来限制文件列表。 10、目录Lister Pro也可以集成到Windows资源管理器的上下文菜单中，因此您甚至不需要打开应用程序即可生成列表。 11、命令行界面支持可以从 Windows任务计划程序运行的自动化列表。 12、检查文件夹大小或查找大文件夹 13、使用 Directory Lister Pro，您还可以找出给定的目录大小，按文件夹大小进行分类，并检查哪些文件夹占用了磁盘上的最多空间。您还可以使用尺寸过滤器选项在PC上找到最大的文件。

03

[首发] 苹果iOS 13 新设计规范全面解析

静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。在这里静电结合WWDC 2019的官方视频与苹果官方资料，花了一整天的时间翻译整理，为大家带来最全面细致的iOS 13交互设计指南及规范解析。赶紧转发收藏吧！

04

证件照如何替换背景颜色

日常生活中我们经常使用到证件照，有时候，对证件照的背景色也有一定的要求，为了不去照相馆拍换背景色的证件照，我们可以拿我们原有的证件照来更换背景色，今天就来分享一下方法。

03

APP设计实例解析，深色模式为什么突然就火了？

苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统，不少APP纷纷推出了深色模式。

05

接口测试平台代码实现142: 平台主题-夏日清凉

最近迷恋上了幻彩-渐变-淡蓝浅粉珍珠白-青春无敌霹雳少女系列的相关主题。所以抽一节文章，给大家改一改主题颜色，也让大家了解这个要怎么改。

03

HTML5+CSS3+JavaScript从入门到精通-17

HTML5+CSS3+JavaScript从入门到精通 17-01 用户登录界面！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录界面！</title> <script type="text/javascript"> function alert_info() { //win

02

H5 项目如何适配暗黑模式

如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。

05

可视化系统搭建--遇见大数据可视化系列文章之四

如何搭建数据可视化系统，用丰富的设计语言清晰表达复杂和庞大数据，并形成鲜明的设计风格？我们把数据可视化的元素进行拆分并建立相应的规范体系。图表设计 1. 图表基本类型六种基本图表涵盖了大部分图表使用场景，也是做数据可视化最常用的图表类型：柱状图分类照片照片什么照片什么什么项目之间的比较; 饼图构成即部分占总体的比例; 折线图随时间变化的趋势; 条形图分类照片照片什么照片什么什么项目之间的比较; 散点图相关性或分布关系; 地图区域之间的分类照片照片什么照片什么什么比较

02

分享一个算法，计算能在任何背景色上清晰显示的前景色

发布于 2017-11-04 14:51 更新于 2018-02-19 22:37

01

微信黑暗模式终于来啦！UI设计细节完全分析及体验

静电说：它来啦！前一段时间传的沸沸扬扬的苹果与微信黑暗模式的纠葛，终于以微信适配iOS端告终。3月22日静电一觉醒来，微信已经正式开启了“暗黑”模式。不过，很多人也许发现不了，因为手机白天还是浅色模式，只有到晚上才会改为黑暗模式。

02

新企业网站，常用的5个移动端营销技巧

从目前来看，移动终端已经成为我们日常信息浏览的主要媒介，任何一个用户，都无法脱离移动端的使用，甚至大量的成交订单都是基于移动端网站。

03

07.HTML实例

07.HTML实例 HTML 实例 HTML 基础非常简单的HTML文档 HTML 标题 HTML 段落 HTML 链接 HTML 图片 HTML 标题 HTML 标题在html源码中插入注释

04

APP设计实例解析，深色模式为什么突然就火了？

苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统，不少APP纷纷推出了深色模式。

03

一键切换亮色模式和暗色模式，用Figma搞定！

静电说：在本文中，我们将使用Figma来创建一个可以一键切换亮色模式和暗色模式设计的系统，非常简单快捷。同时，我们也可以在本文中学习到亮色模式和暗色模式在设计过程中的区别。本文来自Pixsellz。

01

换上了自己写的模板

模板名字为：Yodu 有毒，优读，有读，有毒是因为这是一个代码全是我自己弄的模板，可能会有很大的问题；优读是想让自己能够更好的阅读别人的一些优秀文章；有读是希望更多的人能够阅读更多的书籍作品来积累内含。

01

制作条形码的手机App推荐

条形码自发明以来，给我们的生活带来极大便利，怎么才能快速的用手机创建条形码呢？下面就给大家介绍一款小编常用的制作条形码的App--二维码和条形码生成器。使用它，不仅可以制作条形码、制作二维码，还能快速扫描二维码和条形码，并且支持查看制作和扫描的历史，功能强大，关键还是免费的！

02

从夜间模式说起，如何定制不同风格的App主题？

前一篇文章，我介绍了组合和自绘这两种自定义Widget的方式。对于组装，我们按照从上到下、从左到右的布局顺序去分解目标视图，将基本的Widget封装到Column、Row中，从而合成更高级别的Widget；而对于自绘，我们则通过承载绘制逻辑的载体CustomPainter，在其paint方法中使用画笔Paint与画布Canvas，绘制不同风格、不同类型的图形，从而实现基于自绘的自定义组件。

03

你每天要花多少时间在手机上？

原文来自 Text Request 编译 CDA 编译团队本文为 CDA 数据分析师原创作品，转载需授权前言众所周知，我们几乎一刻都离不开手机，美帝人民同样如此。让我们用数据说话，看看美国人们每天会花多少时间在手机上。在哪里可以获得这些信息？我们有参考以下行业机构的研究成果，如： • comScore • Nielsen • SmartInsights • eMarketer • MediaKix • Pew Research Center 等等本文的目的不是为了证明某个观点，而是想探究人们

09

Python高阶项目（转发请告知）

编程中最常用的音频处理任务包括–加载和保存音频文件，将音频文件分割并追加到片段，使用不同的数据创建混合音频文件，操纵声音等级，应用一些过滤器以及生成音频调整和也许更多。

01

基于react的组件库主题设计方案

单一的视觉不再满足用户体验需求，为提高用户体验，提高应用体验口碑，同时提高开发者效率，我们希望提高组件库的可定制化，因此提供换肤功能以及多种类组件中的样式定制功能，允许用户将应用切换不同主题风格的皮肤，也允许开发者对指定组件进行样式改造。

效率至上—全新微云

设计立交桥是一个很大的挑战。有着不同背景和知识的司机，从四面八方进入立交桥，然后在短短几秒内决定从哪个出口出去。如果错过了出口，就可能去往完全相反的方向。留给司机做决定的时间非常短，以至于无暇思考，必

03

妙用Ps计算工具调出另类色调PS全版本软件下载地址包括最新的2023

通过本教程你将会学到怎样利用计算工具来创建一个新的阿尔法通道，并调整出很别致的图片颜色效果。

01

【Web技术】623- 简单好用的前端深色模式/主题化开发方案

深色模式（Dark Mode）在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。快速开发一个深色模式难吗？在支持css自定义属性（又称css变量，css variables）的现代浏览器里，可以说是相当的容易。甚至可以在运行时实时新增主题，摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。下面我们来看一下如何使用css自定义属性来完成深色模式和主题化的开发。

01

更改Linux终端颜色主题【Linux-Command line】

如果你一整天都盯着终端，自然想让它变得赏心悦目。对美的判断因人而异，自CRT串行控制台问世以来，终端已经走了很长一段路。因此，很有可能你的软件终端窗口中有很多选项可以使你看到的内容主题化，不管你如何定义美。

00

活动通知，解放双手自动发电子邮件

将电子邮件发送给适当的个人，首先要转换为PDF，然后再将此PD附加到电子邮件中，然后将所有电子邮件由python自动化发送。

01

最新iOS设计规范七｜10大视觉规范（Visual Design）

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。本文是iOS设计规范系列第7篇，介绍视觉设计（Visual Design）。

03

python自动化之电子邮件

将电子邮件发送给适当的个人，首先要转换为PDF，然后再将此PD附加到电子邮件中，然后将所有电子邮件由python自动化发送。

03

邮件编辑指南

畅邮（DM Pro）电子邮箱客户端官网：cy-email.com/ 论坛：bbs.cymailer.com/

01

一步一步教你如何解锁被盗的iPhone 6S

即使你的iPhone6S设置了六位数的密码，甚至还设置了touch ID，但我要告诉你的是：你的手机仍然能被犯罪分子解锁。事件背景三天前，一位苹果用户的iPhone6S被偷了。随后，小偷重置了该用

详解LayaAir引擎游戏屏幕适配，及有效抗锯齿

有的时候看到一些3D游戏锯齿感特别明显，与一些开发者沟通后发现，其实很多人并不清楚怎么能去掉明显的锯齿感，而这并不是只有新开发者才遇到的问题，很多游戏研发经验丰富的开发者，甚至是使用LayaAir引擎开发了很多游戏的开发者也会不清楚。另外，最近也遇到有开发者想了解刘海屏如何适配，所以通过本篇文章全面介绍一下。

❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️

你可以观看现场演示以了解它是如何工作的。如果你想使用 HTML 和 CSS 代码创建玻璃态登录表单，请按照以下教程进行操作。

03

YouTube for mac(YouTube客户端)

Youtube（油管）是全世界非常有名的视频网站，无论您在Mac上的哪个位置，想要即时访问您的订阅中的最新视频，Clicker for YouTube Mac版就是您最好的选择，用户不仅可以在电脑浏览器里面打开看视频，还能下载Youtube的应用，实现在手机上观看；不仅可以观看视频，还能发布自己制作的优质视频。

08

MDUI CSS框架 ---颜色和主题

背景颜色类名为 .mdui-color-[color]-[degree]。它在设置背景色的同时，还设置了背景色中的文本颜色和文本不透明度。

04

Markdown语法图文全面详解(10分钟学会)

博客：https://www.jianshu.com/u/f408bdadacce

02

图表美化教程|图案与形状填充

▽▼▽ 今天教大家简单的图表形状填充。 ●●●●● 首先是一个已经做好的柱形图。每天都看着这样的图表时间久了也会看腻的，那么一个小小的柱形图到底可以衍生出多少新花样呢！今天教大家三种图表美化思路

06

JavaScript学习笔记（O）——浏览器内核介绍

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

05

如何在CSS中使用变量

原文链接：https://www.sitepoint.com/how-to-use-variables-in-css/[1]

06

如何在CSS中使用变量

原文链接：https://www.sitepoint.com/how-to-use-variables-in-css/[1]

02

不看不知道，每个人都离不开云计算

都说云计算是专业人员的事情，与我们普通人关系不大。其实，云计算在我们日常生活中也有很多应用呢!下面我就举一些例子让大家了解了解。 1、电子日历我们的大脑并不是万能的，不可能记住我们所要记住的每一件

06

ps快捷键常用表格[通俗易懂]

ps快捷键常用表，ps快捷键大全！天下武功，唯快不破！看完这篇PS快捷键使用指南，帮你掌握最常用的32个Photoshop 快捷键！

02

拒绝“枯燥”设计 | 页面自动化配色的探索之路

作者lamchen 腾讯IEG设计中心设计师 |导语我们在WeGame详情页设计改版探索中，无意间接触到了图片取色技术。经历一年的摸索和实践，我们在现有取色技术的基础上，制定了自动化配色策略，并相继优化了助手专区，商城节日氛围，以及特色卡片等多个业务场景，取得了较为不错的效果。谨以此文，抛砖引玉，聊聊我们关于图片取色技术在UI设计中的实践心得。 01 自动化配色构想众所周知，WeGame是面向国内外游戏玩家的一个游戏发行产品；产品中对于单款游戏的详情页，是产品中最基础、也是最核心的内容。在

03

FigrCollage for mac(照片拼贴制作工具)v3.3.5汉化版

FigrCollage Mac版是Mac平台上的一款照片拼贴制作工具,可以把照片拼贴成各种形状，而且提供了各种模板可以套用，还能自定义形状，支持将任何形状或文本转换为照片拼贴。

01

textview设置字体大小-Android应用开发之TextView设置个别字体样式

1 msp = new ("测试"+XM+"更换当前号码将从手机发送一条普通短信进行验证");

03

使用标签承载内容

结构 head title meta body 文本标题和段落粗体和斜体上标和下标空白（白色空间折叠）折行和水平标尺语义化标记加粗和强调引用缩写词和首字母缩写词引文所有者联系信息内容的修改列表（list）有序列表（ordered list）无序列表（unordered list）定义列表（definition list）链接（anchor）页面链接锚链接功能链接图像（image）图像存储位置图像及其宽高选择正确的图像格式 JPEG GIF PNG 矢量图 fi

02

Android ActionBar完全解析，使用官方推荐的最佳导航栏(下)

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭