开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

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

有帮助

没帮助

相关·内容

H5 项目如何适配暗黑模式

二、问题如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。所以，需要对深色模式进行一些适配。...，建议使用CSS变量对颜色值进行管理 3.图片适配利用picture+source标签，设置不同模式下的图片 url。...HTML 元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供图像版本。...-- 深色模式下的图片 --> 4.

2.5K5 0

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

那就写写最近在做的事情。没错，就是文章标题提到的适配深色模式（DarkMode），也可以说是实现夜间模式的功能。相信许多iOS的同学最近都比较关注，毕竟iOS 13上个月推送更新了。...3.适配开始 1.全局调整 Flutter 在 MaterialApp 中提供了 theme 与 darkTheme 两个入口让我们设置两种模式下的颜色及文字样式。...通过配置 theme 与 darkTheme 可以让我们省去很多的判断代码，比如我的分割线在不同模式下是两种不同颜色，我不可能每使用一次，就在使用的地方去判断一次。...这里暂时有个问题，在iOS手机上开启深色模式，当我应用内关闭深色模式后，状态栏文字无法变为黑色。...这里暂时有个问题，在iOS手机上开启深色模式，当我应用内关闭深色模式后，状态栏无法变为黑色。这个问题Flutter的issues中也有人反馈了，期待官方的适配修复吧。

2.2K1 0

echarts在Markdown下深色模式自适应

darkmode：是否是暗黑模式，默认会根据背景色 backgroundColor 的亮度自动设置。...如果是设置了容器的背景色而无法判断到，就可以使用该配置手动指定，echarts 会根据是否是暗黑模式调整文本等的颜色。该配置通常会被用于主题中。...我观察到手动深色模式会创建一个dark的属性。...var myChart = echarts.init(chartDom, 'dark'); 但是手动深色模式的背景颜色不符合我的博客，所以我直接把饼图的背景改成了透明，只需要在option内设置背景透明即可...这样深色模式的背景只会显示我博客的背景。

1.1K1 0

echarts在markdown下深色模式自适应

darkmode：是否是暗黑模式，默认会根据背景色 backgroundColor 的亮度自动设置。...如果是设置了容器的背景色而无法判断到，就可以使用该配置手动指定，echarts 会根据是否是暗黑模式调整文本等的颜色。该配置通常会被用于主题中。...我观察到手动深色模式会创建一个dark的属性。...var myChart = echarts.init(chartDom, 'dark'); 但是手动深色模式的背景颜色不符合我的博客，所以我直接把饼图的背景改成了透明，只需要在option内设置背景透明即可...这样深色模式的背景只会显示我博客的背景。

2.4K3 0

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

，系统界面的背景色会自动地去对应 SystemBackground，在浅色外观下 SystemBackground=#FFFFFF（白色），在深色外观下 SystemBackground=#000000...值得注意的是，在浅色模式下，许多元素是存在投影的，例如开关按钮、拖动条的拉动点……而到了深色外观中，这些投影被统统移除了，这也是苹果设计的细微精致之处。...例如，深色模式其实未必适合文字的阅读，以及即使开启了深色模式，在昏暗环境中使用电子设备对视力的伤害也不容小觑。.../p/67583152 转载本站文章《DarkMode(1)：产品应用深色模式分析》, 请注明出处：https://www.zhoulujun.cn/html/webfront/style/darkMode.../8557.html

1.8K2 0

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

另外，图像占位符的颜色也是恒定的，不会改变。例如，在上图中，我们展示了该按钮在浅色和深色主题中的外观。图标，文本和计数器具有恒定的颜色。按钮的背景有变化，但其中的内容未更改。...1.1颜色样式-灰度样式灰度颜色是可更改的样式，因为在黑暗模式下应用相同的颜色时时，您将不会获得与在明亮模式下相同的效果。...将灰度颜色从“浅”模式切换为“暗”模式时，建议您使用白色（#FFFFFF）并在灰度上应用90％，70％，40％和10％的透明度效果，这将在应用于“深色模式”时提供很好的平滑过渡效果。...例如：在上面的图片中，层级一（Primary）背景色为白色，层级二（Secondary）背景色为浅灰色。除了这些颜色之外，我们还使用了彩色版本的背景，两种蓝色分别适用于浅色和深色模式。...您可以在暗色模式下使用相同的效果，但是由于阴影颜色已经很暗，除非更改背景颜色，否则用户可能很难看到该效果。内阴影效果与外部投影效果非常相似，但是这次阴影效果在元素内部给出。这使您的块元素看起来更厚。

18.6K1 1

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

为了适配系统，不少APP纷纷推出了深色模式。使用OLED屏幕的设备，在纯黑色下可以有效降低耗能，进一步延长续航时间。除此之外，深色模式还可以有效解决OLED屏烧屏、费眼的问题。...与传统夜间模式最大的区别是，深色模式不仅保证了弱光环境下的体验，在强光下仍具有可读性。虽然深色模式也被叫做暗黑模式，但并不代表要将底色变为纯黑。...如消息图标会从笑脸切换为休息的状态，这种具有趣味性的设计，也会拉近用户与产品之间的距离。豆瓣普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。...bilibili动画 B站刚推出深色模式时收到了许多批评，字体和背景色对比不强，视频封面仿佛蒙了一层雾，一刀切的暗化处理，导致用户浏览体验极差。...综上所述，合理使用深色模式，可以降低屏幕亮度，不仅可以减少耗电量，还能减小对自己或他人眼睛的刺激。除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。

1.5K3 0

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

与传统夜间模式最大的区别是，深色模式不仅保证了弱光环境下的体验，在强光下仍具有可读性。虽然深色模式也被叫做暗黑模式，但并不代表要将底色变为纯黑。...如消息图标会从笑脸切换为休息的状态，这种具有趣味性的设计，也会拉近用户与产品之间的距离。豆瓣普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。...bilibili动画 B站刚推出深色模式时收到了许多批评，字体和背景色对比不强，视频封面仿佛蒙了一层雾，一刀切的暗化处理，导致用户浏览体验极差。...百度网盘高饱和度的色彩会在深色背景上产生炫光的视觉效果，引发视觉疲劳。百度网盘的深色模式下，背景接近全黑，图标却没有太大的调整，给用户带来的阅读体验并不好。...综上所述，合理使用深色模式，可以降低屏幕亮度，不仅可以减少耗电量，还能减小对自己或他人眼睛的刺激。除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。

1.9K5 0

苹果iOS 13 新设计规范全面解析

您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。...在各种照明条件下测试应用程序的配色方案：根据房间的氛围，时间，天气等，室内和室外的照明都有很大差异。当您的应用在现实世界中使用时，您在计算机上看到的颜色看起来并不总是一样。...这两个颜色都会被称为背景色，打包写在代码中。系统只需按照不同的场景来使用这两种颜色即可。 ? 苹果设计师为我们提供了4组的语义化文字样式颜色。无论在深色或者浅色模式，都能呈现出良好的对比度。...对于自定义颜色，目标是对比度为7：1，尤其是对于较小的文本。对比度越高，深色背景下颜色就越浅，浅色模式下就会颜色越深。 ? ?...但是在深色模式下，这种具有阴影的设计就失效了（静电注：我们总不能把阴影做成白色吧？）所以，在深色模式下，我们就退而求其次，直接使用比背景稍微浅一点的颜色作为浮层，而不用考虑阴影了。 ?

4.5K4 0

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

当有人旋转设备时，整个布局无需更改。例如，如果您的应用在纵向模式下显示图像网格，则不必在横向模式下显示与列表相同的图像。相反，它可能只是调整网格的尺寸。尝试在所有情况下保持可比的体验。...在深色模式下，系统为所有屏幕、视图、菜单和控件使用较暗的色彩，并使用更具活力的颜色，使前景内容在较暗的背景下突出。深色模式也支持所有辅助功能。...暗黑模式的颜色深色模式中的配色包括较暗的背景颜色和较浅的前景色，经过精心挑选以确保对比度，同时也保证了两种模式之间的统一性。首选系统背景色。...当你使用动态颜色对其进行着色或添加活力时，符号在两种外观模式下看起来都很棒。必要时为明暗外观设计单独的标志符号。在浅色模式下使用线性图标或符号，在深色模式下可能则需要更实心的填充图标或符号。...如果在浅色和深色模式下看起来都不错，请使用相同的资产。如果资产仅在一种模式下看起来很好，请修改资产或创建单独的浅色和深色资产。使用资产目录将你的资产组合成一个单独命名的图像。

8K3 0

Microsoft office 2021激活密钥值得购买吗？

Outlook 中的翻译器和墨迹将电子邮件动态翻译为 70 多种语言，并在 Outlook 中查看脚本—全部。使用手指、笔或鼠标在单独的画布中批注电子邮件图像或绘图。...新增功能：使用深色模式减少眼睛疲劳以前，你可以在 Word 中使用深色功能区和工具栏，但文档颜色仍然是亮白色。现在，Word 中的深色模式还提供深色画布。...在更改发生时保存更改将文件上传到 OneDrive、OneDrive for Business 或 SharePoint Online，以确保自动保存所有更新。...新增功能：在 Access 中密切关注您的数据库对象可以清楚地看到活动选项卡，轻松拖动选项卡以重新排列它们，只需单击一下即可关闭数据库对象。...这个新的 Visio 模板和 Workplace Social Distancing 模具提供了许多形状、填充模式和线条模式（缩放和未缩放），以帮助完成此过程。

5.8K4 0

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

d.突出关键信息根据可视化展示目标，将重要信息添加辅助线或更改颜色等手段，进行信息的凸显，将用户的注意力引向关键信息，帮助用户理解数据意义。 ?...背景色定义 背景色的选择与可视化展示的设备相关，分为深色、浅色、彩色。 a.大屏背景色 在大屏设备中普遍用深色作为背景色，以减少屏幕拖尾，观众在视觉上也不会觉得刺眼。...淘宝双11大屏设计 b.中小屏背景色 中小屏幕背景色选择范围就比较广，浅色、彩色、深色均可以做出很好的设计。相比之下，浅色背景更适合展示大量的数据信息，因为在浅色底上数据图表的识别度比较高。...a.色彩辨识度要确保配色非常容易辨识与区分，对于使用单一色相配色，明度差异需要全局考虑，明度跨度一定要够大才能更清晰的展示数据。明度跨度是否合适，可以通过在灰度模式下配色的辨识度来判断。 ?...注明出处格式：腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

1.4K2 0

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

甚至可以在运行时实时新增主题，摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。下面我们来看一下如何使用css自定义属性来完成深色模式和主题化的开发。...，也不适合通过叠加图片遮挡来呈现效果的处理，但是用在文章博客中的插入图片非常简单有效，图片可以自然地叠加到纯色深色的背景色上。...深色模式不适合一些非深色风格产品的展示，深沉的背景色会影响产品风格呈现、传递的情感和用户观看时候的心情，不适当的颜色搭配容易引起反感。...在浅色搭配情况下可能很好看的颜色，放到深色下可能就会引起不舒适：不恰当的对比度会引起视觉上看不清晰；不恰当的色彩碰撞会引起反感；不恰当的饱和度、亮度会显得UI有点脏。...针对第二点，可以举以下的场景来说明：同样是白色，有色背景下的白色，在深色模式下可能还是保持白色；而作为背景色的白色在深色场景下会对应调整为深色。 ?

2.1K1 0

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

_Suuz5gbXOK.jpg] 以上是生成全局样式表的过程，在讲解流程前需补充说明上图中深色/浅色主题：组件库内置两份主题色，主题的切换主要是颜色部分的切换，提供两种主题的原因是我们尽可能通用化配色，...强制模式即当用户切换主题时，该模式下的组件不会跟随主题变化。...[20200716175651_3R8bieOTuS.jpg] 例如上图，是在浅色主题下的展示，但蓝框中因为有固定的背景图存在，我们不希望它跟随主题色切换文本颜色，而是固定为深色模式下的浅色文本颜色，就需要用到强制模式让它主题固定下来...优先级：style 属性 > 更改配置表定制背景色 > 默认主题背景色 // 更改配置表定制背景色：背景色使用的是样式表中的 hiBgColor 值 // style属性更改背景色 </Provider

7.5K26 22

现代 CSS 解决方案：accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。...它告诉浏览器，网页希望适应用户代理（浏览器）的默认颜色方案，并同时支持浅色和深色模式。...如果用户代理处于浅色模式，网页将使用浅色颜色方案来呈现内容；如果用户代理处于深色模式，网页将使用深色颜色方案来呈现内容。...244, 1); } body { background: #000; color: #fff; } } body { color-scheme: light dark; } 下面是我在手机上调整日间模式和夜间模式的效果图...：通过 @media (prefers-color-scheme: dark) {} 媒体查询，在黑夜模式下，展示不同的 accent-color。

1021 0

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

首先要明确俩个css技术：背景渐变/边框渐变动态渐变我们先打开主页html 即 Home.html。...然后注意给里面的文字白色换成深色的最终效果如下：然后我们去动手左下角的历史请求记录的背景色：然后去修改点开项目后的俩个按钮：进入和保存：好，修改完毕，再看看最终效果：好，主页的修改到此为止...因为这个菜单是我们当时下载的第三方的组件，所以要修改它的颜色有俩种方式：一，在welcome.html页面强行给它的各个标签加上 背景色，来覆盖旧颜色，二是找到人家自己的css文件，找到对应的颜色并修改...我们先尝试第二种，找找之前的背景色，不然要一个个标签加太麻烦了。我们观察到，这个菜单下面有这么一句，dark深色。...我们根据这句代码的关键字dark-ruby 去找这个201908059658下css的几个文件发现：果然这几个深蓝和黄都在里面。一下就找到了。然后就开始大刀阔斧的改颜色吧。好了。

4443 0

7个原则，看懂「深色模式」设计

深色模式的浪潮逐渐褪去，现在只留下对它两极化的评论。爱的人爱不释手，讨厌的人也咬牙切齿。但不管如何，深色模式已经是移动端和网页端的设计标准，摹客的编辑界面也在9月正式上线了深色模式。...7个原则从视觉到设置 1.使用低饱和度的颜色在深色模式下，界面本身比较暗沉，使用鲜艳的颜色会对用户不太友好，导致阅读性较差。所以在设计的时候需要避免使用高饱和度颜色。...在Material Design——谷歌设计规范，建议使用较深的灰色（#121212）作为背景色。 3.避免阴影阴影的作用是帮助我们看到视觉层次，然后，它们在深色模式下并不实用。...想在深色模式下突出视觉层次，需要用颜色、透明度等方式创建界面层次。 4.用颜色层级创建视觉层次在深色模式下，即便非100%的黑色也很难看出阴影效果。所以想突出视觉层次，就需要利用颜色层级来实现。...这种调整往往在深色模式下会失效，过浅的文字会看不清楚，破坏可读性。所以，对对比度的敏感在深色模式下也特别重要。

7681 0

全功能数据库管理工具-RazorSQL 10大版本发布

添加了可以通过 View -> Light Mode 菜单选项选择的 Light Mode 外观 Windows / Linux：更改了默认用户界面的外观。...可以在查看菜单中更改此设置语法高亮颜色：添加了为深色和非深色用户界面设置不同语法高亮颜色的功能颜色：添加了为深色和非深色用户界面设置不同前景色和背景色的功能启动时间减少约 10% 自动完成/自动查找...◆ Bug修复如果 RazorSQL 部分不在屏幕上，则自动查找/自动完成窗口可能会在屏幕外显示 Mac：如果通过视图菜单增加文本大小，弹出菜单字体不会增加深色模式：匹配括号/括号高亮颜色难以看到...Mac：在某些情况下，查看菜单未正确显示当前设置的外观选择通过 UCanAccess 驱动程序连接到 MS Access 时，日期字段在导入工具和生成 SQL 选项中用单引号而不是 # 括起来某些窗口在深色模式下未显示正确的文本颜色...Mac：如果从视图菜单中选择暗模式，将选择切换到自动检测暗/亮模式不再重新打开自动检测 Mac：文件系统浏览器：如果自动检测深色/浅色模式已打开，并且 Mac 处于浅色或灰色模式，则文件系统浏览器上的突出显示颜色不正确

3.9K2 0

现代 CSS 解决方案：accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。...它告诉浏览器，网页希望适应用户代理（浏览器）的默认颜色方案，并同时支持浅色和深色模式。...如果用户代理处于浅色模式，网页将使用浅色颜色方案来呈现内容；如果用户代理处于深色模式，网页将使用深色颜色方案来呈现内容。..., 1); } body { background: #000; color: #fff; } } body { color-scheme: light dark; } 下面是我在手机上调整日间模式和夜间模式的效果图...：通过 @media (prefers-color-scheme: dark) {} 媒体查询，在黑夜模式下，展示不同的 accent-color。

1331 0

Android 样式系统 | 主题背景属性

，例如，在深色主题中提供一个不同的值: <!...对颜色层级的区分，会迫使您给颜色赋予语义化名称，换句话说，您应该不会在给颜色命名为 @color/white 的同时，又为深色模式提供一个深色变体，这会让人感到非常困惑。...如果在不同的情境下要使用具有相同值的、新的语义化命名的颜色 (即，不是背景色但应该使用相同颜色)，这时候您仍需要在 colors 文件中创建新的条目。...由于主题背景可以被覆盖或者改变，因此这间接表示: 您不需要创建其他布局或样式就可以更改某些颜色——您可以在相同的布局中使用不同的主题背景。始终使用? 在某些情况下，您或许不想按照主题背景更改颜色。...例如，在 Material Design 规范文档中提到，您可能希望在浅色和深色主题中均使用同一类型的颜色。在这种特殊情况下，直接引用颜色资源是再合适不过的: <!

1.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭