首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

`CGContextSetStrokeColorWithColor`带有iOS 13动态颜色,深色模式切换后不自动刷新UI

CGContextSetStrokeColorWithColor是一个Core Graphics框架中的函数,用于设置绘制路径的描边颜色。在iOS 13中,动态颜色和深色模式的引入使得我们可以根据用户的偏好设置来自动调整应用程序的外观。

在iOS中,动态颜色(Dynamic Color)是一种可以根据用户的外观设置(浅色模式或深色模式)自动切换颜色的技术。通过使用动态颜色,我们可以在不同的外观模式下提供一致的用户体验。

然而,CGContextSetStrokeColorWithColor函数本身并不具备自动刷新UI的能力。要实现动态颜色和深色模式切换后的UI自动刷新,我们可以使用UIKit框架中的UIAppearance API和traitCollectionDidChange(_: )方法。

具体实现步骤如下:

  1. 使用动态颜色创建一个UIColor对象,例如:
代码语言:txt
复制
let dynamicColor = UIColor { (traitCollection) -> UIColor in
    if traitCollection.userInterfaceStyle == .dark {
        return .white // 在深色模式下使用白色
    } else {
        return .black // 在浅色模式下使用黑色
    }
}
  1. 通过UIAppearance API将动态颜色应用于相关的视图组件,例如:
代码语言:txt
复制
// 将动态颜色应用于导航栏的描边颜色
UINavigationBar.appearance().tintColor = dynamicColor
  1. 在视图控制器中重写traitCollectionDidChange(_: )方法,以便在外观模式发生更改时刷新UI,例如:
代码语言:txt
复制
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    
    // 外观模式发生更改,刷新UI
    // 可以在此方法中重新设置描边颜色等
    // ...
}

通过使用动态颜色和traitCollectionDidChange(_: )方法,我们可以实现在iOS 13动态颜色和深色模式切换后自动刷新UI的效果。

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

  • 腾讯云移动开发服务:https://cloud.tencent.com/product/mobile-development
  • 腾讯云服务器(云服务器CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云数据库服务:https://cloud.tencent.com/product/cdb
  • 腾讯云音视频处理:https://cloud.tencent.com/product/mps
  • 腾讯云人工智能服务:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云存储服务:https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/tc3d
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Web技术】623- 简单好用的前端深色模式主题化开发方案

iOS13 引入该特性各大应用和网站都开始支持了深色模式。...有没有更简单的深色模式映射切换?比如使用HSL替代RGB色值。 HSL色值的表达形式是通过色相、饱和度、亮度,既然深色模式是调整亮度和饱和度,那是否可以通过hsl色值来自动计算呢?...这种自动出暗色版本的色值还有待探索中,主要有两个原因:1)深色模式的舒适度不是线性亮度和饱和度映射能完成的,颜色的函数计算深色映射显得相对单调。2)实际情况是一个颜色可能会映射到多个暗黑场景的颜色。...在浅色搭配情况下可能很好看的颜色,放到深色下可能就会引起舒适:恰当的对比度会引起视觉上看不清晰;恰当的色彩碰撞会引起反感;恰当的饱和度、亮度会显得UI有点脏。...图4 一种白色的存在切换主题的多种映射 此时,自动通过色值计算就需要区分颜色的周边颜色或者底层叠加颜色来计算,这无疑加大了计算难度。 所以这块自动计算并不太容易,还需要一些的探索。

2.1K10

iOS——配适深色模式

适配深色模式 苹果在iOS13中为iPhone引入了深色模式。那作为成为iOS程序员的我们也有事情做了,就是适配深色模式。...首先,所有 UIKit 本身所提供的 UI 控件(例如 UIView,UILabel,UITextView等等) ,只要没有针对颜色等内容特殊设置过,都会自动适配深色模式,这部分是我们开发者不需要去关心的...在适配深色模式的过程中,作为开发者,我们其实只要解决俩个问题: 1、如何判断当前的系统的颜色模式? 2、我们应该对哪些UI的内容适配深色模式? 如何去判断当前系统的颜色模式?...颜色iOS13以后,UIKit给我们提供了很多的动态颜色,以system开头的都是动态颜色,当我们给 UI 控件设置了动态颜色以后。 UI 控件就会自动的根据当前是否是黑暗模式展现出来对应的颜色。...在 iOS 13 中, UIKit 为 UIColor 所提供的 新 API 来创建我们自己的动态颜色

1.6K10
  • 暗黑模式在 Trip.com App 的实践

    一、背景 在 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,仅在发生主题切换时机进行视图刷新操作。

    1.9K20

    如何在 Vue 3 + Element Plus 项目中实现动态设置主题色以及深色模式切换

    二、项目依赖和环境配置 在实现动态主题切换功能之前,我们需要确保项目环境中安装了必要的依赖工具。这些工具将帮助我们简化深色模式切换和主题颜色动态修改。下面将详细说明这些依赖的作用和安装方式。 1....深色模式的效果展示 使用 useDark ,我们可以观察到,当深色模式开启时, 标签将会自动添加一个 dark 类名。 这个类名可以通过 CSS 来影响整个页面的样式,使其适配深色模式。...layoutThemeColor.value); // 初始化主题色 useStorage 是 VueUse 提供的一个工具函数,用于在浏览器的 localStorage 或 sessionStorage 中存储数据,它会自动同步数据并在页面刷新恢复...使用动态主题色切换功能,可以让用户随时调整界面配色,提高用户黏性和满意度。 多主题支持:在大型项目中,往往需要支持多种主题(如深色模式、浅色模式,以及不同的颜色方案)。...响应式存储:通过 useStorage,用户在切换主题色,即使刷新页面或重新访问,之前的主题偏好也能自动恢复,增强了体验的连续性。

    56110

    你说的黑是什么黑

    深色模式是如何进入我们的视野的?我们可以看到在过去的2年中,曾经出现过2个高峰。第一个高峰是去年WWDC,苹果第一次发布了iOS13的测试版,并且最大的特性就是支持了深色模式。...第二个高峰就是随着iOS 13随着iPhone 11系列正式发布,大量的App开始为深色模式适配。 深色模式到底有啥好的? 为啥要做深色模式?...在浅色模式下,会加剧跑马边框和刘海的存在感,但是在深色模式下,界面UI就会立马和机身融为一体。这也是为何苹果也十分乐意拥抱深色模式的原因。 体验刷新:目前有很多手机系统或者App提供了换肤的功能。...太难了...一上深色模式马上就被骂 深色模式虽然好处多多,iOS 13正式上线也1年时间了,但是刚开始这段时间的好多App,每上线了深色模式,却被舆论推上了风口浪尖。...我认为由于不同的用户对于深色模式的预期不一样。有些用户的预期是一个低对比度的黑夜模式,有些用户只是想换个主题而已。导致设计师两边讨好,有些产品的深色模式也是被骂的改了又改。

    90820

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

    静电说:iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。...黑暗模式支持所有辅助功能。 人们可以选择暗模式作为其默认界面风格,并且他们可以使用设置功能,使设备在环境光线较低时自动切换到黑暗模式。...艺术品的变化有时需要改变附近的颜色,以保持视觉连续性并防止界面元素变得过于强大或不足。例如,地图在使用地图模式时会显示浅色方案,但在激活卫星模式时会切换深色方案。...请注意,千万不要滥用模态,因为他们仅仅是用到两种状态之间的切换,不要对用户造成困扰。(在任何时候,模态都要慎用,请注意。iOS 13 中的日历应用是一个经典的例子。)...3 情境菜单(Contextual Menu) 在iOS13及以后的版本中,你可以使用情境菜单(Context Menus)让用户访问与屏幕项目关联的其它功能而不用切换界面。 ?

    4.5K40

    最新iOS设计规范七|10大视觉规范(Visual Design)

    为了保持视觉连续性,防止界面元素变得过于醒目或缺乏吸引力,插图的变化有时需要改变附近的颜色。例如:地图在使用地图模式时显示浅色模式,但在卫星模式切换深色模式。...通常,为UI元素使用语义定义的系统颜色。 ? 动态系统颜色 除了以上系统颜色外,iOS还提供用于传达其目的而非其外观或颜色值的语义定义颜色。例如用于用于背景区域和前景内容的颜色,标签、分隔符和填充。...用户可以选择深色模式作为其默认界面风格,并且可以通过设置,使其设备在环境光线较低时自动切换深色模式。由于用户在系统范围内做出这些选择,因此他们通常希望所有应用程序都能尊重他们的偏好。 ?...图像、图标和符号的颜色 iOS系统的SF符号,在深色模式下会自动显示效果,以及针对明暗外观优化的全彩色图像。 尽量使用SF符号。...文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。初级、次级、三级和四级标签颜色自动适应浅色模式深色模式下的外观。 使用系统视图绘制文本字段和文本视图。

    8.1K30

    深色模式适配指南

    背景 随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。...监听主题模式深色模式时为 body 添加类名 dark,根据 CSS 变量的响应式布局特点,自动生效 dark 类名下的 CSS。...native 深色适配 iOSiOS 系统中,开发者从颜色和图片两个方面来进行适配,我们不需要关心切换模式该怎么操作,因为这些都由系统帮我们实现。...当切换深色模式时,系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。...Theme 指定的是浅色模式,darkTheme 指定的是深色模式,程序会根据系统设定的暗黑模式自动匹配模式

    2.8K31

    Android 10适配要点,深色主题

    Force Dark的工作原理是系统会分析浅色主题应用下的每一层View,并且在这些View绘制到屏幕之前,自动将它们的颜色转换成更加适合深色主题的颜色。...然而,虽然现在界面中的主要内容都已经自动切换成了深色主题,但是你会发现标题栏和悬浮按钮仍然保持着和浅色主题时一样的颜色。...,DayNight主题是不能对这些颜色进行动态转换的。...虽说使用主题差异型的编程方式几乎可以帮你解决所有的适配问题,但是在DayNight主题下,我们最好还是尽量减少通过硬编码的方式来指定控件的颜色,而是应该更多地使用能够根据当前主题自动切换颜色的主题属性。...Configuration.UI_MODE_NIGHT_YES -> {} // 夜间模式启用,使用深色主题 } } 如果什么都不做的话,当前的Activity就好像并没有切换主题一样,界面上也不会有任何变化

    1.8K10

    Nuxt3在使用Tailwindcss情况下,如何优雅实现深色模式切换

    Tailwindcss好在,就是有大量给予它开发的组件,比如我用的: NuxtLabs UI: https://ui.nuxtlabs.com/getting-started 深色模式实现 现在,我们确定了使用的技术框架和使用的样式...切换模式 上述的思路已经完成,我们切换亮色和深色的方法,就是在标签上,加上class="dark"即可。...'system',则会根据用户的系统设置自动选择颜色模式 // 默认值为 'system' preference: 'system', // 回退颜色模式,可以是 'light' 或 '...,用于在本地存储中存储颜色模式的值 }, 最后,我们定义一个组件按钮,用于切换深色模式: // components/ColorModeButtom.vue let colorMode...写在最后 好啦,本次“如何优雅实现深色模式切换?”的分享,就到这里啦。

    1.7K160

    H5 项目如何适配暗黑模式

    一、背景 随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。...如何切换深色模式 iOS:“设置”--“显示与亮度”--“外观”,选择“深色” Android:“系统设置”--“显示”--“深色模式”。...1.1meta 在head中声明,声明当前页面支持 light 和 dark 两种模式,系统切换深色模式时...,浏览器默认样式也会切换深色; 1.2CSS 下面的 css 同样可以实现上面 meta 声明的效果 :root { color-scheme: light dark; } 注意:此声明并非为页面做自动适配...)字符串解析的结果。

    2.5K50

    Android 深色模式的项目应用

    (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文件里的颜色。具体出现在首次打开应用时,弹出的隐私弹框。

    1.2K10

    Android 深色模式的项目应用

    (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文件里的颜色。具体出现在首次打开应用时,弹出的隐私弹框。

    1.4K63

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

    iOS 13 的发推出了深色模式(Dark Mode),不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。  ...在 macOS 的深色模式中,基底色并不是纯黑,而是带有一定灰度的黑色。 在 iOS 上,苹果设计 Dark Mode 的基底色就是纯黑,这样一方面来可以省电,另一方面也与「刘海」的衔接更加自然。...论是浅色还是深色外观下,我们都应该在界面层级中,让离用户在逻辑关系上更近的颜色更亮一些。 再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。...这样,不管是浅色还是深色外观下,始终都保持了逻辑上的统一:离用户逻辑关系上越近的层级,颜色越浅越亮一些。 界面层级与明暗的逻辑关系,本质上是与颜色反转兼容的。...你可以在这里下载苹果官方提供的    iOS 13设计模板的 Sketch 文件,其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。

    1.8K20

    网站如何适配暗色模式并实现手动、自动切换

    Android 10 (API 级别 29)开始支持深色主题背景(第三方OEM厂商可能有所差异)。 iOS13开始全面支持暗色模式。 那么,我们自己的网站如何适配暗色/亮色模式呢?...[效果图] 媒体查询的优缺点 很多文章会介绍你直接使用媒体查询来适配暗色模式;的确高版本的浏览器,可以提供媒体查询功能,使用CSS,加入媒体判断即可: /\* 常规浅色模式下的网页背景颜色及文本颜色 \...*/ body { background: #fff; color: #222; } /\* 深色模式下的网页背景颜色及文本颜色 \*/ @media (prefers-color-scheme...: 举个例子,有些用户习惯把系统长期设置为暗色模式,访问你网站时,想看清你网站的图片,希望调整成亮色模式,却必须到系统设置内,手动把系统配色调成亮色再刷新网站,体验差。...,如Mac用户的外观自动: [4ga1nx6dax.png] 在系统自动切换暗色/亮色的同时,如何让网站也一同切换

    8.4K160

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

    3大界面要素 (Interface Essentials) 大多数iOS应用都是由UI Kit中的组件构建的。...在iOS 13及更高版本中,默认情况下,大标题导航栏包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...在iOS 13及更高版本中,可以通过删除导航栏的阴影来隐藏导航栏的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏中效果很好,因为它增强了标题和内容之间的联系感。...在iOS 13及更高版本中,您可以使用SF符号来表示选项卡栏项目。在所有版本的iOS中,系统API提供了一系列预设图标。当然你也可以自定义图标。...工具栏是半透明的,也可以添加背景颜色,并在用户不需要它们时应该隐藏起来。 例如:在Safari中,当你开始滚动页面时,工具栏会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。

    9.9K10

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

    在本指南中,我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp,基于Apple的人机界面指南。 ? 在WWDC 2019大会上,苹果公布了iOS 13的所有新功能。...在所有超级令人兴奋的功能中,关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人,您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13,人们可以选择采用深色系统外观。...每个按钮都有不同的颜色iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同(或分组)内容的元素。 ? 需要注意,黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。...必须为所有元素分配一组单独的颜色,也就是说,你必须重新设计它们。 如下所示,在明亮模式下纯白色不会在黑暗模式下转换为纯黑色。所以,不要在深色模式下反转颜色。 ?...那么,是否必须以这种方式使用这些颜色。如前所述,你可以随意使用所有10种颜色(4种填充+ 6种灰色)。 06 分隔线颜色 iOS规范为我们提供了分隔线的2种变体。一个是不透明的,另一个是透明的。

    3.3K10

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

    黑暗模式是炒作吗? 长时间使用“亮色模式,“黑暗模式”感觉就像呼吸新鲜空气。...彭博社的应用程序 同样的情况也适用于iOS中的股票应用和健康及活动应用,这些应用甚至在宣布Dark Mode之前就使用Dark UI。 ?...自从Dark UI普及以来,我们被宣传说,这种模式可以节省电量。但事实并非如此:除非您的手机配备了OLED屏幕,否则您将不会从中受益。 通常的LED屏幕需要背光以显示颜色,甚至是黑色。...另外,在Android系统中,有一个非常有用的功能,称为“允许强制深色”。基本上,这是Android的自动模式。它会与黑暗模式兼容,虽然不完美,但是看起来还不错。...浅色和深色模式下的iPhone屏幕 如果图标颜色在明暗模式切换时不变,也许并不合适。

    1.4K50
    领券