开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何允许用户在iOS上打开应用程序的情况下切换到深色或浅色模式？

在iOS上允许用户在应用程序中切换深色或浅色模式，可以通过以下步骤实现：

支持深色模式：首先，确保你的应用程序已经适配了深色模式。在iOS 13及以上版本中，系统会自动根据用户的设置切换到深色或浅色模式。你可以通过使用系统提供的动态颜色和动态图片资源，以及在界面中使用适配深色模式的颜色和样式来实现。
检测用户设置：为了允许用户在应用程序中切换深色或浅色模式，你需要检测用户的设置。可以通过访问UITraitCollection对象的userInterfaceStyle属性来获取当前用户设置的模式。该属性的值为UIUserInterfaceStyle枚举类型，可以是.light（浅色模式）或.dark（深色模式）。
提供切换选项：在你的应用程序中，可以提供一个切换选项，让用户自由选择深色或浅色模式。可以使用UISwitch或其他自定义控件来实现切换按钮。当用户切换模式时，你可以根据用户的选择来更新应用程序的界面样式。
更新界面样式：当用户选择切换模式时，你需要更新应用程序的界面样式。可以通过以下方式来实现：
- 使用动态颜色和动态图片资源：在界面中使用动态颜色和动态图片资源，这样系统会根据用户的模式设置自动加载对应的资源。可以使用UIColor的init(dynamicProvider:)方法创建动态颜色，使用UIImage的init(named:in:compatibleWith:)方法加载动态图片资源。
- 更新界面元素：遍历应用程序的视图层级，根据用户选择的模式更新每个界面元素的颜色、样式和背景图像等。

保存用户设置：为了保持用户的选择，可以将用户的模式设置保存在应用程序的偏好设置中，或者使用其他持久化方式进行保存。这样，在用户下次打开应用程序时，可以根据保存的设置来恢复用户的模式选择。

腾讯云相关产品和产品介绍链接地址：

腾讯云移动应用分析（MTA）：https://cloud.tencent.com/product/mta
腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns
腾讯云移动直播（MLVB）：https://cloud.tencent.com/product/mlvb
腾讯云移动短信（SMS）：https://cloud.tencent.com/product/sms
腾讯云移动智能（MIP）：https://cloud.tencent.com/product/mip

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

关于如何设计黑暗模式，苹果也给出了几点建议。在iOS 13.0及更高版本中，人们可以选择采用称为黑暗模式外观。在暗模式下，系统为所有屏幕，视图，菜单和控件使用较暗的配色，使前景内容在较暗的背景下突出。...您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。...艺术品的变化有时需要改变附近的颜色，以保持视觉连续性并防止界面元素变得过于强大或不足。例如，地图在使用地图模式时会显示浅色方案，但在激活卫星模式时会切换为深色方案。...当您需要自定义颜色时，将颜色集资源添加到应用程序的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。避免使用硬编码的颜色值或不适应的颜色。 ?...在下图中，我们可以体会下黑色模式和浅色模式下，同一种颜色对于用户视觉的影响，是不一样的，要保证在两种模式下都有更好的对比度和可读性，需要设计师更严谨的配色。 ? 柔化白色背景的颜色。

4.4K4 0

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

在19年的WWDC期间，苹果在iOS上引入了 Dark Mode。...这种情况下，它是没有切换黑暗模式和浅色模式的选择的，因为它仅仅是一种设计选择。 ? 手表官网设计我们还必须承认，有些人确实患有无法使用亮色模式。视力障碍或畏光的人将从黑暗模式中受益匪浅。...另外，在Android系统中，有一个非常有用的功能，称为“允许强制深色”。基本上，这是Android的自动暗模式。它会与黑暗模式兼容，虽然不完美，但是看起来还不错。...· 考虑更改你的主色应该避免在黑暗模式下使用过于饱和的颜色：它们可能太亮和/或降低了可读性。Google Material Design建议在浅色模式下使用500色度，在深色模式下使用200。...您可以在WGAG上检查对比度是否合格。 ? MD设计中的深色和浅色模式主色调整 ? · 更新配色我们必须为黑暗模式单独设定一套调色板。

1.3K5 0

最新iOS设计规范七｜10大视觉规范（Visual Design）

用户希望能在两种类型的iOS设备上都能使用您的应用程序。如果应用程序的某些功能需要iPhone专用的硬件（例如电话），请考虑在iPad上隐藏或禁用这些功能，并让用户使用您应用程序的其他功能。 ?...因为这些颜色无论是单独还是组合在一起，在浅色模式和深色模式下都会很好看。明智地使用颜色与用户交流。当一种颜色被谨慎或很少使用时，它能明显提高用户的注意力。...为了保持视觉连续性，防止界面元素变得过于醒目或缺乏吸引力，插图的变化有时需要改变附近的颜色。例如：地图在使用地图模式时显示浅色模式，但在卫星模式时切换到深色模式。...用户可以选择深色模式作为其默认界面风格，并且可以通过设置，使其设备在环境光线较低时自动切换到深色模式。由于用户在系统范围内做出这些选择，因此他们通常希望所有应用程序都能尊重他们的偏好。 ?...在一种外观上运作良好的设计可能在另一种外观上无法运作。调整对比度和透明度可访问性设置时，请确保在黑暗模式下内容清晰易读。在暗模式下，应单独或一起打开“增加对比度”和“减少透明度”来测试内容。

7.8K3 0

H5 项目如何适配暗黑模式

一、背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...如何切换深色模式 iOS：“设置”--“显示与亮度”--“外观”，选择“深色” Android：“系统设置”--“显示”--“深色模式”。...二、问题如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。所以，需要对深色模式进行一些适配。...1.1meta 在head中声明，声明当前页面支持 light 和 dark 两种模式，系统切换到深色模式时...no-preference 表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。 light 表示用户已告知系统他们选择使用浅色主题的界面。

2.2K5 0

深色模式适配指南

背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...，这里设其为默认值，在适配不成功情况下，可以保持适配前的样式。...native 深色适配 iOS 在 iOS 系统中，开发者从颜色和图片两个方面来进行适配，我们不需要关心切换模式后该怎么操作，因为这些都由系统帮我们实现。...）启用深色主题背景使用"快捷设置"图块，从通知托盘中切换主题背景（启用后）在 Pixel 设备上，选择"省电模式"将同时启用深色主题背景，其他原始设备制造商 (OEM) 不一定支持这种行为在应用中支持深色主题背景...Flutter 这里以 Flutter 为例，简单介绍下跨平台开发框架如何适配深色模式。Flutter 定义主题有两种方式：全局主题或使用 Theme 来定义应用程序局部的颜色和字体样式。

2.7K3 1

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

那么，颜色反转实际上，是把一种颜色（R，G，B），自动变换到它的对立面，成为新的颜色（255-R，255-G，255-B）。...论是浅色还是深色外观下，我们都应该在界面层级中，让离用户在逻辑关系上更近的颜色更亮一些。再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。...这样，不管是浅色还是深色外观下，始终都保持了逻辑上的统一：离用户逻辑关系上越近的层级，颜色越浅越亮一些。界面层级与明暗的逻辑关系，本质上是与颜色反转不兼容的。...背景色区分基底色（Base）与提亮色（Elevated）在设计难点中我们提到了，层级上离用户越近的区域，应该在视觉上更明亮一些。苹果在设计 Dark Mode 时，也充分考虑到了这一点。...值得注意的是，在浅色模式下，许多元素是存在投影的，例如开关按钮、拖动条的拉动点……而到了深色外观中，这些投影被统统移除了，这也是苹果设计的细微精致之处。

1.7K2 0

VS Code 1.69 发布：允许快速解决 Git 合并冲突

注意 checkbox 是如何按预期更新的：关闭合并编辑器或接受合并时，如果未解决所有冲突，则会显示警告。...单击 main section 以显示带有你最近的文件和搜索框的快速打开下拉菜单。请勿打扰模式 - 使非关键通知弹出窗口静音。该模式在启用时会隐藏所有非错误通知弹出窗口。...进度通知将自动显示在状态栏中。隐藏的通知仍然可以在通知中心查看。切换浅色 / 深色主题 - 在首选的浅色和深色主题之间快速切换。...一个新命令允许你在喜欢的浅色和深色主题之间进行切换，Preferences: Toggle between Light/Dark Themes。当处于浅色主题时，该命令切换到深色主题，反之亦然。...Shell 集成允许 VS Code 的终端更多地了解 Shell 内部发生的事情，以启用更多功能。shell 集成的目标之一是使其能够在零配置的情况下工作。

3.4K1 0

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

就在前几天 9 月 20 日凌晨，苹果正式推送 iOS13、iPadOS13，iPhone 和 iPad 的深色模式也终于来了我也是直接换上了 iPad 的深色模式，mbp 使用正常的浅色模式，访问自己网站的时候发现一个问题...，就是下面这个引用样式有些问题我是一个引用段落在未修复前，深色模式看的话就是一片空白，因为深色模式的字体是白色，同时给了一个background-color:#f5f5f5样式所导致这个是不能忍的...，苹果用户还是蛮多的，并且 Safari、Chrome 目前都支持深色模式，所以来适配一下这里需要用到一个媒体查询@media的语法 prefers-color-scheme 用于检测用户的系统主题是浅色或深色...，此属性有三个值 no-preference表示用户未指定操作系统模式，其作为布尔值时以 false 输出 light表示用户的操作系统是浅色模式 dark表示用户的操作系统是深色模式它的用法也是很简单...沈唁志，一个PHPer的成长之路！任何个人或团体，未经允许禁止转载本文：《如何让你的网站支持苹果系列的深色Dark模式》，谢谢合作！

8454 0

Android 10适配要点，深色主题

我们一直以来使用的操作系统都是以浅色主题为主的，这种主题模式在白天或者是光线充足的情况下使用起来没有任何问题，可是在夜晚灯光关闭的情况下使用就会显得非常刺眼。...于是，许多应用程序为了能够让用户在光线昏暗的环境下更加舒适地使用，会在应用内部提供一个一键切换夜间模式的按钮。当用户开启了夜间模式，就会将应用程序的整体色调都调整成更加适合于夜间浏览的颜色。...不过，如果这时你打开我们自己编写的应用程序，你会发现目前界面的风格还是使用的浅色主题模式，这就和系统的主题风格不同了，说明我们需要对此进行适配。...因此，在普通情况下MaterialTest项目仍然会使用浅色主题，和之前并没有什么区别，但是一旦用户在系统设置中开启了深色主题，MaterialTest项目就会自动使用相应的深色主题。...我个人认为，在绝大多数情况下，让应用程序跟随系统的设置来决定使用浅色主题还是深色主题是最合适的一种做法。

1.7K1 0

如何在 React 中快速实现暗黑模式

暗黑模式已成为许多应用程序和网站的最基本功能，因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。...接下来让我们看看如何使用 Chakra UI 来构建一个可以在深色和浅色之间的网站。...此文件是在 React 应用程序制作过程中创建的。复制此文件中的信息并将其存储在剪贴板中，现在可以将其从 index.css 中删除。修改 theme.js文件，它将由两部分组成。...'Dark' : 'Light'} 通过执行此操作，将创建一个切换按钮，该按钮根据当前主题显示“深色”或“浅色”，并允许用户通过单击按钮在两种模式之间切换。...在应用程序中实现切换开关后，用户应该能够通过单击按钮在深色和浅色模式之间切换。然后，网站的外观应相应更改。

4743 0

一步到位：三行CSS代码轻松实现全网站暗黑模式

下面是正文~~ 深色模式是一种设计趋势，网站的配色方案被更改为深色背景，配以浅色文字和元素。它也被称为夜间模式或黑暗主题。...许多热门网站和应用程序现在都提供了黑暗模式选项 —— 如 TailwindCSS：如果您是开发者，您很可能已经知道如何在开发者工具中切换暗黑模式：如果你想要为操作系统（以及所有支持暗黑模式的应用程序...在Mac上，可以在系统设置>外观下找到它：使用系统颜色的深色模式首先，我们将创建一个带有标题的简单HTML： Hello Darkness, My Old Friend<...这是一个浅色模式演示，在Safari中展示了可用的系统颜色：如果我们切换到深色模式，某些颜色会完全改变（就像我们已经遇到的 Canvas 和 CanvasText ），而其他颜色只会稍微改变：使用系统颜色进行黑暗模式是一种简化的黑暗模式体验...他们可能更喜欢将系统设置为深色模式，但我们的网站是浅色模式。让我们创建一个切换器！

1.3K3 0

黑暗模式UI设计风潮来袭，设计师应如何应对？

继Mac OS加入黑暗模式后，iOS和iPad OS也相继发布了黑色模式的选择，未来的一段时间里，越来越多的应用开始适配黑暗模式，仿佛它已经成为了UI设计中的一个标配选项。...在设计过程中，有诸多因素会影响 UI 给用户的感受。其中，色彩是最重要也是最明显的一个部分。许多设计师会在选择配色方案的时候，会使用浅色的、明亮的背景色彩。...其实，大众和设计师的这个倾向是有科学依据的。在白色的背景上使用黑色的文本，可读性是最佳的。在不同的测试和研究当中，浅色背景上的深色文本，比起深色背景上的浅色文本，阅读性更强。...大量的 B2B的程序， SaaS类产品，以及媒体类数字产品，如今大都配备了深色系主题，让用户在合适的时候从浅色主题下切换过来，用来调整和修正视觉模式，降低视觉疲劳。...在以下情形下可以使用深色系 UI：单品牌配色和深色系UI 一致的时候；当布局内容稀疏、极简且元素类型较少的情况下；当 UI 的使用环境和需求合适的情况下，比如夜间使用，或者明显的娱乐向；当使用深色主题是为了减少视觉疲劳的时候

6612 0

iOS——配适深色模式

适配深色模式苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了，就是适配深色模式。...在适配深色模式的过程中，作为开发者，我们其实只要解决俩个问题： 1、如何判断当前的系统的颜色模式？ 2、我们应该对哪些UI的内容适配深色模式？如何去判断当前系统的颜色模式？...，给xcassets中的颜色设置深色和浅色俩种表现形式。...之后，UIKit也为我们提供了四种动态模糊样式： UIBlurEffectStyleSystemChromeMaterial这种样式是用来指定运行在 macOS 上的 iPad 应用的边框颜色的所以想要模糊效果适配深色模式直接以上四种动态模糊样式就可以了...h5界面适配深色模式如果工程中有嵌套h5界面，那h5界面的内容可能也需要做深色模式的适配。可以使用prefers-color-scheme来指定深色模式和浅色模式下的css样式。

1.5K1 0

最新iOS设计规范三｜3大界面要素：栏(Bars)

在iOS 13及更高版本中，默认情况下，大标题导航栏不包含背景材质或阴影。另外，随着页面滑动，大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...允许用户隐藏侧边栏以为其内容创造更多空间，并使用内置的边缘滑动手势再次显示侧边栏。避免在默认情况下隐藏边栏。侧边栏中的标题要保持简洁明了。省略不必要和多余的词。...状态栏的文本和指示器的视觉样式可以是浅色或深色，可以针对APP进行全局设置，也可以针对不同的屏幕单独设置。深色状态栏的效果在浅色内容至少效果很好，而浅色状态栏的效果在深色内容上效果很好。...例如，如果iOS设备上没有歌曲，则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。始终在附加视图中切换上下文。...可以在标签上做标记 - 包含白色文本的红色椭圆（即小红点），或者一个数字或一个感叹号，用以提示用户有新信息，并且新信息与该视图或模式是相关联的。确保标签栏标志符号在视觉上保持一致和平衡。

9.7K1 0

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

体验一番之后，小编发现，iOS这个版本在UI上最大的变化是增加了暗黑模式，回到两个月前，Android Q的测试版本中也重点推出了暗色模式。...这一切意味着，在2019年底，移动端即将进入“暗黑时代”…… 1 暗黑模式关注各类发布会的同学应该都会关注手机/电脑的屏幕。...另外，在黑暗环境中，黑暗模式也会更有利于用户使用手机，尤其在夜间/手机亮度低的场景下使用手机时对眼睛也有一定的保护效果。...在这之前，许多app为了方便用户的夜间使用，在很早的版本中就以皮肤、夜间模式的形式增加了“暗黑模式”。...试想一下，在漆黑的夜晚点开了一个app，结果是明亮的白色，瞬间的色彩差会极大地影响用户体验，尤其是工具类的app。 ? iOS 13中的暗黑模式（设备: iPhone XR） ?

1.3K2 0

不懂设计的产品不是好开发

background color是应用在屏幕背景上，在UI组件的后面的颜色。error color是应用在组件上以突出错误的颜色。通常情况下，这些颜色与品牌没有关联。...由于屏幕上的大部分颜色都是background和surface的颜色，在深色主题中，与浅色主题相比，background和surface的颜色会有一个较低的值（亮度）。...2.4 Material Palette Generator 考虑到三维模型，当我们从浅色主题切换到深色主题时： background和surface的颜色应该从上往下移动 primary和secondary...浅色主题的主变色可以浅一些或深一些（500±200），而对于深色主题，建议使用500。...在没有策略的情况下，将形状积极地应用到每一个组件上，会分散注意力，减少关注度，并产生歧义。例如，在条形图上应用形状可能会导致对所表示的数值的模糊不清。

2.5K2 0

【设计】近期发现的 APP UI 设计趋势

我们都喜欢看视频，并在 TikTok 或 YouTube 上花费大量时间。...5、黑暗模式暗模式是已在许多应用程序中高度使用的最大设计趋势之一。最近，设计师也提供了在应用程序中在标准模式和暗模式之间切换的机会。所以用户可以选择他们最喜欢的任何模式。...深色主题设计将背景变为深色模式，并使字体和其他元素变为浅色/白色。例如，现在在 Facebook 等最受欢迎的应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。...您可以使用从浅色到深色主题的过渡，从而将屏幕分成两个逻辑部分。此外，您可以在按钮上使用渐变主题，使它们在屏幕上弹出。玻璃拟态的概念也值得一提。...使用标准导航不要使用异型的导航栏，这会让你的用户迷失在应用中。 3. 使用优质的配图抽象艺术、插图、真实照片趋势——一切都有助于吸引用户的注意力。

9713 0

微信黑暗模式终于来啦！UI设计细节完全分析及体验

不过，很多人也许发现不了，因为手机白天还是浅色模式，只有到晚上才会改为黑暗模式。 ? 如何开启微信黑暗模式？首先，你必须更新到iOS端的微信7.0.12版本。...在Tint颜色上，亮色模式和暗色模式的颜色也不一样，这符合iOS 13 黑暗模式设计的规则定义。一般来说Tint颜色，黑暗模式下更亮一点。...（左侧色卡为浅色模式，右侧为深色模式，下同）另外，以上取色均没有考虑透明度，在实际应用中需要考虑透明度的使用。而对于Tab背景来说，亮色模式和黑暗模式均沿用透明毛玻璃效果。...聊天列表页面左侧色卡为浅色模式，右侧为深色模式，均没有考虑透明度影响。 ? 图标颜色分析对比在聊天列表，通讯录列表页面，系统图标在两种模式下的颜色均保持一致，未做改变。...最后的总结（黑暗模式设计思路） · 一般情况下Tint颜色，在黑暗模式要比浅色模式要亮，请注意，不管是图标还是点睛的颜色。 ?

1.3K2 0

这款开源的 Markdown 神器界面更炫酷，逼格更高！

MarkText在Github上已经有26.9k+Star，可见其是非常流行的！...、专注模式；支持多种主题：三种浅色模式、三种深色模式；支持图片文件上传：支持上传到SM.MS图床和Github。...语句会直接实时转换成预览，用户体验大大改善了，这或许是很多朋友喜欢使用Typora这类工具的原因了； MarkText默认是浅色主题，可以通过左上角按钮->Theme切换到深色主题，可以看到共支持6种主题...；这里我们切换到深色主题，如果你想打开左侧的侧边栏的话，可以通过左上角按钮->View->Show Sidebar打开，侧边栏可以显示文章的大纲；有时候我们需要修改下Markdown源码，此时可以通过左上角按钮...->View->Source Code Mode切换到源码模式来实现； MarkText的代码样式支持确实不错，看看我们平时常用的Java代码样式，比Typora更炫酷； MarkText也是支持文件上传的

1.2K3 0

全功能数据库管理工具-RazorSQL 10大版本发布

可以在查看菜单中更改此设置语法高亮颜色：添加了为深色和非深色用户界面设置不同语法高亮颜色的功能颜色：添加了为深色和非深色用户界面设置不同前景色和背景色的功能启动时间减少约 10% 自动完成/自动查找...：在弹出窗口中添加了列数据类型和大小 Windows：改进了使用缩放超过 100% 的 Windows 系统上的用户界面缩放 Linux：RazorSQL 将在某些 Linux 系统上自动缩放显示二进制数据编辑器...Mac：在某些情况下，查看菜单未正确显示当前设置的外观选择通过 UCanAccess 驱动程序连接到 MS Access 时，日期字段在导入工具和生成 SQL 选项中用单引号而不是 # 括起来某些窗口在深色模式下未显示正确的文本颜色...突出显示与文件名标签不匹配的日期和大小标签的颜色前景 Mac：如果从视图菜单中选择暗模式，将选择切换到自动检测暗/亮模式不再重新打开自动检测 Mac：文件系统浏览器：如果自动检测深色/浅色模式已打开，并且...Mac 处于浅色或灰色模式，则文件系统浏览器上的突出显示颜色不正确查找/自动完成显示列表/工具提示文本：字体大小并不总是基于当前编辑器字体 SQL Server：更改表添加列不支持输入最大列长度编辑表工具

3.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭