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

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

基础概念

CGContextSetStrokeColorWithColor 是 Core Graphics 框架中的一个函数,用于设置图形上下文的描边颜色。在 iOS 开发中,动态颜色(Dynamic Colors)是一种可以在不同外观模式(如浅色模式和深色模式)下自动调整颜色的特性。

相关优势

  1. 适应性:动态颜色可以根据系统的外观模式自动调整,提供更好的用户体验。
  2. 简化代码:开发者无需手动管理不同模式下的颜色值,减少了代码复杂性和维护成本。

类型与应用场景

  • 系统动态颜色:如 UIColor.systemBlue,会根据系统设置自动调整。
  • 自定义动态颜色:通过 UIColor 的初始化方法创建,结合 UIColorAsset 管理。

应用场景包括但不限于:

  • 应用程序的主题切换。
  • 界面元素在不同光照条件下的适应性显示。

问题原因

在 iOS 13 及更高版本中,如果使用了动态颜色但在深色模式切换后 UI 没有自动刷新,可能的原因包括:

  1. 视图未重新布局:视图可能没有接收到布局更新的信号。
  2. 颜色属性未正确绑定:动态颜色可能没有正确地绑定到视图的属性上。
  3. 缓存问题:可能存在某些缓存机制导致颜色没有及时更新。

解决方法

方法一:强制视图重新布局

在深色模式切换时,可以手动调用视图的 setNeedsLayoutlayoutIfNeeded 方法来强制刷新布局。

代码语言:txt
复制
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
        self.view.setNeedsLayout()
        self.view.layoutIfNeeded()
    }
}

方法二:使用 UIColorAsset

确保使用 UIColorAsset 来管理动态颜色,这样可以确保颜色在不同模式下正确切换。

代码语言:txt
复制
let dynamicColor = UIColor(named: "MyDynamicColor")!
myView.strokeColor = dynamicColor

方法三:监听系统外观变化

通过 UITraitCollectionDidChange 代理方法监听系统外观的变化,并作出相应的更新。

代码语言:txt
复制
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    updateUIForCurrentTraitCollection()
}

private func updateUIForCurrentTraitCollection() {
    // 更新颜色和其他UI元素
}

示例代码

以下是一个完整的示例,展示了如何在深色模式切换时更新 UI:

代码语言:txt
复制
class MyViewController: UIViewController {
    
    @IBOutlet weak var myView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        updateUIForCurrentTraitCollection()
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateUIForCurrentTraitCollection()
        }
    }
    
    private func updateUIForCurrentTraitCollection() {
        let dynamicColor = UIColor(named: "MyDynamicColor")!
        myView.strokeColor = dynamicColor
        myView.setNeedsLayout()
        myView.layoutIfNeeded()
    }
}

通过上述方法,可以确保在使用 CGContextSetStrokeColorWithColor 和动态颜色时,UI 能够在深色模式切换后正确地自动刷新。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS——配适深色模式

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

1.7K10

鸿蒙开发:适配系统深浅色模式

,在系统设置中,都有着深色和浅色两种外观模式,同样,鸿蒙系统中也存在这样的外观切换,如何让自己的应用,跟随着系统的模式进行动态切换呢?...资源形式实现 所谓资源形式,就是深色和浅色各有一套样式,比如颜色,浅色有一个,深色也有一个,当系统模式切换之后,便主动寻找对应模式下的颜色,同样,放到其它资源上也是类似。...,在系统设置中,都有着深色和浅色两种外观模式,同样,鸿蒙系统中也存在这样的外观切换,如何让自己的应用,跟随着系统的模式进行动态切换呢?...深色模式 图片资源适配 图片和颜色是类似的,浅色和深色放在对应的模式下即可。...,在系统设置中,都有着深色和浅色两种外观模式,同样,鸿蒙系统中也存在这样的外观切换,如何让自己的应用,跟随着系统的模式进行动态切换呢?

29810
  • 深色模式适配指南

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

    3K31

    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.3K10

    纯血鸿蒙APP实战开发——深色模式适配

    在深色模式下,系统会自动加载此目录中的颜色及图片资源,确保与浅色模式下的UI元素色彩差异性。...利用系统分层参数:对于支持深浅模式切换的系统层级颜色资源,我们可以直接引用这些具有分层特性的参数,使得当切换设备主题时,相关组件的颜色能根据系统当前颜色模式自动更新。...效果图预览使用说明在应用主页点击“深色模式”案例,将应用切至后台,系统颜色模式发生改变(如在系统设置中切换深浅色模式),当应用重新被激活至前台时,能够立即检测到系统颜色模式的变化,并自动更新为对应颜色主题的视图界面...为深色模式下的各个UI组件指定相应的颜色值,务必确保与浅色模式下同名颜色资源名称一致,以确保系统能够正确识别并切换。// 用资源ID方式设置Column背景色。...)若UI组件的颜色属性引用的是系统提供的具有层级参数的颜色资源,则当设备在深色模式和浅色模式间切换时,这些颜色会自动调整至对应模式下的预设色值。

    23110

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

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

    9.4K160

    你说的黑是什么黑

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

    98320

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

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

    2.2K161

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

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

    2.1K11

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

    它控制了诸如颜色、字体、形状等全局样式。 为什么要使用Material Theme? 统一性:全局统一的样式设置,确保各界面视觉一致。 易维护:修改一处主题配置,应用内所有关联组件自动更新。...灵活性:支持动态主题切换,例如白天/夜间模式。 如何在Flutter中使用Material Theme? 在Flutter中,Material Theme的核心是ThemeData对象。...选择基色:设置Primary、Secondary、Tertiary颜色。 调整配色:支持自动生成Light和Dark模式的调色板。 导出代码:一键导出Flutter、CSS或iOS平台的主题代码。...), useMaterial3: true, // 启用Material Design 3 ), 多场景实践 场景1:动态切换深色/浅色模式 class MyApp extends StatelessWidget...darkTheme: ThemeData.dark(), // 深色模式 themeMode: ThemeMode.system, // 跟随系统设置 home:

    40400

    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.5K63

    H5 项目如何适配暗黑模式

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

    2.8K50

    暗黑模式在 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,仅在发生主题切换时机进行视图刷新操作。

    2K20

    Android 10适配要点,深色主题

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

    1.9K10

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

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

    2K20

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

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

    2.2K10

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

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

    9K30

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

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

    4.8K40
    领券