适配深色模式 苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了，就是适配深色模式。...首先，所有 UIKit 本身所提供的 UI 控件(例如 UIView，UILabel，UITextView等等) ，只要没有针对颜色等内容特殊设置过，都会自动适配深色模式，这部分是我们开发者不需要去关心的...在适配深色模式的过程中，作为开发者，我们其实只要解决俩个问题： 1、如何判断当前的系统的颜色模式？ 2、我们应该对哪些UI的内容适配深色模式？ 如何去判断当前系统的颜色模式？...颜色 在iOS13以后，UIKit给我们提供了很多的动态颜色，以system开头的都是动态颜色，当我们给 UI 控件设置了动态颜色以后。 UI 控件就会自动的根据当前是否是黑暗模式展现出来对应的颜色。...在 iOS 13 中， UIKit 为 UIColor 所提供的 新 API 来创建我们自己的动态颜色。
iOS13 引入该特性后各大应用和网站都开始支持了深色模式。...有没有更简单的深色模式映射切换？比如使用HSL替代RGB色值。 HSL色值的表达形式是通过色相、饱和度、亮度，既然深色模式是调整亮度和饱和度，那是否可以通过hsl色值来自动计算呢？...这种自动出暗色版本的色值还有待探索中，主要有两个原因：1）深色模式的舒适度不是线性亮度和饱和度映射能完成的，颜色的函数计算深色映射显得相对单调。2）实际情况是一个颜色可能会映射到多个暗黑场景的颜色。...在浅色搭配情况下可能很好看的颜色，放到深色下可能就会引起不舒适：不恰当的对比度会引起视觉上看不清晰；不恰当的色彩碰撞会引起反感；不恰当的饱和度、亮度会显得UI有点脏。...图4 一种白色的存在切换主题的多种映射 此时，自动通过色值计算就需要区分颜色的周边颜色或者底层叠加颜色来计算，这无疑加大了计算难度。 所以这块自动计算并不太容易，还需要一些的探索。
一、背景 在 2019 年，随着 iOS 13 与 Android Q 的推出，Apple 和 Google 同时推出主打功能暗黑模式，分别为 Dark Mode(iOS)/Dark Theme(Android...在前期预研中，我们发现 66% 的 iOS 13 用户选择打开Dark Theme，可见用户对暗黑模式的喜爱和期待。 那么 Dark Theme 能带来哪些好处呢？...3.1 iOS 我们为 iOS 13 以上用户提供了两种主题模式的选择： 自适应模式：跟随系统展示 Light/Dark 主题 强制 Light 模式：App 保持 Light 主题，不随系统主题变化...跟随系统切换主题需要考虑到 App 运行时，系统主题被切换的情况： 前往系统设置页手动切换 开启自动切换后，系统会自动更新主题 这两种情况都需 App 进入后台，所以只需要添加 App 进入前台的监听...此时直接对动态颜色或 ImageAssets 进行操作会取得错误的结果。所以对于这种场景，都不使用动态色或 ImageAssets，仅在发生主题切换时机进行视图刷新操作。
深色模式是如何进入我们的视野的？我们可以看到在过去的2年中，曾经出现过2个高峰。第一个高峰是去年WWDC，苹果第一次发布了iOS13的测试版，并且最大的特性就是支持了深色模式。...第二个高峰就是随着iOS 13随着iPhone 11系列正式发布，大量的App开始为深色模式适配。 深色模式到底有啥好的？ 为啥要做深色模式？...在浅色模式下，会加剧跑马边框和刘海的存在感，但是在深色模式下，界面UI就会立马和机身融为一体。这也是为何苹果也十分乐意拥抱深色模式的原因。 体验刷新：目前有很多手机系统或者App提供了换肤的功能。...太难了...一上深色模式马上就被骂 深色模式虽然好处多多，iOS 13正式上线也1年时间了，但是刚开始这段时间的好多App，每上线了深色模式，却被舆论推上了风口浪尖。...我认为由于不同的用户对于深色模式的预期不一样。有些用户的预期是一个低对比度的黑夜模式，有些用户只是想换个主题而已。导致设计师两边不讨好，有些产品的深色模式也是被骂的改了又改。
为了保持视觉连续性，防止界面元素变得过于醒目或缺乏吸引力，插图的变化有时需要改变附近的颜色。例如：地图在使用地图模式时显示浅色模式，但在卫星模式时切换到深色模式。...通常，为UI元素使用语义定义的系统颜色。 ? 动态系统颜色 除了以上系统颜色外，iOS还提供用于传达其目的而非其外观或颜色值的语义定义颜色。例如用于用于背景区域和前景内容的颜色，标签、分隔符和填充。...用户可以选择深色模式作为其默认界面风格，并且可以通过设置，使其设备在环境光线较低时自动切换到深色模式。由于用户在系统范围内做出这些选择，因此他们通常希望所有应用程序都能尊重他们的偏好。 ?...图像、图标和符号的颜色 iOS系统的SF符号，在深色模式下会自动显示效果，以及针对明暗外观优化的全彩色图像。 尽量使用SF符号。...文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。初级、次级、三级和四级标签颜色会自动适应浅色模式和深色模式下的外观。 使用系统视图绘制文本字段和文本视图。
静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。...黑暗模式支持所有辅助功能。 人们可以选择暗模式作为其默认界面风格，并且他们可以使用设置功能，使设备在环境光线较低时自动切换到黑暗模式。...艺术品的变化有时需要改变附近的颜色，以保持视觉连续性并防止界面元素变得过于强大或不足。例如，地图在使用地图模式时会显示浅色方案，但在激活卫星模式时会切换为深色方案。...请注意，千万不要滥用模态，因为他们仅仅是用到两种状态之间的切换，不要对用户造成困扰。（在任何时候，模态都要慎用，请注意。iOS 13 中的日历应用是一个经典的例子。）...3 情境菜单（Contextual Menu） 在iOS13及以后的版本中，你可以使用情境菜单（Context Menus）让用户访问与屏幕项目关联的其它功能而不用切换界面。 ?
背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。...native 深色适配 iOS 在 iOS 系统中，开发者从颜色和图片两个方面来进行适配，我们不需要关心切换模式后该怎么操作，因为这些都由系统帮我们实现。...当切换深色模式时，系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。...Theme 指定的是浅色模式，darkTheme 指定的是深色模式，程序会根据系统设定的暗黑模式自动匹配模式。
体验一番之后，小编发现，iOS这个版本在UI上最大的变化是增加了暗黑模式，回到两个月前，Android Q的测试版本中也重点推出了暗色模式。...早在One UI中，三星加入了全局的黑暗模式，开启后在自带的应用中能够生效，将AMOLED屏幕纯黑、省电的特殊性能发挥到了极致。 ?...根据小编的体验，发现目前这些功能并不能很好地适应系统的暗黑模式，大部分现在也不支持一键切换，或者是暗黑模式仅使用在部分功能中。...iOS 13中的暗黑模式（设备: iPhone XR） ?...开启：adb shell settings put secure ui_night_mode 2 关闭：adb shell settings put secure ui_night_mode 1 自动：
Force Dark的工作原理是系统会分析浅色主题应用下的每一层View，并且在这些View绘制到屏幕之前，自动将它们的颜色转换成更加适合深色主题的颜色。...然而，虽然现在界面中的主要内容都已经自动切换成了深色主题，但是你会发现标题栏和悬浮按钮仍然保持着和浅色主题时一样的颜色。...，DayNight主题是不能对这些颜色进行动态转换的。...虽说使用主题差异型的编程方式几乎可以帮你解决所有的适配问题，但是在DayNight主题下，我们最好还是尽量减少通过硬编码的方式来指定控件的颜色，而是应该更多地使用能够根据当前主题自动切换颜色的主题属性。...Configuration.UI_MODE_NIGHT_YES -> {} // 夜间模式启用，使用深色主题 } } 如果什么都不做的话，当前的Activity就好像并没有切换主题一样，界面上也不会有任何变化
Tailwindcss好在，就是有大量给予它开发的组件，比如我用的： NuxtLabs UI: https://ui.nuxtlabs.com/getting-started 深色模式实现 现在，我们确定了使用的技术框架和使用的样式...切换模式 上述的思路已经完成，我们切换亮色和深色的方法，就是在标签上，加上class="dark"即可。...'system'，则会根据用户的系统设置自动选择颜色模式 // 默认值为 'system' preference: 'system', // 回退颜色模式，可以是 'light' 或 '...，用于在本地存储中存储颜色模式的值 }, 最后，我们定义一个组件按钮，用于切换深色模式： // components/ColorModeButtom.vue let colorMode...写在最后 好啦，本次“如何优雅实现深色模式切换？”的分享，就到这里啦。
一、背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...如何切换深色模式 iOS：“设置”--“显示与亮度”--“外观”，选择“深色” Android：“系统设置”--“显示”--“深色模式”。...1.1meta 在head中声明，声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时...，浏览器默认样式也会切换到深色； 1.2CSS 下面的 css 同样可以实现上面 meta 声明的效果 :root { color-scheme: light dark; } 注意：此声明并非为页面做自动适配...)字符串解析后的结果。
(android.os.Process.myPid()); } } } 3.在Application里初始化 NightModeUtil.initNightMode(); 4.切换状态后重启...ToolbarStyle" parent="@style/ThemeOverlay.AppCompat.ActionBar"/>， popupTheme也不能设置单个的Light或Dark主题，不然切换深色模式的时候也不会改变效果...6.WebView的深色模式设置 引入implementation 'androidx.webkit:webkit:1.2.0'后可轻易的实现WebView的深色模式，不过有兼容问题，这和WebView...颜色：新建values-night文件夹，里面是深色模式下的colors.xml文件 图片：新建drawable-night-xxhdpi图片文件夹 2).启动页我们经常会放品牌图，页面的深色模式可以通过...5).在dialog打开后，再切换系统的深色模式，这时使用系统的颜色会不生效，需要使用自己的color文件里的颜色。具体出现在首次打开应用时，弹出的隐私弹框。
iOS 13 的发推出了深色模式（Dark Mode），不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。 ...在 macOS 的深色模式中，基底色并不是纯黑，而是带有一定灰度的黑色。 在 iOS 上，苹果设计 Dark Mode 的基底色就是纯黑，这样一方面来可以省电，另一方面也与「刘海」的衔接更加自然。...论是浅色还是深色外观下，我们都应该在界面层级中，让离用户在逻辑关系上更近的颜色更亮一些。 再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。...这样，不管是浅色还是深色外观下，始终都保持了逻辑上的统一：离用户逻辑关系上越近的层级，颜色越浅越亮一些。 界面层级与明暗的逻辑关系，本质上是与颜色反转不兼容的。...你可以在这里下载苹果官方提供的 iOS 13设计模板的 Sketch 文件，其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。
SPA 的模式不适合 APP 开发，DIV＋JS 的窗口切换影响用户体验。...为了不影响窗体切换动画的执行，可以在切换动画执行完毕后再进行动态数据的加载和界面的刷新。 7....Frame 要有明显的刷新机制，不能每次切换都进行刷新和重绘。...下拉刷新效果： 建议不要使用 APICloud 默认的下拉刷新效果（灰色箭头），要使用模块来实现 UE/UI 所设计的下拉刷新效果。...键盘处理： 在打开带有输入框的 Window 或 Frame 的是，默认要自动让输入框自动获得焦点。
Android 10 (API 级别 29)开始支持深色主题背景（第三方OEM厂商可能有所差异）。 iOS13开始全面支持暗色模式。 那么，我们自己的网站如何适配暗色/亮色模式呢？...[效果图] 媒体查询的优缺点 很多文章会介绍你直接使用媒体查询来适配暗色模式；的确高版本的浏览器，可以提供媒体查询功能，使用CSS，加入媒体判断即可： /\* 常规浅色模式下的网页背景颜色及文本颜色 \...*/ body { background: #fff; color: #222; } /\* 深色模式下的网页背景颜色及文本颜色 \*/ @media (prefers-color-scheme...： 举个例子，有些用户习惯把系统长期设置为暗色模式，访问你网站时，想看清你网站的图片，希望调整成亮色模式，却必须到系统设置内，手动把系统配色调成亮色再刷新网站，体验差。...，如Mac用户的外观自动： [4ga1nx6dax.png] 在系统自动切换暗色/亮色的同时，如何让网站也一同切换？
3大界面要素 (Interface Essentials) 大多数iOS应用都是由UI Kit中的组件构建的。...在iOS 13及更高版本中，默认情况下，大标题导航栏不包含背景材质或阴影。另外，随着页面滑动，大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...在iOS 13及更高版本中，可以通过删除导航栏的阴影来隐藏导航栏的底部边框（当滑动内容区域时，边框会自动重新出现）。无边框样式在大标题导航栏中效果很好，因为它增强了标题和内容之间的联系感。...在iOS 13及更高版本中，您可以使用SF符号来表示选项卡栏项目。在所有版本的iOS中，系统API提供了一系列预设图标。当然你也可以自定义图标。...工具栏是半透明的，也可以添加背景颜色，并在用户不需要它们时应该隐藏起来。 例如：在Safari中，当你开始滚动页面时，工具栏会自动隐藏，因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。
在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。 ? 在WWDC 2019大会上，苹果公布了iOS 13的所有新功能。...在所有超级令人兴奋的功能中，关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人，您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13后，人们可以选择采用深色系统外观。...每个按钮都有不同的颜色，iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同（或分组）内容的元素。 ? 需要注意，黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。...必须为所有元素分配一组单独的颜色，也就是说，你必须重新设计它们。 如下所示，在明亮模式下纯白色不会在黑暗模式下转换为纯黑色。所以，不要在深色模式下反转颜色。 ?...那么，是否必须以这种方式使用这些颜色？不。如前所述，你可以随意使用所有10种颜色（4种填充+ 6种灰色）。 06 分隔线颜色 iOS规范为我们提供了分隔线的2种变体。一个是不透明的，另一个是透明的。
黑暗模式是炒作吗？ 长时间使用“亮色模式”后，“黑暗模式”感觉就像呼吸新鲜空气。...彭博社的应用程序 同样的情况也适用于iOS中的股票应用和健康及活动应用，这些应用甚至在宣布Dark Mode之前就使用Dark UI。 ?...自从Dark UI普及以来，我们被宣传说，这种模式可以节省电量。但事实并非如此：除非您的手机配备了OLED屏幕，否则您将不会从中受益。 通常的LED屏幕需要背光以显示颜色，甚至是黑色。...另外，在Android系统中，有一个非常有用的功能，称为“允许强制深色”。基本上，这是Android的自动暗模式。它会与黑暗模式兼容，虽然不完美，但是看起来还不错。...浅色和深色模式下的iPhone屏幕 如果图标颜色在明暗模式切换时不变，也许并不合适。
活动指示器： 当任务进行和加载时旋转，任务完成后自动消失 不支持用户交互行为 在工具栏或主视图中使用活动指示器来告知用户任务或加载正在进行中，但并不提示该过程何时会结束。 不要使用静止的活动指示器。...API注释 想要了解如何在代码中定义信息按钮，可以参考UIButton. iOS包含了两种信息按钮样式：适用于浅色内容上的深色按钮，以及适用于深色内容上的浅色按钮。...（想要了解关于app中字体使用的指南，可以参考 Color and Typography;想要了解更多动态文本的内容，可以参考 Text Programming Guide for iOS 里面 的 Text...就算你使用了刷新控件，也不要因此就不支持内容自动刷新。尽管用户喜欢在执行刷新操作时内容立刻刷新，他们也同样会喜欢内容自动刷新。...如果过于一来用户自己执行所有刷新操作的话，那些不会自动刷新的用户就会疑惑，为何你app中的数据永远都不更新。
领取专属 10元无门槛券
手把手带您无忧上云
