IOS 13深色模式强调色 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

iOS——配适深色模式

适配深色模式苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了，就是适配深色模式。...颜色在iOS13以后，UIKit给我们提供了很多的动态颜色，以system开头的都是动态颜色，当我们给 UI 控件设置了动态颜色以后。 UI 控件就会自动的根据当前是否是黑暗模式展现出来对应的颜色。...在 iOS 13 中， UIKit 为 UIColor 所提供的新 API 来创建我们自己的动态颜色。...initWithEffect:effect]; effectView.frame = self.view.bounds; [self.view addSubview:effectView]; （滑动显示更多）在iOS13...h5界面适配深色模式如果工程中有嵌套h5界面，那h5界面的内容可能也需要做深色模式的适配。可以使用prefers-color-scheme来指定深色模式和浅色模式下的css样式。

2.1K1 0

苹果iOS 13 新设计规范全面解析

静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。...这次的规范重点讲解了iOS 13的Dark Mode，也就是黑暗模式，另外还有一些新的菜单及设计改动。...无论在深色或者浅色模式，都能呈现出良好的对比度。如下图所示。 ? 同样的，iOS 13也提供了三种默认的背景色供我们选择，包含系统背景，二级和三级背景。...在使用设计师自己指定的颜色的时候，要确保在两种模式下的对比度都足够强，如下图点睛色指定了橙色，黑暗模式下使用白色，浅色模式下使用黑色文字，则对比度必须要拉大，确保应用的可读性足够好。 ?...iOS 13 中的日历应用是一个经典的例子。）

5.4K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

iOS应用黑暗模式设计终极指南（附套件下载）

在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。 ? 在WWDC 2019大会上，苹果公布了iOS 13的所有新功能。...在所有超级令人兴奋的功能中，关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人，您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13后，人们可以选择采用深色系统外观。...每个按钮都有不同的颜色，iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同（或分组）内容的元素。 ? 需要注意，黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。...如下所示，在明亮模式下纯白色不会在黑暗模式下转换为纯黑色。所以，不要在深色模式下反转颜色。 ? 04 语义化颜色接下来我们谈谈语义化颜色（语义化颜色是针对开发工程师的，设计师可以简单看一下）。...08 强调色（Tint Color） Apple提供了9种不同的强调颜色，可在整个应用程序中使用。它们可用于文本，图标或形状。我将下面的强调色改为不同颜色，你会发现他们会变成这样的: ?

4.4K1 0

快速适配 Flutter 之深色模式

深色模式（Dark Mode），也被称为暗黑模式，是一种高对比度，或者反色模式的显示模式，开启之后在夜间可以缓解疲劳，更易于阅读，同时也能在一定程度上达到省电的效果。...iOS和安卓分别从 iOS 13 和 Android 10（不同厂商不尽相同，部分 Android 9 也支持）开始加入深色模式的支持，各大浏览器纷纷开始支持深色模式，强如微信也终于在 iOS 客户端...7.0.12、Android 客户端 7.0.13 支持了深色模式，等网页端适配深色模式后将更进一步提高用户体验的一致性。...但白天不懂夜的黑，有的人就是喜欢一套深色主题用一天，这时就需要用户可以手动开启深色模式了。...选择深色模式接下来如果想要切换深色模式，我们只需要执行下面这行代码即可。

2.2K5 1

Android App Dark Theme（暗黑模式）适配指南

在 2019 年的 Google I/O 和 Apple WWDC 上，新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说的暗黑模式，并提供相关 API...暗色主题的 App 比比皆是，但是让 Android 和 iOS 从系统层级支持暗黑模式还是头一次。也许是用户的呼声也许是工业的推动，发展得益于进步和反馈，暗黑模式就这样来到了你我的手机上。...如果您的应用采用浅色主题背景，则 Force Dark 会分析应用的每个视图，并在相应视图在屏幕上显示之前，自动应用深色主题背景。...Android Q 深色模式（Dark Mode）源码解析juejin.im 自定义适配自定义适配的关键在于，避免一切硬编码的颜色值，建立 light 、night 两份 colors，通过定义相同的名字...Material Design Components 中内置了 12 种不同场景的颜色属性，分别为主强调色、次强调色，背景颜色、表面颜色、错误颜色、以及字体和 icon 的颜色（以 on 开头的）。

6.1K2 0

互联网移动端即将进入“暗黑时代”

2019-移动端将开启“暗黑时代” 2019-6-3 苹果全球开发者大会 iOS 13发布 - 新增暗黑模式 2019-5-7 Google I/O 2019 Android Q发布 - 推出暗色模式...2018-9 MacOS Mojave增加了深色模式 2018-10 Windows 10新版本中增加了暗黑主题模式 2017-11 Kindle Oasis推出黑白调换功能，支持深色模式...iOS 13中的暗黑模式（设备: iPhone XR） ?...Android Q beta 3中的暗黑模式（设备: Pixel 2）根据小编近期使用Android Q和iOS 13的感受来看，iOS的暗黑模式比Android的暗色模式做的更出色一些，尤其是在本机...3 暗黑模式的开启方法现阶段（正式版发布之前），想要进入暗黑模式，只能升级到Android Q/iOS 13的测试版本。

1.8K2 0

Flutter中的Material Theme完全指南：从入门到实战

灵活性：支持动态主题切换，例如白天/夜间模式。如何在Flutter中使用Material Theme？在Flutter中，Material Theme的核心是ThemeData对象。...调整配色：支持自动生成Light和Dark模式的调色板。导出代码：一键导出Flutter、CSS或iOS平台的主题代码。...secondary: Color(0xFFFF9800), // 自定义次要颜色 ), useMaterial3: true, // 启用Material Design 3 ), 多场景实践场景1：动态切换深色.../浅色模式 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return...MaterialApp( theme: ThemeData.light(), // 浅色模式 darkTheme: ThemeData.dark(), // 深色模式

1K0 0

Material Design Lite，简洁惊艳的前端工具箱

自metro和ios7开始的扁平化设计语言则相反，它着意去掉冗余的装饰效果（比如透视、纹理、渐变等等能做出3D效果的元素），让“信息”本身重新作为核心被凸显出来。...最多用两个调色板在一个界面中最多使用两个调色板，从主调色板选择最多三个色调，从辅调色板选择一个强调色。...为文本、图标和分割线应用透明度通过为文本设置透明度来表达文本的相对重要性：对于深色背景的浅色文字，最重要的文本使用87%的透明度，次重要的文本使用54%的透明度。...对于浅色背景的深色文字，最重要的文本使用100%的透明度，次重要的文本使用70%的透明度，其他文本使用30%的透明度。 3....在下面的示例中，左图的工具栏和右图的大色块，使用了indigo调色板中的色调 500的基准色；而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色： 4.

1.3K1 0

Material Design Lite ，简洁惊艳的前端工具箱

自metro和ios7开始的扁平化设计语言则相反，它着意去掉冗余的装饰效果（比如透视、纹理、渐变等等能做出3D效果的元素），让“信息”本身重新作为核心被凸显出来。...最多用两个调色板在一个界面中最多使用两个调色板，从主调色板选择最多三个色调，从辅调色板选择一个强调色。...对于深色背景的浅色文字，最重要的文本使用87%的透明度，次重要的文本使用54%的透明度。提示性文本，例如输入框、标签、被禁止的文字等使用26%的透明度。...对于浅色背景的深色文字，最重要的文本使用100%的透明度，次重要的文本使用70%的透明度，其他文本使用30%的透明度。 3....在下面的示例中，左图的工具栏和右图的大色块，使用了indigo调色板中的色调 500的基准色；而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色： ? 4.

1.6K3 0

DarkMode(1)：产品应用深色模式分析

iOS 13 的发推出了深色模式（Dark Mode），不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。 ...在 macOS 的深色模式中，基底色并不是纯黑，而是带有一定灰度的黑色。在 iOS 上，苹果设计 Dark Mode 的基底色就是纯黑，这样一方面来可以省电，另一方面也与「刘海」的衔接更加自然。...论是浅色还是深色外观下，我们都应该在界面层级中，让离用户在逻辑关系上更近的颜色更亮一些。再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。...你可以在这里下载苹果官方提供的 iOS 13设计模板的 Sketch 文件，其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。...例如，深色模式其实未必适合文字的阅读，以及即使开启了深色模式，在昏暗环境中使用电子设备对视力的伤害也不容小觑。

2.5K2 0

iOS13 关闭黑暗模式+状态栏显示问题解决方法

toc 现象： iOS13黑暗模式开启后，app显示会出现很多意外显示情况。暂时屏蔽是最好的选择。...当开启黑暗模式，且在项目的target对应的info.plist中添加以下设置时（禁用黑暗模式）： UIUserInterfaceStyle Light app在系统黑暗模式下可以正常显示了。

2.7K1 0

WPF for .NET 9 中的新增功能

它包括集成的明暗模式，以及系统强调色支持。...浅色模式下的 Fluent 主题：深色模式下的 Fluent 主题：应用主题可以通过两种方式应用 Fluent 主题：设置属性或引用 Fluent 主题资源字典。...Dark应用深色 Fluent 主题。 System根据用户的当前 Windows 设置应用浅色或深色 Fluent 主题。 None（默认）使用 Aero2 主题。...除了颜色本身，还有强调色的浅色和深色可供选择。...创建使用强调色的 UI 时，将资源键包装在动态资源中。当用户在打开应用时更改强调色时，应用中的颜色会自动更新。

1K1 0

谷歌MD深色主题设计规范详解（附Sketch官方文件下载）

用法深色主题将会让 UI 的绝大部分以深色来呈现。它是作为默认主题（浅色主题）的一个补充模式而存在。深色主题将会降低设备屏幕的显示亮度，同时仍保持最低程度的色彩对比度。...深色模式下，不要使用黑色，而是使用深灰色，用来呈现较环境中的高程和大范围的区域。色彩与调性 ? 在深色主题的UI当中，尽可能使用数量有限的色彩，确保绝大部分的区域需要保持深色。...可访问性强的不饱和色彩深色主题应该尽量避免使用高饱和度的色彩，因为它们多数不能够达到 WCAG 对于文本的对比度要求（4.5:1）。高饱和度的色彩能够在深色背景上产生炫光的视觉效果，产生视觉疲劳。...强调色在深色主题当中，深色的背景和元素占据了 UI 的绝大部分。而强调色通常使用的是浅色（柔和且饱和度较低）或者明亮（饱和度高，鲜艳）的色彩，确保被强调的元素能够脱颖而出。...你可以为你的深色模式色彩主题选择更合理的色彩，来构建配色。 ?

11.3K1 0

.NET 9 中为 WPF 新增的功能

它包括集成的明暗模式，以及系统强调色支持。...浅色模式下的 Fluent 主题：深色模式下的 Fluent 主题：应用主题可以通过两种方式应用 Fluent 主题：设置属性或引用 Fluent 主题资源字典。...Dark应用深色 Fluent 主题。 System根据用户的当前 Windows 设置应用浅色或深色 Fluent 主题。 None（默认）使用 Aero2 主题。...除了颜色本身，还有强调色的浅色和深色可供选择。...创建使用强调色的 UI 时，将资源键包装在动态资源中。当用户在打开应用时更改强调色时，应用中的颜色会自动更新。

1.3K1 0

科研绘图配色

不同的颜色表示不同的分组，相近的颜色表示同一个分组；配色需要展现数据逻辑关系，突出关键数据，比如重要的数据用深色或暖色表示，不重要的数据用浅色或冷色表示。色彩种类两到三种。...比较窄的柱体建议用深色，比较宽的柱体建议用浅色。如果使用深色，建议添加透明度，降低其饱和度色彩。两列数据的配色推荐选用不太接近的颜色实现对比的目的。...【饼图配色】饼图颜色较多，建议使用软件内置颜色方案，面积小的区域使用深色系。【折线图配色】重叠的折线不能太多，如果超过四条，建议改用堆叠折线图或者其他图形表达方式。...配色可以把点设为深色，然后提高颜色的透明度。【等高线图和热图配色】颜色多，图线多，建议用配色方案，通常用双色或者三色渐变的方案。...它提供三种配色模式，调色板、渐变色、三色渐变，我们可以生成调色板或从我们选择的颜色创建漂亮的CSS渐变。

5.7K1 0

你说的黑是什么黑

近一年，随着iOS和安卓陆续支持了深色模式，各个团队的一通操作，也的确为用户带来“眼前一黑”的体验。深色模式也成为了前阵子业界最火的话题之一。...深色模式是如何进入我们的视野的？我们可以看到在过去的2年中，曾经出现过2个高峰。第一个高峰是去年WWDC，苹果第一次发布了iOS13的测试版，并且最大的特性就是支持了深色模式。...第二个高峰就是随着iOS 13随着iPhone 11系列正式发布，大量的App开始为深色模式适配。深色模式到底有啥好的？为啥要做深色模式？...太难了...一上深色模式马上就被骂深色模式虽然好处多多，iOS 13正式上线也1年时间了，但是刚开始这段时间的好多App，每上线了深色模式，却被舆论推上了风口浪尖。...暗黑模式 or 黑夜模式？随着iOS和Android系统级支持，正式把深色模式带进了寻常百姓家。不同的产品大面积的开始适配深色模式。现在的深色模式。

1.3K2 0

一篇文带你了解黑暗UI模式的过去，现在和未来

在19年的WWDC期间，苹果在iOS上引入了 Dark Mode。...即使深色模式概念还没有发布，某些产品（如奢侈品牌，流媒体服务）也使用了深色的用户界面……为了传达一种高贵的感觉，使内容更加凸显，并结合使用场景（您最有可能在晚上在昏暗的房间中使用流媒体服务，从而使黑暗的...MD设计中的深色和浅色模式主色调整 ? · 更新配色我们必须为黑暗模式单独设定一套调色板。请记住，某些内容可以在浅色模式下共享同样的颜色，但是在黑暗模式下，则可能不行。 ?...黑暗模式的未来从黑暗模式的使用率来看，我们可以肯定iOS14和Android 11会有新的功能出现。比如主屏幕变成这样的： ?...浅色和深色模式下的iPhone屏幕如果图标颜色在明暗模式切换时不变，也许并不合适。

2K5 0

如何让你的网站支持苹果系列的深色Dark模式

就在前几天 9 月 20 日凌晨，苹果正式推送 iOS13、iPadOS13，iPhone 和 iPad 的深色模式也终于来了我也是直接换上了 iPad 的深色模式，mbp 使用正常的浅色模式，访问自己网站的时候发现一个问题...，就是下面这个引用样式有些问题我是一个引用段落在未修复前，深色模式看的话就是一片空白，因为深色模式的字体是白色，同时给了一个background-color:#f5f5f5样式所导致这个是不能忍的...，此属性有三个值 no-preference表示用户未指定操作系统模式，其作为布尔值时以 false 输出 light表示用户的操作系统是浅色模式 dark表示用户的操作系统是深色模式它的用法也是很简单...: dark) { /* 深色模式样式 */ } 就酱紫。...任何个人或团体，未经允许禁止转载本文：《如何让你的网站支持苹果系列的深色Dark模式》，谢谢合作！

1.2K4 0

H5 项目如何适配暗黑模式

一、背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...深色模式不仅可以大幅减少电量的消耗，减弱强光对比,还能提供更好的可视性和沉浸感。...如何切换深色模式 iOS：“设置”--“显示与亮度”--“外观”，选择“深色” Android：“系统设置”--“显示”--“深色模式”。...二、问题如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。所以，需要对深色模式进行一些适配。...我尝试了一些方案：三、H5项目适配深色模式方案 1.声明 color-scheme color-scheme 有两种方式。

3.3K5 0

最新iOS设计规范八｜3大图标和图像规范（Icons and Images)

将8位调色板用于不需要全24位颜色的PNG图形。使用8位调色板可以减小文件大小，而不会降低图像质量。此调色板不适用于照片。优化JPEG文件以在大小和质量之间找到平衡。...您无法预测人们会为他们的主屏幕选择哪些壁纸，因此，不要仅仅针对浅色或深色测试您的应用。查看不同照片的外观。在具有动态背景的实际设备上尝试使用该设备，该动态背景会随着设备的移动而改变视角。...例如：一个体育APP可能为不同的球队提供图标，或者一个有明暗模式的APP可能会提供相应的明暗图标。请注意，APP图标只能根据用户的请求进行更改，并且系统始终会向用户提供此类更改的确认。...三、系统图标（System Icons）iOS12及更早版本在iOS 13或更高版本中，更习惯使用SF符号来表示APP中的任务和模式。...当你的APP在iOS 12或更早版本中运行时，请按照以下指南操作。系统提供内置图标，表示各种用例中的常见任务和内容类型。

4.3K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭