可访问性与对比度 深色主题下，深色必须暗到一定程度，才能让白色的文本足够清晰地呈现。文本和背景之间的对比度级别至少要达到 15.8:1 才行。...在深色背景上的浅色文本 当浅色文本出现在深色背景上的时候（这里是白色文本置于黑色背景之上），它应该遵循下面的不透明度设置规则： 最重要的内容，白色文本不透明度设置为87% 中等重要的内容，白色文本的不透明度为...60% 被禁用的文本内容，白色文本的不透明度为38% ?...错误 应该避免将配色中的主色引用到弹出菜单的背景上，这回导致明亮的色彩盖住多半屏幕。...它包含全套深色主题的布局元素，包括状态栏、应用栏目、底部工具栏、卡片、下拉菜单、搜索字段、分隔符、导航、对话框等一系列的组件，非常实用。
用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme 包含这个值。该值是 light 或 dark ，尽管 W3C 规范指出它可能支持未来的值，如 sepia。...在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。 因为规范说 W3C 可能会引入未来的值，所以把这个 CSS 转换为默认值是有意义的。...，如果媒体查询是 dark，则将其转换为深色主题。...这样一来，以后任何添加到媒体查询的值都会默认设置为浅色主题。 使用 CSS 变量 现在我为不同的主题设置了不同的值，我需要实际使用它们来设计页面。...如果你进入 findmymastodon.com，并切换你的操作系统的主题，你会看到从一个主题到另一个主题的过渡。 CSS 工作组 网站也使用同样的媒体查询。
从文本颜色上我们举个简单的例子： 通常的网站里都会有正文（主要文本），帮助提示信息（次要文本），文本占位符。...图片简化地获取当前的主题状态可以在body上增加一个ui主题是否是深色模式的属性。 深色方案一：图片增加透明度。适用场景：简单文章图片和纯色背景。...css-vars-ponyfill 这个npm包可以使得ie9+/edge12+支持上css自定义属性，它是一个带有选项的兼容方案，大概原理就是通过监听style里带有var自定义属性的值，替换为原值并插入...针对第二点，可以举以下的场景来说明：同样是白色，有色背景下的白色，在深色模式下可能还是保持白色；而作为背景色的白色在深色场景下会对应调整为深色。 ?...图4 一种白色的存在切换主题的多种映射 此时，自动通过色值计算就需要区分颜色的周边颜色或者底层叠加颜色来计算，这无疑加大了计算难度。 所以这块自动计算并不太容易，还需要一些的探索。
例如，在上图中，我们展示了该按钮在浅色和深色主题中的外观。图标，文本和计数器具有恒定的颜色。按钮的背景有变化，但其中的内容未更改。...将灰度颜色从“浅”模式切换为“暗”模式时，建议您使用白色（#FFFFFF）并在灰度上应用90％，70％，40％和10％的透明度效果，这将在应用于“深色模式”时提供很好的平滑过渡效果。...例如：在上面的图片中，层级一（Primary）背景色为白色，层级二（Secondary）背景色为浅灰色。 除了这些颜色之外，我们还使用了彩色版本的背景，两种蓝色分别适用于浅色和深色模式。...为了创建这些颜色的阴影，我们将基础颜色的透明度应用于背景。例如，对于浅色版本，我们对白色应用了10％的蓝色透明度，对深色版本，我们对黑色应用了25％的蓝色透明度。...如何在亮色模式和暗色模式之间切换 设置好设计系统后，就可以轻松地将组件和模块切换为暗色模式了。为此，您将需要一个名为Appearance的插件，该插件可以在Figma社区找到。
首先，对于这个颜色系统，十六进制值需要转换为hsl。...在浅色主题中，文本应该非常暗。请注意以下颜色的亮度如何很低，远低于 50%。...秘诀是将黑色和白色专门用于最亮的高光和最暗的阴影。 surface 颜色 surface颜色是文本所在的背景、边框和其他装饰表面。在浅色主题中，这些是浅色，而不是深色的文本颜色。...大多数品牌都没有以深色主题开始，它是其主要主题的变体，通常是较浅的主题。...深入了解以下代码块中灯光主题的连接样式，将通用自定义属性与灯光主题特定颜色连接起来。现在所有用途都var(--brand)将使用浅色品牌颜色。
所有代码实践在云阅里可以看到： 下载App体验，酷安：云阅 直接查看源码，GitHub：CloudReader 项目实践 1.选定原生Api实现 Android官方深色主题背景开发文档(需科学上网...的dark模式，为了使"完成"文字颜色显示白色 supportActionBar?....android:attr/textColorPrimary 这是一种通用型文本颜色。它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?...android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。...6).需要使用png后缀的图，最好别直接将jpg改为png，可以打开图片后将图片另存为png格式。我做时候debug模式下没问题，打release包的时候就提示了这个问题。
所有代码实践在云阅里可以看到： 下载App体验，酷安：云阅 直接查看源码，GitHub：CloudReader 项目实践 1.选定原生Api实现 Android官方深色主题背景开发文档(需访问国外网站)...的dark模式，为了使"完成"文字颜色显示白色 supportActionBar?....android:attr/textColorPrimary 这是一种通用型文本颜色。它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?...android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。...6).需要使用png后缀的图，最好别直接将jpg改为png，可以打开图片后将图片另存为png格式。我做时候debug模式下没问题，打release包的时候就提示了这个问题。
由于屏幕上的大部分颜色都是background和surface的颜色，在深色主题中，与浅色主题相比，background和surface的颜色会有一个较低的值（亮度）。...白色背景上的白色文字或图标的对比度为1：1。白色背景上的黑色文字有21:1的对比度。 Material设计指南确保在背景和前景（文本或图标）之间应用WCAG建议的最小对比度，即4.5：1。...对于主色调，Material设计浅色主题通常使用500色调，对于深色主题建议使用较浅的饱和度色调（200-50范围）。...浅色主题的主变色可以浅一些或深一些（500±200），而对于深色主题，建议使用500。...深色和浅色主题的secondary (accent) color色调可以选择与primary color类似的颜色，只是深色主题的次要变体颜色建议在200-50范围内，而不是500。 3.
在白色的背景上使用黑色的文本，可读性是最佳的。在不同的测试和研究当中，浅色背景上的深色文本，比起深色背景上的浅色文本，阅读性更强。...R. 1983） 而另外一方面，人们习惯了在白色背景上查看图片，阅读深色的文本。这种状况已经延续了上百年。而在中国，这种状况更是延续了几千年。...设计师真正要做的工作并不是单纯的更换配色，否则大量文本和多属性强内容的界面，会被深色系UI主题给毁掉。 换句话来说，深色系的UI 中，可用的色彩变少了，空间利用率也相对不会那么高。 ?...在这样的 B2B 平台中，完全借用深色系UI 设计，几乎是不可能完成的任务。 为了确保产品的基本可用性，最好的选择其实是将深色和浅色系的 UI元素混合搭配起来使用。...为什么苹果直到今年才在自家的 Mac系统中加入深色系主题，我们可以想见这当中的难度。至少，在 Mac系统中，即使是在深色主题之下，也没有全局采用深色系背景。 ?
深色网站总是给人以个性而充满高品质的感觉。浅色或亮色文本或图片，搭配深色背景，起到视觉上的层级呼应，突出主题的同时，瞬间吸引用户注意，赋予界面生命力。 如何设计深色系网页？...1、运用白色的文字和深色背景形成反差效果 虽然深色背景容易给人压抑的感觉，但是把深色背景运用到白色文字上面则是另外一种视觉效果差的呈现，白色的文字颜色和深色的背景可以形成鲜明的对比，这样就能突出文本内容...使用一个白色或黑色的背景可以让你的网站看起来更现代一点。 Eat genesis ? Wmnvm ? M-mediagebouw ? Two chimps coffee ?...巧妙的动画效果 在深色系网页设计中我们会发现很多设计师都采用动画效果来增强页面的交互效果，打破深色系的沉闷感。简单的动画效果营造的视觉体验是非常吸引人的，可以引导用户不断探索网页呈现的神秘感。...总结 深色系的网页并不适用于每一个行业，但如果色彩运用的好，它可以让你的网站更加简洁，高级。
但这不仅仅是一种趋势；这是一个将持续存在的设计决策。 然而，到底什么是黑暗模式，为什么它如此受欢迎？从根本上来说，深色模式颠倒了用户界面的标准配色方案，用浅色文本代替深色色调，用明亮背景代替深色色调。...称为“深色模式”（有时称为“夜间模式”或“深色主题”）的设计功能会修改用户界面的配色方案，使其主要使用深色或黑色背景以及浅色文本和图形元素。...文本对比：为了保持深色背景下的易读性，在深色模式下，文本和其他材料通常以较浅的颜色呈现，例如白色或浅灰色。...更好的可读性：将文本放在深色背景下可以使其更容易阅读，特别是对于对眩光敏感或有特定视觉障碍的人来说。与黑色背景形成鲜明对比的浅色文本经常用于深色模式设计中，以帮助用户在不疲劳的情况下感知和理解信息。...在本指南中，我们将探索如何使用 CSS 创建深色模式切换按钮并在浅色和深色模式之间切换。 CSS 变量（自定义属性） CSS 变量，也称为自定义属性，在实现深色模式中发挥着关键作用。
作为客户，此个性化将Web应用程序转换为您存储数据的小窝。作为设计师，让您的客户自由地控制布局和设计是一个可怕的前景。那么设计用于漂亮的白色背景的所有股票文本和图像会发生什么？...在本文中，我将向您介绍两个简单的公式，以确定您是否应该使用白色或黑色文本，具体取决于背景的颜色。方程式易于实现并产生类似的结果。这不是一个更好的问题，而是你使用一个更好的事实！...该函数将六字符十六进制颜色转换为整数，并将其与纯白色的整数值的一半进行比较。该功能易于记忆，但在理解我们如何感知频谱的某些部分时却很幼稚。不同的波长对对比度有更大或更小的影响。...第二个等式称为’ YIQ ‘，因为它将RGB颜色空间转换为YIQ，这考虑了其组成部分的不同影响。同样，等式返回白色或黑色，并且它也很容易实现。...这对于可访问性非常重要，以确保文本和链接颜色与背景之间有足够的对比度。 Kevin Hale在Particletree上也有一篇很棒的文章，讲述了他选择浅色或深色主题的经历。
我们将探索色彩理论和配色方案的基本原理，然后检查某些颜色的情感效果。 颜色理论 与颜色相关的主题浩如烟海，所以这里我们只谈与 UI 设计相关的部分。...绿色 传递：增长，稳定，金融主题，环保主题 ? 绿色缓和了暖色调和冷色调之间的差距，虽然往往是更酷的颜色。这意味着绿色有与蓝色相同的放松效果，但仍然保留一些黄色的激励品质。...它在中性的力量使它成为长块的文本的选择的颜色，但作为一个基本的颜色可以给人的印象，柔滑，复杂，甚至邪恶。 对于大多数网站，黑色能创造瞬间的复杂性和永恒的感觉。...深色的米色（如 Dishoom 网站上）将创造一种土质和几乎纸状的纹理，而较浅的色调感觉更新鲜。在这种情况下，围绕品牌名称的较浅的阴影，向外变暗，帮助给餐厅创造一种取自大地精华的新鲜食材的感觉。...红色和绿色的对比与文本标签和植物，加上沙漠上面的蓝色和橙色的天空。同时，红色/橙色和蓝色/绿色的补充让整个视图很协调。 类似 – 最后有类似的方案，专注于互补色。
在亮色模式下，白色的背景光往往过于明亮，长时间使用会给使用者带来眼睛疲劳等不适。...从用户角度，CLS 收到用很多户反馈，期待 CLS 提供深色模式的界面，觉得暗色模式下查看文本更易专注，报表的展示效果也更炫酷。...在长时间查看文本的情况下，深色模式可以显著减轻用户的眼睛疲劳感。 提升文本可读性：在深色背景下，屏幕上的文字呈现出的对比度使得文本更加清晰易读。...CLS 深色模式的设计理念 深色模式不仅是简单的将颜色调整为暗色，还要结合产品应用场景、用户使用习惯、品牌设计理念等多方面整体考虑。那么如何从设计层面实现深色模式的优化？ 1....在顶部导航栏中，单击自定义设置，选择深色模式。 DataSight 控制台操作 1. 登录 DataSight 控制台。 2. 在顶部导航栏中，切换主题为深色模式。
sass自定义函数转 sass预处理 在《DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode》与《DarkMode(3)：深色模式解决方案——颜色反转与函数 》，如果使用...*)}/; 替换为$1即可 第二个函数正则表达:themed\(\"([\w\-]*)\"\)\; const reg = /themed\(\"([\w\-]*)\"\)\;/ 替换为\$$1 sass...变量主题输出切换为css变量主题输出 如果单纯sass变量输出两套主题，切换主题样式，需要刷新页面。...variable.scss 变量，并自动处理成css 变量文件，这个正在研究，等时间空点，再续 这个用sass或者less函数可以直接处理 如果是map 形势的赋值，直接操作 转载本站文章《DarkMode(5)：深色模式不同实现方案切换
如消息图标会从笑脸切换为休息的状态，这种具有趣味性的设计，也会拉近用户与产品之间的距离。 豆 瓣 普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。...知乎在设计夜间模式时，知乎采用了主色调蓝色+深灰色的搭配，深蓝和灰色作为背景，展示出的效果既有强烈的对比，又摆脱了深色的压抑感。 与豆瓣不同，知乎的文本颜色选择了对比度更低的灰色，通过字重进行区分。...在最近一次更新中，B站终于对深色模式进行了优化，适度提亮了视频封面和图标的亮度，将多彩型图标调整为了单线型图标，既统一了画面风格，又提升了界面阅读体验。...设计深色模式时，必须注意各页面的配色及对比度都要尽可能地统一。在深色模式下点开B站创作中心或推荐服务中的版块时，加载画面仍然是白色，突然出现的强光无疑会对眼睛造成刺激，对于用户来说体验感也极差。...同样，由于背景颜色太深，导致百度网盘的文本和背景对比度太大，也存在难以阅读的情况，对于诵读困难症患者来说，在阅读时会感觉文字在旋转、模糊。
好消息，ONLYOFFICE工作区又更新了，注意这次更新的是工作区的内容，12.5更新内容又：增强的安全性、优化的文档管理、深色主题等。...并且ONLYOFFICE添加了用于将受密码保护的文档转换为 OOXML 格式的选项，以便在将文件上传到门户时进一步编辑更新的ONLYOFFICE工作区包括最新版本的在线编辑器，具有字段填充，SmartArt...深色主题打开深色主题，在光线不足的环境中舒适地工作。当您激活深色主题时，所有文档也将在此模式下打开。...选项卡：配置文件 →界面主题 → 浅色主题 / 深色主题 / 使用系统主题为什么增强安全保护在大数据几乎覆盖所有高科技产品的今天，人们的隐私也是现在最注重的话题，相信很多人都经历过针对定向性投放广告，给你带来的感觉和体验是什么样子的...控制台改进，包括连接第三方存储空间的更新设置，品牌设置中的深色主题标识，可改变租户的门户内存配额。团队模板中新增“潜在客户”字段。为拥有大量用户的门户优化了 Feed。
随着指南不断的变化更新，MDC 将进行调整并更新来满足新的规范。 1.1.0 有什么新功能 MDC从 1.0.0 开始发生了大量的改变！...例如，文字有新的默认的 appearance MDC 1.1.0 中提供的一些新组件和更新组件包括： 扩展 FAB 日期选择器 切换按钮 底部应用栏 黑色主题支持 在 Android 10 中引入了系统范围的深色主题支持...新颜色：默认调色板已扩展为了深色主题已经扩展了。应该进行调整 colorPrimary colorSecondary 以使品牌在黑暗主题中的饱和度降低。...海拔表面增亮：所有 MDC 组件都支持其表面增亮来传达黑暗主题中的海拔。指南中的白色覆盖投影映射到组件上设置的 elevation 的数值。 可访问性：MDC 利用颜色来区分是否可以访问。...Primary 和 Surface 颜色切换：MDC 组件遵循指南，减少在深色主题中使用 Primary 色。
此属性的值将传播到您的渲染进程。任何与prefers-color-scheme相关的CSS规则都将相应地更新。 先上代码，之后再分析： index.html 切换为深色模式 切换系统主题 深色主题' : '浅色主题' document.getElementById('toggle').innerHTML= isDarkMode ?...'切换为浅色主题' : '切换为深色主题' }) document.getElementById('reset-to-system').addEventListener('click', async...app.quit() } }) 运行效果如下（这个GIF有点慢，别介意）： CSS文件使用@media媒体查询的prefers-color-scheme来设置元素背景和文本颜色
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
