这完全是个人习惯问题了，单从健康的角度考虑没有过多的争论浅色主题对眼睛会好一些，这在科学研究上早已经有了定论。...写了十几年的程序，交往个几百个同事，从他们的个人行为上看喜欢深色的程序员多一点，浅色调容易提不起精神来，深色调整体感觉酷酷的，看起来更加有感觉。...总体来讲完全是个人感觉，当然由于程序员工作相对比较枯燥会时常每隔一段时间，换一次主题，如同累了听听音乐放松一下，是一个道理。 ?...程序员绝大部分时间都需要对着电脑，对于眼睛的消耗特别大，所以从健康角度考虑还是以浅色调为主好些，中间觉得审美疲劳之后可以中间换下主题也能提提神，正常来讲程序员一旦喜欢上一种色调基本保持不变，如同很多程序员喜欢一种...都说程序员职业很神秘，和程序员打交道非常费劲，你让一个工作时间有百分九十对着电脑的程序员像销售人员一样方便交流，显然不是很现实，越是老程序员显得话越少，但一旦撬开程序员想说话的嘴，又会滔滔不绝的说个不停
我们一直以来使用的操作系统都是以浅色主题为主的，这种主题模式在白天或者是光线充足的情况下使用起来没有任何问题，可是在夜晚灯光关闭的情况下使用就会显得非常刺眼。...这是因为仅仅操作系统自身支持深色主题是没有用的，还得让所有的应用程序都能够支持才行，而这从来都不是一件容易的事情。...为此，我们以后开发的应用程序都应该尽量按照Android系统的要求对深色主题进行支持，不然当用户开启了深色主题之后，只有你的应用还使用的是浅色主题的话，就会显得格格不入。...我个人认为，在绝大多数情况下，让应用程序跟随系统的设置来决定使用浅色主题还是深色主题是最合适的一种做法。...MODE_NIGHT_AUTO_BATTERY：根据手机的电池状态来决定使用浅色主题还是深色主题，如果开启了节点模式，则使用深色主题。
关于MAC的黑暗模式（深色Dark模式）网站颜色不适应问题，给予解决方案。...在未修复前，深色模式看的话就是一片空白，因为深色模式的字体是白色，同时给了一个 background-color:#f5f5f5 样式所导致 这个是不能忍的，苹果用户还是蛮多的，并且 Safari、...Chrome 目前都支持深色模式，所以来适配一下 这里需要用到一个媒体查询 @media 的语法 prefers-color-scheme 用于检测用户的系统主题是浅色或深色，此属性有三个值 no-preference...表示用户未指定操作系统模式，其作为布尔值时以 false 输出 light 表示用户的操作系统是浅色模式 dark 表示用户的操作系统是深色模式 它的用法也是很简单，默认都是浅色模式的，所以我们只写深色模式的样式就行.../* 深色模式样式 */ }
就在前几天 9 月 20 日凌晨，苹果正式推送 iOS13、iPadOS13，iPhone 和 iPad 的深色模式也终于来了 我也是直接换上了 iPad 的深色模式，mbp 使用正常的浅色模式，访问自己网站的时候发现一个问题...，就是下面这个引用样式有些问题 我是一个引用段落 在未修复前，深色模式看的话就是一片空白，因为深色模式的字体是白色，同时给了一个background-color:#f5f5f5样式所导致 这个是不能忍的...，苹果用户还是蛮多的，并且 Safari、Chrome 目前都支持深色模式，所以来适配一下 这里需要用到一个媒体查询@media的语法 prefers-color-scheme 用于检测用户的系统主题是浅色或深色...，此属性有三个值 no-preference表示用户未指定操作系统模式，其作为布尔值时以 false 输出 light表示用户的操作系统是浅色模式 dark表示用户的操作系统是深色模式 它的用法也是很简单...，默认都是浅色模式的，所以我们只写深色模式的样式就行 @media (prefers-color-scheme: light) { /* 浅色模式样式 */ } @media (prefers-color-scheme
H5 深色适配 随着深色模式的流行，越来越多的操作系统、浏览器开始支持深色模式，现在可以利用 CSS 的媒体查询方法：prefers-color-scheme (https://developer.mozilla.org...Web/CSS/@media/prefers-color-scheme) 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...主题背景和样式 主题背景和样式应避免使用旨在于浅色主题背景下使用的硬编码颜色或图标，您应改用主题背景属性（首选）或适合在夜间使用的资源，以下是需要了解的两个最重要的主题背景属性： ?...android:attr/textColorPrimary 这是一种通用型文本颜色，它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色，该颜色包含一个停用状态。 ?...Theme 指定的是浅色模式，darkTheme 指定的是深色模式，程序会根据系统设定的暗黑模式自动匹配模式。
该颜色槽使用的颜色值来自 Primary 色调调色板中的不同色调，并根据浅色和深色主题选择相应的色调，以满足无障碍功能要求。...颜色的来源，生成了非常适合 Jetchat 的 Material 3 配色方案，其中涵盖了用于浅色和深色主题的颜色。...，该函数接收一个用于判断深色主题的参数和一个应用内容参数，从而使我们可以在 Jetchat 的浅色和深色配色方案之间切换。...动态配色是 Material You 的重要部分，即用算法从用户的壁纸中提取自定义颜色并应用于应用和系统界面，您可将此作为起点来生成完整的浅色和深色配色方案。...12 及更高版本上，Jetchat 界面可根据用户壁纸自动调整配色，无论是浅色主题还是深色主题都可提供适合品牌的美观体验。
近年来，深色模式已成为网页设计的主要趋势，以其优雅的外观吸引访问者，并为传统的浅色主题界面带来了可喜的变化。深色模式在各种数字平台上变得越来越流行，包括操作系统、移动应用程序和网站。...称为“深色模式”（有时称为“夜间模式”或“深色主题”）的设计功能会修改用户界面的配色方案，使其主要使用深色或黑色背景以及浅色文本和图形元素。...深色模式使得界面比浅色主题界面不那么刺眼和刺眼，这使得用户的观看体验更加舒适。这对于对明亮屏幕敏感的人或在弱光下工作的人特别有帮助。...支持多种环境：喜欢在夜间或弱光条件下浏览网页的用户可以借助深色模式来实现。通过提供典型的浅色界面的深色主题替代方案，网站可以在不同的照明环境下满足用户的偏好和需求。...以下是一些需要记住的重要事项： 清晰的视觉提示：为了让用户轻松地在浅色和深色主题之间转换，请在深色模式可用并激活时清晰地显示视觉提示。
如何切换深色模式 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
这个主题可以让用户设计用户界面的配色，从比较早期的Windows开始（忘了具体是哪个版本）。Windows保留了高对比度的主题。...先不说这个和主流操作系统极度差异化的UI设计，这个暗色主题是真的很优秀。 来，聊聊暗色主题。Lumia 800作为WP的首发机型，使用的是AMOLED屏幕。这个带来了什么结果呢？...我认为由于不同的用户对于深色模式的预期不一样。有些用户的预期是一个低对比度的黑夜模式，有些用户只是想换个主题而已。导致设计师两边不讨好，有些产品的深色模式也是被骂的改了又改。...所以，不管是仅仅刷个深色主题，还是降低视觉刺激，这两边的用户需求都是合理的，其实并不冲突。因此在真正设计深色模式的。...深色模式并不是简单的把整个界面反色了那么简单，还是要考虑到所有用户的需求，在设计启动前期就定义了适配原则。 体验一致 1. 操作系统内体验一致：参照iOS其他原生App体验建立设计原则， 2.
color-scheme 属性有以下几个可能的取值： auto：表示使用用户代理（浏览器）的默认颜色方案。这通常是浏览器自动根据操作系统或用户设置选择的方案。 light：表示使用浅色颜色方案。...这通常包括浅色背景和深色文本。 dark：表示使用深色颜色方案。这通常包括深色背景和浅色文本。...通过指定适当的 color-scheme 值，开发者可以为网页提供不同的颜色方案，以适应用户的偏好或操作系统的设置。这有助于提供更好的可访问性和用户体验。...它告诉浏览器，网页希望适应用户代理（浏览器）的默认颜色方案，并同时支持浅色和深色模式。...如果用户代理处于浅色模式，网页将使用浅色颜色方案来呈现内容；如果用户代理处于深色模式，网页将使用深色颜色方案来呈现内容。
用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme 包含这个值。该值是 light 或 dark ，尽管 W3C 规范指出它可能支持未来的值，如 sepia。...正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。...，如果媒体查询是 dark，则将其转换为深色主题。...这意味着背景和前景的颜色是根据操作系统的设置而改变的！ 这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。...而这些变量然后被用于进一步的操作。 让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。
深色模式（Dark Mode），也被称为暗黑模式，是一种高对比度，或者反色模式的显示模式，开启之后在夜间可以缓解疲劳，更易于阅读，同时也能在一定程度上达到省电的效果。...iOS和安卓分别从 iOS 13 和 Android 10（不同厂商不尽相同，部分 Android 9 也支持） 开始加入深色模式的支持，各大浏览器纷纷开始支持深色模式，强如微信也终于在 iOS 客户端...7.0.12、Android 客户端 7.0.13 支持了深色模式，等网页端适配深色模式后将更进一步提高用户体验的一致性。...，用户无需单独设置深/浅色模式，完全根据系统设置来切换。...但白天不懂夜的黑，有的人就是喜欢一套深色主题用一天，这时就需要用户可以手动开启深色模式了。
作为一个主流趋势，深色系配色主题必然会逐渐适配到几乎全部的移动端产品上，让用户在低亮度环境下更舒适地和移动端界面进行交互。...通过使用可访问性较强的色彩对比度，来迎合需要深色主题的用户（比如视力不佳的用户）。...・限制色彩：在大面区域都使用深色色调的时候，尽量少地使用提亮色（浅色、低饱和度高明度的色彩、或者是高饱和度的色彩）。 拆解 深色UI主题主要呈现出的前景视觉是深色的，同时其他的色彩也较为稀少。...强调色 在深色主题当中，深色的背景和元素占据了 UI 的绝大部分。而强调色通常使用的是浅色（柔和且饱和度较低）或者明亮（饱和度高，鲜艳）的色彩，确保被强调的元素能够脱颖而出。...轮廓容器：不透明度为12%的白色 标签/图标：不透明度为38%的白色 色彩填充容器：不透明度为12%的白色 相关资源 Sticker sheet 是和 Sketch for Android 这套组件一起使用的
不过这个丑我是不背锅的，我只是为了演示自定义对话框的实现过程而已，具体对话框的丑和美还是掌握在你自己手里的。...我们都知道，从Android 10系统开始，Google引用了深色主题功能，一个出色的App在用户开启了深色主题模式之后，应该自动将界面也切换成深色模式。...而PermissionX同样对此功能进行了适配，在手机启用了深色主题模式之后，权限提醒对话框的效果如下图所示： ? 对话框上的颜色都是我精心调整过的，不管是深色主题还是浅色主题，看起来都会非常舒适。...这里setDialogTintColor()方法接收两个参数，其中第一个参数是设置浅色主题下的颜色值，第二个参数是设置深色主题下的颜色值。...既然是要自定义颜色值，那么肯定要把浅色主题和深色主题两种场景都考虑到才行。 现在重新运行程序之后，浅色主题和深色主题下的对话框效果分别如下图所示： ? ?
我们在 Android 10 中添加了新的系统导航模式，用户可以通过手势交互执行后退、返回至主屏以及打开设备助手等操作。 ?...△ Android 10 中新加入的手势交互 通过使用手势交互来执行系统导航，应用可以使用到更多的屏幕空间。这有助于您为用户打造更加沉浸的体验。 在大多数设备上，用户都能选择他们喜欢的导航模式。...具体来说，系统会执行以下两项操作之一: 动态颜色适配 系统栏里的内容会根据其后面的内容改变颜色。如果拖拽条位于浅色内容前方，它将变为深色，在深色内容前方时则变为浅色。 ?...比如针对深色主题的系统栏，可以先试试使用 70％ 不透明度的黑色进行遮盖: <!...对于浅色主题，可以试试使用半透明浅色遮盖 (如 #B3FFFFFF)。 ? △ 深浅两种主题的遮盖示例3. 处理视觉冲突
图为官方文档： ---- 浅色，黑色背景文字适配 .mdui-text-color-black-* 用于浅色背景。 .mdui-text-color-white-* 用于深色背景。...使用方法如图 主题颜色 MDUI 提供了主题功能，只需在 body 中加几个类即可实现主题切换功能，可切换的包括主色、强调色和背景色。....mdui-text-color-theme-[degree] 主题色 在 body 中添加类 .mdui-theme-layout-dark 即可把整个页面包括组件设置为深色背景。...在 body 中添加类 .mdui-theme-layout-auto 即可使整个页面包括组件的背景色根据操作系统的主题自动调整。...此外，在页面中使用下列类，这些类的颜色会根据主题色进行变化，浅色主题时显示为深色，深色主题时显示为浅色。
文章简介 现在，常见的操作系统，基本都已经适配了暗色/亮色模式，并提供API接口: macOS Mojave 10.14 开始提供了外观设置选项，支持设置 浅色 / 深色 外观。...Windows10 1809版开始支持亮色/暗色主题风格。 Android 10 (API 级别 29)开始支持深色主题背景（第三方OEM厂商可能有所差异）。 iOS13开始全面支持暗色模式。...[效果图] 媒体查询的优缺点 很多文章会介绍你直接使用媒体查询来适配暗色模式；的确高版本的浏览器，可以提供媒体查询功能，使用CSS，加入媒体判断即可： /\* 常规浅色模式下的网页背景颜色及文本颜色 \...不存在暗色模式标识符 用户进入网站，若之前没有手动点击网站上切换暗色/亮色按钮（不存在暗色模式标识符），则使用媒体查询检测用户是否有开启暗色模式，同步系统配色。...，是在用户点击某个元素，触发onclick函数事件，这边为还替换了页面id为nightMode标签内的图标： [图标替换] 系统配色切换监听 其实，配置已经基本配置完成，但是如果用户设置的是自动变换配色
前言 早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式： 然后这段期间给整上，本以为现在深色模式应用的挺广泛的...，在项目中实践了一下还是躺了很多坑，梳理一下实践过程及遇到的问题。...所有代码实践在云阅里可以看到： 下载App体验，酷安：云阅 直接查看源码，GitHub：CloudReader 项目实践 1.选定原生Api实现 Android官方深色主题背景开发文档(需科学上网...或Dark主题，不然切换深色模式的时候也不会改变效果。...它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。
Environment.isExternalStorageLegacy()) { } 这样的好处是你可以在用户升级后，能方便的将用户的数据移动至应用的特定目录。...4.深色主题 Android 10 新增了一个系统级的深色主题（在系统设置中开启）。虽然深色主题并不是强制适配项，但是它可以带给用户更好的体验： 可大幅减少耗电量。...如果您的应用采用浅色主题背景，则 Force Dark 会分析应用的每个视图，并在相应视图在屏幕上显示之前，自动应用深色主题背景。...应用必须选择启用 Force Dark，方法是在其主题背景中设置 android:forceDarkAllowed="true" 。...监听深色主题是否开启 首先在清单文件中给对应的Activity配置 android:configChanges="uiMode" ： <activity android:name=".MyActivity
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
