这完全是个人习惯问题了，单从健康的角度考虑没有过多的争论浅色主题对眼睛会好一些，这在科学研究上早已经有了定论。...写了十几年的程序，交往个几百个同事，从他们的个人行为上看喜欢深色的程序员多一点，浅色调容易提不起精神来，深色调整体感觉酷酷的，看起来更加有感觉。...总体来讲完全是个人感觉，当然由于程序员工作相对比较枯燥会时常每隔一段时间，换一次主题，如同累了听听音乐放松一下，是一个道理。 ?...程序员绝大部分时间都需要对着电脑，对于眼睛的消耗特别大，所以从健康角度考虑还是以浅色调为主好些，中间觉得审美疲劳之后可以中间换下主题也能提提神，正常来讲程序员一旦喜欢上一种色调基本保持不变，如同很多程序员喜欢一种
除了让眼部在夜间使用时更加舒适之外，深色主题还可以减少电量消耗，从而延长手机续航，是一项非常有用的功能。那么接下来，我们就开始学习如何才能让应用程序支持深色主题功能。...Configuration.UI_MODE_NIGHT_MASK return flag == Configuration.UI_MODE_NIGHT_YES } 调用isDarkTheme()方法，判断当前系统是浅色主题还是深色主题...我个人认为，在绝大多数情况下，让应用程序跟随系统的设置来决定使用浅色主题还是深色主题是最合适的一种做法。...mode参数主要有以下值可供选择： MODE_NIGHT_FOLLOW_SYSTEM：默认模式，表示让当前应用程序跟随系统设置来决定使用浅色主题还是深色主题。...MODE_NIGHT_AUTO_BATTERY：根据手机的电池状态来决定使用浅色主题还是深色主题，如果开启了节点模式，则使用深色主题。
当然没有，这次要讲的是同步系统的主题模式，有没有发现第一张图的下拉框内有一个选项：Sync with system： image.png 它这里就是同步系统主题的地方，先看下动态效果： image.png...那它是如何实现的呢？...起初我以为是通过 JavaScript 检测一个事件来实现的，进过搜索： image.png 通过上面两篇文章得知，是使用 @media 的一个属性 prefers-color-scheme 来实现的...那我们前面提到的 JavaScript 能检测到吗？...if(event.mode == 'dark'){ }else if(event.mode == 'light'){ } }) 但是我们可以通过另一个途径来实现检测主题的变化
据称是产品经理向APP开发程序员提了一个需求，要求用户app的主题颜色能根据手机壳自动调整，what？？？？？ ? 开发哥哥对这个需求表示很绝望，和产品经理沟通无果，最终大打出手。 ?...据平安员工称，这两名员工是外包人员，已经开除。 ? ? 天天P图的工程师闻讯急忙停下手中正在写的bug，不，写的需求，前来围观！ ?...利用人体关键点中的手部位置，裁剪出两个大的矩形框，对两个大的矩形框内部分别进行物体识别，当识别到是手机之后，对识别框中的图像先进行图像增强，最后提取出主颜色。...方案B-人脸方案： 根据摄像头拍摄到的用户人脸，提取出眼睛里反射的手机壳图像，分析手机壳的颜色。 ? 基于深度学习的人脸识别技术，能精确识别眼睛的位置： ?...平安的产品经理是嘛？来一打！ 如果你是一个热爱折腾的程序猿，请来P图坐坐，海量需求等着你！来一张P图的妹子图！ ? 天天P图是由腾讯公司开发的业内领先的图像处理、相机美拍的APP。
，就是下面这个引用样式有些问题 我是一个引用段落 在未修复前，深色模式看的话就是一片空白，因为深色模式的字体是白色，同时给了一个background-color:#f5f5f5样式所导致 这个是不能忍的...，苹果用户还是蛮多的，并且 Safari、Chrome 目前都支持深色模式，所以来适配一下 这里需要用到一个媒体查询@media的语法 prefers-color-scheme 用于检测用户的系统主题是浅色或深色...，此属性有三个值 no-preference表示用户未指定操作系统模式，其作为布尔值时以 false 输出 light表示用户的操作系统是浅色模式 dark表示用户的操作系统是深色模式 它的用法也是很简单...，默认都是浅色模式的，所以我们只写深色模式的样式就行 @media (prefers-color-scheme: light) { /* 浅色模式样式 */ } @media (prefers-color-scheme...任何个人或团体，未经允许禁止转载本文：《如何让你的网站支持苹果系列的深色Dark模式》，谢谢合作！
系统兼容 想要实现深色模式的效果，前提条件是要系统支持，目前常见系统支持情况如下： ?...Web/CSS/@media/prefers-color-scheme) 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...主题背景和样式 主题背景和样式应避免使用旨在于浅色主题背景下使用的硬编码颜色或图标，您应改用主题背景属性（首选）或适合在夜间使用的资源，以下是需要了解的两个最重要的主题背景属性： ?...Flutter 这里以 Flutter 为例，简单介绍下跨平台开发框架如何适配深色模式。Flutter 定义主题有两种方式：全局主题或使用 Theme 来定义应用程序局部的颜色和字体样式。...Theme 指定的是浅色模式，darkTheme 指定的是深色模式，程序会根据系统设定的暗黑模式自动匹配模式。
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。...OK，什么是 color-scheme 呢？color-scheme 是 CSS 的一个属性，用于指定网页的颜色方案或主题。它定义了网页元素应该使用哪种颜色方案来呈现内容。...这通常是浏览器自动根据操作系统或用户设置选择的方案。 light：表示使用浅色颜色方案。这通常包括浅色背景和深色文本。 dark：表示使用深色颜色方案。这通常包括深色背景和浅色文本。...它告诉浏览器，网页希望适应用户代理（浏览器）的默认颜色方案，并同时支持浅色和深色模式。...如果用户代理处于浅色模式，网页将使用浅色颜色方案来呈现内容；如果用户代理处于深色模式，网页将使用深色颜色方案来呈现内容。
我们浏览网页时，经常会发现许多网页都支持两种主题模式，一种是正常模式，一种是夜间模式，夜间模式也就是我们所说的暗色模式，也可以说是深色模式或者灰色模式。今天我们就来探讨如何让网页实现暗色模式。...prefers-color-scheme属性简介： prefers-color-scheme是CSS媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。...no-preference表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。 light表示用户已告知系统他们选择使用浅色主题的界面。...dark表示用户已告知系统他们选择使用暗色主题的界面。...至于手机端的浏览器也是同样的道理，手机端的QQ和微信也是可以实现的，只需要开启应用的夜间模式即可。
比方说最近经常提到的黑暗模式，深色主题： @media (prefers-color-scheme: dark) { /* 黑暗模式，深色主题 */ } @media (prefers-color-scheme...: light) { /* 浅色主题 */ } CSS可以自动检测，但是有时候，在JS中，我们也需要根据不同的系统主题，然后实现不同的交互逻辑，或者渲染出不一样的内容。...似乎一时间也找不到现成的JS API来检测系统模式，只能借助于CSS中传参了。这就是一个典型的场景，类似的场景还有很多。 例如： 1...."dark"'则表示黑夜主题，深色模式，黑暗风格，护眼模式。...因此，综合来看，使用CSS自定义属性传参在黑暗模式这个场景中是最佳的实现。但是，如果是基于设备宽度传参响应式布局这场场景，还是使用CSS content属性传参为佳。
在未修复前，深色模式看的话就是一片空白，因为深色模式的字体是白色，同时给了一个 background-color:#f5f5f5 样式所导致 这个是不能忍的，苹果用户还是蛮多的，并且 Safari、...Chrome 目前都支持深色模式，所以来适配一下 这里需要用到一个媒体查询 @media 的语法 prefers-color-scheme 用于检测用户的系统主题是浅色或深色，此属性有三个值 no-preference...表示用户未指定操作系统模式，其作为布尔值时以 false 输出 light 表示用户的操作系统是浅色模式 dark 表示用户的操作系统是深色模式 它的用法也是很简单，默认都是浅色模式的，所以我们只写深色模式的样式就行...@media (prefers-color-scheme: light) { /* 浅色模式样式 */ } @media (prefers-color-scheme: dark) {.../* 深色模式样式 */ }
我们都知道，从Android 10系统开始，Google引用了深色主题功能，一个出色的App在用户开启了深色主题模式之后，应该自动将界面也切换成深色模式。...而PermissionX同样对此功能进行了适配，在手机启用了深色主题模式之后，权限提醒对话框的效果如下图所示： ? 对话框上的颜色都是我精心调整过的，不管是深色主题还是浅色主题，看起来都会非常舒适。...你只需要保证传递给PermissionX的文字内容都是经过翻译的即可，其他部分PermissionX会根据当前手机系统的语言进行展示。...这里setDialogTintColor()方法接收两个参数，其中第一个参数是设置浅色主题下的颜色值，第二个参数是设置深色主题下的颜色值。...既然是要自定义颜色值，那么肯定要把浅色主题和深色主题两种场景都考虑到才行。 现在重新运行程序之后，浅色主题和深色主题下的对话框效果分别如下图所示： ? ?
如何切换深色模式 iOS：“设置”--“显示与亮度”--“外观”，选择“深色” Android：“系统设置”--“显示”--“深色模式”。...只影响浏览器默认样式 更多信息可查阅 W3C 文档 《CSS Color Adjustment Module Level 1》 2.通过 CSS 媒体查询 prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色...no-preference 表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。 light 表示用户已告知系统他们选择使用浅色主题的界面。...dark 表示用户已告知系统他们选择使用暗色主题的界面。...') } else { console.log('现在是浅色模式') } } // 判断当前模式 darkModeHandler() // 监听模式变化 mediaQuery.addListener
但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式，从而改善用户在环境光亮低时的阅读体验。...很多手机APP应用都已经对夜间模式进行了支持，那么问题来了，对于手机网站来说，个人博客的网站能否支持自适应浅色模式和夜间模式呢？答案是当然可以啦！...早在2020年7月W3C推出的 prefers-color-scheme 的 media 选择器，使得网页能够适配深色模式和浅色模式。 什么是prefers-color-scheme？...就技术而言我们先就可以很简单地实现手机端浅色和夜间模式的适配，prefers-color-scheme 有 2 种值： light——浏览器宿系统使用亮色主题的界面，同时也是默认值，浏览器 privacy.resistFingerprinting...至此通过上面的代码兼容，我们就可以实现手机端深色和夜间模式的自适应兼容，之前在群里看到有人讨论过，然后自己也一致未在意，今天在公众号看新闻时看到了月光博客写的这篇文章教程，自己也百度查看了相关的资料，至于主题是否会增加
近年来，深色模式已成为网页设计的主要趋势，以其优雅的外观吸引访问者，并为传统的浅色主题界面带来了可喜的变化。深色模式在各种数字平台上变得越来越流行，包括操作系统、移动应用程序和网站。...使用 CSS 实现深色模式 深色模式已成为网页设计中广受欢迎的功能，为用户提供了传统浅色主题界面的视觉吸引力替代方案。幸运的是，使用 CSS 实现深色模式相对简单，并且可以通过一些简单的技术来实现。...在本指南中，我们将探索如何使用 CSS 创建深色模式切换按钮并在浅色和深色模式之间切换。 CSS 变量（自定义属性） CSS 变量，也称为自定义属性，在实现深色模式中发挥着关键作用。...以下是如何在保持可访问性的同时在黑暗模式下进行设计： 保持足够的对比度：确保深色背景不会过多遮挡文本或交互功能，以便仍然可以阅读和区分它们。...以下是一些需要记住的重要事项： 清晰的视觉提示：为了让用户轻松地在浅色和深色主题之间转换，请在深色模式可用并激活时清晰地显示视觉提示。
其中，色彩是最重要也是最明显的一个部分。 许多设计师会在选择配色方案的时候，会使用浅色的、明亮的背景色彩。其实，大众和设计师的这个倾向是有科学依据的。在白色的背景上使用黑色的文本，可读性是最佳的。...大量的 B2B的程序， SaaS类产品，以及媒体类数字产品，如今大都配备了深色系主题，让用户在合适的时候从浅色主题下切换过来，用来调整和修正视觉模式，降低视觉疲劳。...适合使用深色系 UI 的地方 绝大多数涉及到娱乐的 UI界面，大都会有一定的倾向使用深色系主题，无论是智能电视、游戏机还是电影类应用，这其实不仅仅和对比度有关系，它和用户的日常使用环境和时间也有着极深的关联...在这样的 B2B 平台中，完全借用深色系UI 设计，几乎是不可能完成的任务。 为了确保产品的基本可用性，最好的选择其实是将深色和浅色系的 UI元素混合搭配起来使用。...为什么苹果直到今年才在自家的 Mac系统中加入深色系主题，我们可以想见这当中的难度。至少，在 Mac系统中，即使是在深色主题之下，也没有全局采用深色系背景。 ?
这些颜色槽都包含了美观的全新默认基准颜色，在浅色和深色主题上都可以应用。...isSystemInDarkTheme 工具函数，根据系统设置在浅色和深色配色方案之间切换。...，该函数接收一个用于判断深色主题的参数和一个应用内容参数，从而使我们可以在 Jetchat 的浅色和深色配色方案之间切换。...动态配色是 Material You 的重要部分，即用算法从用户的壁纸中提取自定义颜色并应用于应用和系统界面，您可将此作为起点来生成完整的浅色和深色配色方案。...= colorScheme, content = content, ) } 现在，在 Android 12 及更高版本上，Jetchat 界面可根据用户壁纸自动调整配色，无论是浅色主题还是深色主题都可提供适合品牌的美观体验
search=variables 二者配合就可以实现页面主题跟随系统自动切换深浅模式 。...CSS 的媒体查询 prefers-color-scheme 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。...light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。...那么针对项目的 深色模式适配方案也一样，主要分为三步： 组件库深浅色主题 适配 项目中 深浅色的 颜色适配 完成 CSS 变量到页面的注入 上面的都是 利用 变量，去控制样式。
先不说这个和主流操作系统极度差异化的UI设计，这个暗色主题是真的很优秀。 来，聊聊暗色主题。Lumia 800作为WP的首发机型，使用的是AMOLED屏幕。这个带来了什么结果呢？...深色模式是如何进入我们的视野的？我们可以看到在过去的2年中，曾经出现过2个高峰。第一个高峰是去年WWDC，苹果第一次发布了iOS13的测试版，并且最大的特性就是支持了深色模式。...另外，苹果应该还是非常希望弱化跑马边框和刘海的存在感的。在浅色模式下，会加剧跑马边框和刘海的存在感，但是在深色模式下，界面UI就会立马和机身融为一体。这也是为何苹果也十分乐意拥抱深色模式的原因。...体验刷新：目前有很多手机系统或者App提供了换肤的功能。但是这个换肤大多都带有很强的个性和主题性，每个主题能命中的用户其实并不是很多。相比之下，直接把整个系统变黑，新鲜感满满，接受度也很高。...所以，不管是仅仅刷个深色主题，还是降低视觉刺激，这两边的用户需求都是合理的，其实并不冲突。因此在真正设计深色模式的。
可是，它的色彩模式、兼容性、系统性、易用性、可交互性以及内在逻辑自恰是怎么做到的？也许你不一定要严格遵循这套规范，但是它会作为标杆，告诉你要确保整套主题严密地运行，创造体验无缝的 UI 界面。...・限制色彩：在大面区域都使用深色色调的时候，尽量少地使用提亮色（浅色、低饱和度高明度的色彩、或者是高饱和度的色彩）。 拆解 深色UI主题主要呈现出的前景视觉是深色的，同时其他的色彩也较为稀少。...强调色 在深色主题当中，深色的背景和元素占据了 UI 的绝大部分。而强调色通常使用的是浅色（柔和且饱和度较低）或者明亮（饱和度高，鲜艳）的色彩，确保被强调的元素能够脱颖而出。...在深色背景上的浅色文本 当浅色文本出现在深色背景上的时候（这里是白色文本置于黑色背景之上），它应该遵循下面的不透明度设置规则： 最重要的内容，白色文本不透明度设置为87% 中等重要的内容，白色文本的不透明度为...深浅色主题的结合 参考资料： Snackbar 当需要在深色主题中使用浅色的控件的时候，浅色的控件可以确保层次结构的清晰。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
