iOS 暗黑模式适配（方法介绍篇）

最新推荐文章于 2024-09-08 07:34:42 发布
最新推荐文章于 2024-09-08 07:34:42 发布
阅读量1.7k 收藏
点赞数
分类专栏： iOS日常问题 文章标签： ios 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011271094/article/details/106548195
版权

适配目标

根据苹果的设计思路，适配暗黑模式是通过UIKit提供的基础对象进行颜色和图片的控制
image.png
image.png

一些系统提供的控件已经适配了暗黑模式，剩下的就是适配我们自己写的一些控件特性了。

开始适配

一、暂时还未适配
如果你的 App 暂时未适配，或者App界面不适合在暗黑模式下展示。
可以暂时通过在工程的info.plist 中添加UIUserInterfaceStyle配置为Light模式，这样就不会受到系统模式变更的影响了：
image.png

二、overrideUserInterfaceStyle属性
在 iOS 13中，UIView、UIViewController 、UIWindow 有了一个 overrideUserInterfaceStyle 的新属性，可以更改显示的模式。

/* 设置 `overrideUserInterfaceStyle` 使当前控制器和他的子控件有
一个明确的 `UIUserInterfaceStyle`. 设置之后不会影响程序，或者其他的父视图
默认是 UIUserInterfaceStyleUnspecified<不确定模式，跟随系统模式的变化而变化>
 */
@property (nonatomic) UIUserInterfaceStyle overrideUserInterfaceStyle API_AVAILABLE(tvos(13.0), ios(13.0)) API_UNAVAILABLE(watchos);

typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
    UIUserInterfaceStyleUnspecified,  // 不确定模式，跟随系统模式的变化而变化
    UIUserInterfaceStyleLight,        // Light模式，跟随系统模式的变化而变化
    UIUserInterfaceStyleDark,         // Dark模式
} API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);

image.png
如果修改一个VC的模式为UIUserInterfaceStyleDark模式,那么他的子控件，子VC如果不单独设置模式的话，将会和他一样。View同理。

三、颜色适配

完成颜色适配，我们App中的适配工作就差不多完成一大半了。

1、使用系统提供的颜色

系统颜色 Dynamic colors

iOS 13，系统为我们提供了很多的颜色，使用这些颜色，开发者什么都不需要做，系统会自动完成暗黑模式的适配。

1.1、系统颜色

labelColor :文本颜色
secondaryLabelColor : 辅助内容的文本标签颜色
tertiaryLabelColor ：三级
linkColor: 超链接标签颜色
separatorColor/opaqueseparatorColor：分隔符（细边框或者分割线）
systembackgroundColor ：界面背景色
.........

1.2、动态的灰度颜色
image.png

image.png

相关的颜色在不同模式下的对比，可以直接参考
https://noahgilmore.com/blog/dark-mode-uicolor-compatibility/
这哥们写的比较全。

1.3、语义化颜色

@property (class, nonatomic, readonly) UIColor *systemBackgroundColor                   API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemBackgroundColor          API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemBackgroundColor           API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);

/* 2. systemGroupedBackground
 *    Use this stack for views with grouped content, such as grouped tables and
 *    platter-based designs. These are like grouped table views, but you may use these
 *    colors in places where a table view wouldn't make sense.
 */
@property (class, nonatomic, readonly) UIColor *systemGroupedBackgroundColor            API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *secondarySystemGroupedBackgroundColor   API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
@property (class, nonatomic, readonly) UIColor *tertiarySystemGroupedBackgroundColor    API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos);
。。。。。。

2、在Assets.xcassets中自定义颜色
image.png
不过适配的是iOS11以上

if (@available(iOS 11.0, *)) {
    UIColor *color = [UIColor colorNamed:@"LightAndDarkHeaderColor"];
} else {
     // Fallback on earlier versions
}

3、使用UIColor新提供的方法
把生成的UIColor对象直接赋值给View的

// 类方法
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
// 对象方法
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);

UIColor *color1 = nil;
if (@available(iOS 13.0, *)) {
    color1 = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            return [UIColor redColor];
        } else {
            return [UIColor greenColor];
        }
    }];
    
    UIColor *color2 = [[UIColor alloc] initWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
       if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                return [UIColor redColor];
            } else {
                return [UIColor greenColor];
            }
        }];
    self.view.backgroundColor = color1;
    
} else {
    
}
self.view.backgroundColor = color1;

二、图片资源适配

1、SF Symbols
苹果在 WWDC19 上引入了 SF Symbols 。SF Symbols是一个巨大的矢量图标库（超过1500），可供开发人员在自己的 App 中使用。

更多可以查看关于 SF Symbols 的download the SF Symbols app
，下载.dmg可以查看全部图标。苹果在自己的应用中使用，也推荐开发者使用。
image.png
如果你使用了苹果给开发者提供的 SF Symbols 图标符号库，那么模式切换什么都不用做

if (@available(iOS 13.0, *)) {
    UIImage *normalImage = [UIImage systemImageNamed:@"star.fill"];
    [btn setImage:normalImage forState:UIControlStateNormal];
}

可以看到两种模式下图标的颜色不一样.png

2、Assets.xcassets 适配图片

image.png
切换模式的时候，系统会自动加载不同模式下的图片

self.localImageView.image = [UIImage imageNamed:@"LightAndDarkHeaderImage"];

image.png

三、监听当前View或者VC的模式改变
使用- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection回调方法
监听当前层级模式是否发生变化，来修改相关控件的显示样式。
有一些界面元素我们是没法直接用UIColor提供的新方法进行修改的，需要在模式发生变化的回调中进行修改，比如CALayer

// 这种写法是没法让CALayer跟随模式变化而变化的
if (@available(iOS 13.0, *)) {
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
        if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            return [UIColor redColor];
        } else {
            return [UIColor greenColor];
        }
    }].CGColor;
    [self.view.layer addSublayer:layer];
}

- (void)createUI {
    if (@available(iOS 13.0, *)) {
        self.layerColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                return [UIColor redColor];
            } else {
                return [UIColor greenColor];
            }
        }];
        self.layer = [CALayer layer];
        self.layer.frame = CGRectMake(100, 100, 100, 100);
        self.layer.backgroundColor = self.layerColor.CGColor;
        [self.view.layer addSublayer:self.layer];
    }
}
// 当iOS界面环境发生变化时，系统调用该方法。
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    if (@available(iOS 13.0, *)) {
        // 判断当前的颜色是否发生变化，因为屏幕旋转也会走该回调
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            
            // 设置layer的背景颜色
            self.layer.backgroundColor = self.layerColor.CGColor;
        }
    }
}

如何调试暗黑模式
1、左图：Xcode中的调试开关，可以调试真机和模拟器
2、右图：真机中的开关
image.png

iOS___
关注
专栏目录
iOS 暗黑模式适配 - 移动端开发指南
DhGrad_Bias的博客
09-20 392
通过这些步骤，开发人员可以为用户提供更好的用户体验，并确保应用程序在不同的外观设置下正常工作。本文将介绍如何在 iOS 应用程序中适配暗黑模式，并提供相关的源代码示例。要在应用程序中启用暗黑模式支持，首先需要确保项目的部署目标设置为 iOS 13 或更高版本。然后，可以在应用程序的 Info.plist 文件中添加一个键值对，以启用暗黑模式支持。可以在 Assets.xcassets 文件中创建一个新的颜色集，然后为浅色和暗黑模式分别定义相应的颜色。在应用程序中使用动态颜色是适配暗黑模式的一种常见方式。
百度APP iOS暗黑模式适配的完美解决方案
百度APP技术
03-12 1043
原创：liushaohua 百度APP技术团队 一 背景 在2019WWDC的开场演讲中，苹果公布了即将推出的iOS13 DarkMode的新特性。此新特性不仅可以在夜晚保护视力，而且对于使用OLED的最新一代设备而言，也可以帮助用户节省电量消耗。不过此特性只支持iOS13以上的系统,为了给全系统所有用户最好的体验,研发出了一套皮肤主题框架,不仅可以全系统支持DarkMode，还可以扩展多套皮肤主...
iOS 13.0 暗黑模式的适配
same_life的博客
06-27 3681
1、 图片适配2、颜色适配（文字颜色，背景颜色）3、状态栏适配4、关闭暗⿊模式（或者关闭某⼀个页⾯的暗⿊模式）5、模式切换代理系统提供的动态颜色有： labelColor、systemBackgroundColor、secondarySystemBackgroundColor、tertiarySystemBackgroundColor、systemGroupedBackgroundColor、secondarySystemGroupedBackgroundColor、tertiarySystemGroupe
EasyDarkMode：iOS 暗黑模式轻松适配利器
最新发布
gitblog_00059的博客
09-08 624
EasyDarkMode：iOS 暗黑模式轻松适配利器 EasyDarkModeThis is a tool for developers to easily adapt dark mode in iOS 13.项目地址:https://gitcode.com/gh_mirrors/ea/EasyDarkMode 项目介绍 随着 iOS 13 的发布，苹果引入了全新的用户界面特性——暗黑模式（D...
iOS暗黑(dark)模式适配
qq_30356665的博客
03-23 5331
在iOS开发中，有些APP需要适配暗黑模式，下面介绍下暗黑模式需要开发者手动管理的任务。其他系统自动管理的任务不再说明 不需要适配暗黑模式的话去info里面关闭即可 Assets中的图片要选择一下支持暗黑模式，会有两种状态的图片，浅色深色各一套，系统会自动的更改 颜色设置的话，UIColor新增了深色浅色方法，要注意深色只有在iOS13以上系统才生效 class func setColor(_ light: UIColor, _ drak: UIColor) -> UIColor
iOS 适配暗黑模式
st646889325的博客
02-24 234
#import <UIKit/UIKit.h> @interface UIColor (DarkColorChange) /** * 十六进制字符串 * * @param color 16进制色值 支持@“#123456”、 @“0X123456”、 @“123456”三种格式 * */ + (UIColor *)colorWithHexString:(NSString *)color; /** * 十六进制字符串 透明度 * * @param color 16进...
ios适配暗黑模式
liu_xiaoru的博客
04-22 413
ptefers-color-scheme属性 媒体查询特性，用于检测系统主题为暗黑或者亮色 语法 no-preference：未设置或者不支持 light：系统使用浅色主题 dark：系统使用暗色主题 样例 @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; col...
浅谈iOS开发如何适配暗黑模式（Dark Mode）
08-25
本文将详细介绍如何在 iOS 开发中适配暗黑模式，包括资源文件的适配、颜色的适配、系统更新方法的调用等方面。 一、资源文件适配 在 iOS 开发中，资源文件的适配是非常重要的，资源文件包括图片、颜色、音频等资源...
iOS 详解暗黑模式的关闭与适配
JWheat的博客
03-20 2386
一、背景 暗黑模式一开启，APP没有适配，然后你发现，你输入的白底黑字，变成了白底白字，呈现在面前的，就是一片空白，是的，你没看错，就是一片空白。 来来来，有图有真相，我们以一叶来洞察整个森林，下面是一毛一样的页面和信息展示，只是分为正常和暗黑模式，显示效果显而易见。 1.正常Light模式 正常.PNG 2.暗黑模式，不要怀疑自己，没错，就是这样的。 暗黑模式.P...
iOS 13适配——暗黑模式
番薯大佬的专栏
03-14 2202
iOS13有什么亮点？ iOS 13.0正式版发布以来，最大的亮点还是新增的支持Dark Mode（暗黑模式）。 暗黑模式可以有效地舒缓眼睛? 我觉得更多的是心理上的安慰。 原理上来说暗黑模式仅仅是关闭了背景亮度，同时调整了可视内容的颜色，比如暗黑模式下文字以白色为主等等。它实际上并没有改变屏幕的“频闪”问题，当你长时间看屏幕的时候依旧会有视觉疲劳的症状。 当然，暗黑模式也让用户在暗黑的环境下更友...
iOS系统暗黑模式
gcs的博客
09-10 2151
先看下系统的暗黑模式是怎么适配的。
iOS 暗黑模式适配
lsx968542的博客
04-20 744
图片适配： 使用ImageSet 打开Assets.xcassets 新建一个Image set 选择右边栏的Appearances中对应的选项适配深色模式。 使用方法：[UIImage imageNamed:@"xxxx"]; 图片适配 颜色适配： 使用ColorSet 打开Assets.xcassets 新建一个Color set 选择右边栏的Appearances中...
iOS 暗黑模式适配(项目实战篇)
u011271094的博客
06-04 2012
通过上面两篇文章，我们知道了暗黑模式怎么去适配，那么如何结合到真实的项目场景中去呢？ ###适配目标 在项目适配之前，先来梳理一下需要适配的东西，以及可能预见的问题。 一、下图是我们单个App的控件适配目标，主要目标就是根据不同模式适配不同的背景颜色和图片资源 二、如何方便统一管理适配颜色，统一风格 三、界面过多，发版间隙短，可能一次性适配不完 四、有些界面可能来不及适配或者不适合显示成暗黑模式<比如打印页面>，对于这种特殊的界面如何处理 五、给用户提供自主选择的权利，可以在 App 内手动关
iOS 暗黑模式适配（叨叨篇）
u011271094的博客
06-04 1253
####前言 iOS 13 和 Android 10 的发布，暗黑模式让人眼前一亮，Apple的很多软件也都进行了适配，业界内很多App也都加入暗黑阵营。增加用户体验，适配暗黑可能是一个趋势。 ###暗黑模式是什么 在UI界面中大面积采用深色构成界面主体的设计，由于整体亮度降低可在黑暗环境中提供舒适性并可最大程度地减少眼睛疲劳。 ###暗黑模式的优点 沉浸式效果 暗黑模式的主色背景是深色，深色背景的优势是 突出与我们主要交互操作的内容 弱化其他辅助元素并降低屏幕整体的亮度减少视觉压力。 很多程序猿也偏
DarkAdapter: iOS 暗黑模式(Dark Mode) 适配库，纯Swift库
ZuopanYao's Blog
06-25 542
DarkAdapter https://gitee.com/harvey520/dark-mode.git iOS 暗黑模式(Dark Mode) 适配库 DarkAdapter to make adjust dark mode on iOS. Requirements / 使用条件 iOS 11.0+ Xcode 12.0+ Swift 5.0+ Installation / 安装 CocoaPods pod 'DarkAdapter' Manually / 手动安装 If you prefer n
iOS13 暗黑模式(Dark Mode)适配之OC版
马甲包开发审核交流群：869685378
06-16 8342
目录 一、适配Dark Mode 颜色适配 图片适配 二、获取当前模式(Light or Dark) 三、其他内容 四、总结 招ios app马甲包套壳上架技术（个人、团队）H5接口、极光推送、关键词、介绍图、标题。能做的私聊Q;51286559 iOS马甲包开发审核交流Q群：370868450 首先看看我们的效果图: 适配效果图 一、适配Dark Mode ...
探索 FluentDarkModeKit：优雅实现iOS暗黑模式支持
gitblog_00051的博客
05-13 337
探索 FluentDarkModeKit：优雅实现iOS暗黑模式支持 FluentDarkModeKitA library for backporting Dark Mode in iOS项目地址:https://gitcode.com/gh_mirrors/fl/FluentDarkModeKit 在开发iOS应用时，如何优雅地适配暗黑模式（Dark Mode）一直是一个挑战，特别是对于那些需...
IOS暗黑模式基础适配教程：图片与颜色调整
在iOS开发中，适配暗黑模式（Dark Mode）已经成为一种重要的用户体验优化措施，尤其是在iOS 13及后续版本中，苹果引入了系统级别的暗黑模式支持。尽管在2019年初期，苹果并未强制要求开发者进行适配，但由于用户需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值