- 综合排序
- 最热优先
- 最新优先
- 来自专栏日志服务CLS
深色模式来啦!
从业界看，大名鼎鼎的 Grafana 从一开始就将深色模式作为自己的主基调，基于优秀的深色模式设计，美观高级的图表和布局展示成为用户选择它的重要标签。 而 Kibana 深色模式也是社区史上极大的一个功能要求。 为此，经过团队内视觉、交互、产品、研发等各角色多次研讨及设计推导，CLS 深色模式上线了！ 明暗模式切换效果如下 深色模式价值 深色模式巧妙地运用背景和低光元素，从而创造出更为出色的视觉体验。这种模式对于那些需要花费大量时间与屏幕进行交互的 IT 从业人员来说，特别具有实用价值。 CLS 深色模式的设计理念 深色模式不仅是简单的将颜色调整为暗色，还要结合产品应用场景、用户使用习惯、品牌设计理念等多方面整体考虑。那么如何从设计层面实现深色模式的优化？ 1. 在顶部导航栏中，单击自定义设置，选择深色模式。 DataSight 控制台操作 1. 登录 DataSight 控制台。 2. 在顶部导航栏中，切换主题为深色模式。
61710编辑于 2024-09-20 - 来自专栏Android 技术栈
Android 深色模式的项目应用
[1240] 前言 早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式： [1240 ] 然后这段期间给整上，本以为现在深色模式应用的挺广泛的，在项目中实践了一下还是躺了很多坑，梳理一下实践过程及遇到的问题。 于是参考了微信和掘金的操作，总有三种状态，跟随系统，普通模式，深色模式。 6.WebView的深色模式设置 引入implementation 'androidx.webkit:webkit:1.2.0'后可轻易的实现WebView的深色模式，不过有兼容问题，这和WebView 颜色：新建values-night文件夹，里面是深色模式下的colors.xml文件 图片：新建drawable-night-xxhdpi图片文件夹 2).启动页我们经常会放品牌图，页面的深色模式可以通过
1.8K63编辑于 2021-11-29 - 来自专栏采云轩
深色模式适配指南
背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。 深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。 那针对一款 App 应用（原生 + H5）怎么进行深色模式的适配呢？今天就让我们一起来探究吧！ H5 深色适配 随着深色模式的流行，越来越多的操作系统、浏览器开始支持深色模式，现在可以利用 CSS 的媒体查询方法：prefers-color-scheme (https://developer.mozilla.org 默认时浅色模式生效，添加 dark 类名时，深色模式会生效。至此就实现了一套完整的深色模式适配方案。 Theme 指定的是浅色模式，darkTheme 指定的是深色模式，程序会根据系统设定的暗黑模式自动匹配模式。
3.6K31发布于 2020-08-18 - 来自专栏HelloCode开发者学习平台
iOS——配适深色模式
适配深色模式 苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了，就是适配深色模式。 在适配深色模式的过程中，作为开发者，我们其实只要解决俩个问题： 1、如何判断当前的系统的颜色模式？ 2、我们应该对哪些UI的内容适配深色模式？ 如何去判断当前系统的颜色模式？ 我们就可以通过traitCollection的userInterfaceStyle来判断当前系统的颜色模式。 我们应该对哪些UI的内容适配深色模式？ 适配深色模式，我们主要关心就是颜色，图片，模糊效果。因为这三个方面比较容易和颜色进行绑定。 h5界面适配深色模式 如果工程中有嵌套h5界面，那h5界面的内容可能也需要做深色模式的适配。 可以使用prefers-color-scheme来指定深色模式和浅色模式下的css样式。
2.1K10编辑于 2022-01-12 - 来自专栏Android 技术栈
Android 深色模式的项目应用
前言 早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式： 然后这段期间给整上，本以为现在深色模式应用的挺广泛的 于是参考了微信和掘金的操作，总有三种状态，跟随系统，普通模式，深色模式。 6.WebView的深色模式设置 引入implementation 'androidx.webkit:webkit:1.2.0'后可轻易的实现WebView的深色模式，不过有兼容问题，这和WebView 颜色：新建values-night文件夹，里面是深色模式下的colors.xml文件 图片：新建drawable-night-xxhdpi图片文件夹 2).启动页我们经常会放品牌图，页面的深色模式可以通过 5).在dialog打开后，再切换系统的深色模式，这时使用系统的颜色会不生效，需要使用自己的color文件里的颜色。具体出现在首次打开应用时，弹出的隐私弹框。
1.5K10编辑于 2022-01-05 - 来自专栏01二进制
快速适配 Flutter 之深色模式
深色模式（Dark Mode），也被称为暗黑模式，是一种高对比度，或者反色模式的显示模式，开启之后在夜间可以缓解疲劳，更易于阅读，同时也能在一定程度上达到省电的效果。 iOS和安卓分别从 iOS 13 和 Android 10（不同厂商不尽相同，部分 Android 9 也支持） 开始加入深色模式的支持，各大浏览器纷纷开始支持深色模式，强如微信也终于在 iOS 客户端 7.0.12、Android 客户端 7.0.13 支持了深色模式，等网页端适配深色模式后将更进一步提高用户体验的一致性。 但白天不懂夜的黑，有的人就是喜欢一套深色主题用一天，这时就需要用户可以手动开启深色模式了。 选择深色模式 接下来如果想要切换深色模式，我们只需要执行下面这行代码即可。
2.2K51发布于 2020-05-13 - 来自专栏前端架构
DarkMode(5)：深色模式不同实现方案切换
sass自定义函数转 sass预处理 在《DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode》与《DarkMode(3)：深色模式解决方案——颜色反转与函数 》，如果使用 content; } } } @function themed($key) { @return map-get($theme-map, $key); } 这种方案写出来的样式代码，在改为普通模式 variable.scss 变量，并自动处理成css 变量文件，这个正在研究，等时间空点，再续 这个用sass或者less函数可以直接处理 如果是map 形势的赋值，直接操作 转载本站文章《DarkMode(5)：深色模式不同实现方案切换
1.1K10发布于 2020-12-11 - 来自专栏无原型不设计
7个原则，看懂「深色模式」设计
深色模式的浪潮逐渐褪去，现在只留下对它两极化的评论。 爱的人爱不释手，讨厌的人也咬牙切齿。 但不管如何，深色模式已经是移动端和网页端的设计标准，摹客的编辑界面也在9月正式上线了深色模式。 3.避免阴影 阴影的作用是帮助我们看到视觉层次，然后，它们在深色模式下并不实用。 想在深色模式下突出视觉层次，需要用颜色、透明度等方式创建界面层次。 这种调整往往在深色模式下会失效，过浅的文字会看不清楚，破坏可读性。所以，对对比度的敏感在深色模式下也特别重要。 点击查看Apple和Google设计规范： 深色模式- iOS 深色模式- macOS Google-黑色主题 7.用户自由开关 最后这一点很重要，把深色模式的使用权交给用户决定。 就像开篇所说，目前关于深色模式的舆论，两极分化严重。所以，对深色模式设置灵活的开关方案，让用户自由选择是否使用。 △在摹客操作界面，也可以自由选择深浅
1.3K10编辑于 2022-11-24 - 来自专栏毫无作为
echarts在markdown下深色模式自适应
c=pie-borderRadius&lang=js 查阅官方文档得知深色模式根据backgroundColor这个属性进行自适应。 darkmode： 是否是暗黑模式，默认会根据背景色 backgroundColor 的亮度自动设置。 我观察到手动深色模式会创建一个dark的属性。 var myChart = echarts.init(chartDom, 'dark'); 但是手动深色模式的背景颜色不符合我的博客，所以我直接把饼图的背景改成了透明，只需要在option内设置背景透明即可 这样深色模式的背景只会显示我博客的背景。
3K30发布于 2021-09-26 - 来自专栏鸿蒙开发笔记
纯血鸿蒙APP实战开发——深色模式适配
介绍本示例介绍在开发应用以适应深色模式时，对于深色和浅色模式的适配方案，采取了多种策略如下：固定属性适配：对于部分组件的颜色属性，如背景色或字体颜色，若保持不变，可直接设定固定色值或引用固定的资源文件。 在深色模式下，系统会自动加载此目录中的颜色及图片资源，确保与浅色模式下的UI元素色彩差异性。 效果图预览使用说明在应用主页点击“深色模式”案例，将应用切至后台，系统颜色模式发生改变（如在系统设置中切换深浅色模式），当应用重新被激活至前台时，能够立即检测到系统颜色模式的变化，并自动更新为对应颜色主题的视图界面 实现思路当UI组件的颜色属性被设置为固定颜色值时，其在深色模式和浅色模式下的显示颜色将保持不变。 )若UI组件的颜色属性引用的是系统提供的具有层级参数的颜色资源，则当设备在深色模式和浅色模式间切换时，这些颜色会自动调整至对应模式下的预设色值。
1K10编辑于 2024-12-30 - 来自专栏浴巾的学习分享贴
深色模式下文章图片过暗
在/themes/butterfly/source/css/_mode/darkmode.styl
28130编辑于 2023-05-09 - 来自专栏腾讯云可观测专栏
云监控 Dashborad | 深色模式终于来了！
快来体验一下色彩对比最优的深色模式和大数据渲染出来的热力图吧！ 立即体验 Dashboard。 新增功能 支持深色模式自由切换 支持自定义添加多种阈值的辅助线 新增可视化图表类型—热力图 ①支持深色模式自由切换 （听说这块前端代码是UI设计师写的，难怪这么好看） 采用了最优的图表、文字前景和深色模式背景对比度 与普通模式相比下，突出了深色模式的一致性、舒适性和易读性。
74520发布于 2020-10-28 - 来自专栏毫无作为
echarts在Markdown下深色模式自适应
c=pie-borderRadius&lang=js 查阅官方文档得知深色模式根据backgroundColor这个属性进行自适应。 我观察到手动深色模式会创建一个dark的属性。 var myChart = echarts.init(chartDom, 'dark'); 但是手动深色模式的背景颜色不符合我的博客，所以我直接把饼图的背景改成了透明，只需要在option内设置背景透明即可 这样深色模式的背景只会显示我博客的背景。 prefers-color-scheme: dark) { body { background: #000; } } 此时切换深色模式和浅色模式可以直接看到效果
1.6K10发布于 2021-09-29 - 来自专栏上云服务专题
Android 禁止应用颜色跟随深色模式设置
Theme.AppCompat.NoActionBar">， 需要修改为<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 在系统设置为深色模式后 大多数文字和组件颜色没有变化），丑到爆了 很容易发现有变化的文字是因为没有设置textcolor，于是给他们加上之后，又给所有的cardview设置了background，但是发现文字不会改变，但cardview依然会变成深色 赶紧看了一下文档 https://developer.android.google.cn/guide/topics/ui/look-and-feel/darktheme， 希望能有禁用深色模式的方法，但根据文档里的意思 ，应用应该默认不会跟随系统的深色模式呀，只有手动设置后才会跟随深色模式。 公司的项目被几个人修改过，各种配置已经比较乱了，也不敢乱改，切到自己的demo试了一下，发现默认的应用是不会跟随深色模式的，经过对比才发现，demo的styles是 <style name="AppTheme
4.8K40编辑于 2021-12-02 - 来自专栏鸿蒙开发笔记
HarmonyOS 开发实践——基于原生能力的深色模式适配
场景描述对于原生开发的应用，深色模式适配是开发过程中常见的业务场景，系统可以通过状态栏中的深色模式开关配置系统的颜色模式，当系统颜色模式方式变化时，应用经常会遇到如下的业务诉求：场景一：跟随系统变化，感知系统颜色模式发生变化 场景二：不跟随系统变化，应用固定使用某种颜色模式，不跟随系统颜色模式变化。 4.基于Web组件适配：支持对前端页面进行深色模式设置，通过darkMode 接口可以配置跟随系统。若网页未定义深色样式，则需开启强制深色模式 forceDarkAccess 使用。 属性，配置是否强制接入深色模式。 }) }.width("100%").height("100%").padding(32) }}2.Web组件通过darkMode和forceDarkAccess属性，配置是否强制接入深色模式案例代码
74520编辑于 2024-11-11 WordPress夜间深色模式切换插件wp-nightdm
我不太明白为什么很多英文主题的作者，不愿意给主题自带深色模式切换的功能，国内中文环境很多作者都已经加上这个功能了。 我这个博客主题和另外一个在用的博客主题，默认也没有深色模式，我问过作者了，作者考虑他们的主题定位，所以就没加这个功能，让用第三方插件，然后我在后台搜索了下，发现这类插件也挺火的，竟然一大堆还有付费版本， 文件由原来的1.2M多，降到了不到40kb，压缩包由原来的600多kb降到了6kb左右 修改了前台切换按钮样式 删掉了第三方字体库 删掉了第三方图标库 新增功能：可以自定义设置按钮位置的百分比 插件名称：夜间深色模式
38010编辑于 2024-04-27- 来自专栏李洋博客
个人博客网站怎么适配手机端夜间模式或深色模式
但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式，从而改善用户在环境光亮低时的阅读体验。 很多手机APP应用都已经对夜间模式进行了支持，那么问题来了，对于手机网站来说，个人博客的网站能否支持自适应浅色模式和夜间模式呢？答案是当然可以啦！ 早在2020年7月W3C推出的 prefers-color-scheme 的 media 选择器，使得网页能够适配深色模式和浅色模式。 什么是prefers-color-scheme？ 也就是说，现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的，亮色模式系统访问的页面是亮色的”。 至此通过上面的代码兼容，我们就可以实现手机端深色和夜间模式的自适应兼容，之前在群里看到有人讨论过，然后自己也一致未在意，今天在公众号看新闻时看到了月光博客写的这篇文章教程，自己也百度查看了相关的资料，至于主题是否会增加
1.3K20编辑于 2022-09-23 - 来自专栏前端架构
DarkMode(1)：产品应用深色模式分析
iOS 13 的发推出了深色模式（Dark Mode），不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。 让使用者沉浸于内容 将 Dark Mode 翻译为「夜间模式」，是因为前者的使用场景更广，因此使用「深色模式」这样的翻译更恰当。 黑色更有利于我们沉浸于内容本身，无论是生产内容还是消费内容。 值得注意的是，在浅色模式下，许多元素是存在投影的，例如开关按钮、拖动条的拉动点……而到了深色外观中，这些投影被统统移除了，这也是苹果设计的细微精致之处。 同时，在 Power+ 1.0 中的《深色模式对视疲劳和效率的影响》这篇文章，对 Dark Mode 也提出了许多非常有深度的论述。 例如，深色模式其实未必适合文字的阅读，以及即使开启了深色模式，在昏暗环境中使用电子设备对视力的伤害也不容小觑。
2.5K20发布于 2020-12-11 - 来自专栏京程一灯
为你的网页添加深色模式
Apple 最近推出了新版的 MacOS，并希望能够在浏览器中检测到新加入的深色模式。为了做到这一点，Apple 推荐了一个新的 5 级媒体查询规范。 为了快速实现深色模式，只需用 CSS 滤镜的 "invert" 那怎样才能解决这个问题呢？ 我们可以使用 CSS 滤镜的 “invert”，将其应用于 HTML 并反转所有颜色，从而为我们提供 “深色模式”。 使用自定义属性 到目前为止，我们探索过的方法要么会失去对样式的控制，要么需要大量的维护才能确保所有内容都在深色模式下更新。 能够对页面容器上的边框阴影进行更新，使其在使用深色模式时不太透明。索引我们需要为页面阴影创建一个新的自定义属性。
2.2K30发布于 2019-04-23 - 来自专栏前端架构
DarkMode(4)：css滤镜 颜色反转实现深色模式
在《DarkMode(1)：产品应用深色模式分析》提过，单纯反转是不行的。但是，把不需要反转的，在反转过来。或者用js，给想要反转的，加上反转样式，再对其他的做微调。
2.2K10发布于 2020-12-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号