官方文档 有兴趣的可以康康
Supporting Dark Mode in Your Interface
Providing Images for Different Appearances
系统预设颜色
虽然系统有自带暗黑模式的颜色，但是吧，但凡稍微有个活着的UI，咱也别显着这么寒碜不是。但还是放出来给大家康康叭，跟一般的[UIColor redColor]/.red一个用法。
使用系统预设定好的颜色类型。示例如下：
button.setTitleColor(.label, for: .normal)
button.backgroundColor = .systemBackground
OC:
@property (class, nonatomic, readonly) UIColor *systemBrownColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *systemIndigoColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *systemGray2Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *systemGray3Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *systemGray4Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *systemGray5Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *systemGray6Color API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *labelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *secondaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *tertiaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *quaternaryLabelColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *linkColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *placeholderTextColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *separatorColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@property (class, nonatomic, readonly) UIColor *opaqueSeparatorColor API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchOS);
@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);
@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);
@property (class, nonatomic, readonly) UIColor *systemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *secondarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *tertiarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
@property (class, nonatomic, readonly) UIColor *quaternarySystemFillColor API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchOS);
Swift: 参考OC
项目中实用的方法
- 在工具类定义iOS13暗黑颜色适配的方法
OC:
// MARK: - iOS 13 暗黑模式颜色适配
func ios13ColorWithDark(_ darkColor: UIColor, _ defaultColor:UIColor) -> UIColor {
if #available(iOS 13.0, *) {
let colorDynamic = UIColor.init { (traitCollection) -> UIColor in
if (traitCollection.userInterfaceStyle == .dark) {
return darkColor
} else {
return defaultColor
}
}
return colorDynamic
}
return defaultColor
}
Swift:
// MARK: - iOS 13 暗黑模式颜色适配
func ios13ColorWithDark(_ darkColor: UIColor, _ defaultColor:UIColor) -> UIColor {
if #available(iOS 13.0, *) {
let colorDynamic = UIColor.init { (traitCollection) -> UIColor in
if (traitCollection.userInterfaceStyle == .dark) {
return darkColor
} else {
return defaultColor
}
}
return colorDynamic
}
return defaultColor
}
- 判断是否是暗黑模式
OC:
if (@available(iOS 13.0, *)) {
// 判断是否是暗黑模式
BOOL isDark = (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark);
if (isDark) {
}
}
Swift:
if #available(iOS 13.0, *) {
// 判断是否是暗黑模式
let isDark = self.traitCollection.userInterfaceStyle == .dark
if (isDark) {
}
}
- 如果碰到 Light Mode 和 Dark Mode 相互切换设置的颜色不起作用，需要在监听模式切换的指定方法，另外进行设置。
OC:
- (UITraitCollection *)traitCollection{
}
Swift:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
}
- 关于颜色
通过 Assets.xcassets -> 添加 New Color Set ，设置 Appearances 为自己所需要的类型，进行 light 和 dark 模式下不同的颜色设置，即可使用。示例代码如下：
button.backgroundColor = UIColor.init(named: "ColorBackground")
image.png
或者纯代码定义
OC:
if (@available(iOS 13.0, *)) {
UIColor *dynamicColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trainCollection) {
if ([trainCollection userInterfaceStyle] == UIUserInterfaceStyleLight) {
return [UIColor greenColor];
}
else {
return [UIColor blueColor];
}
}];
[self.view.backgroundColor setBackgroundColor:dynamicColor];
}
Swift:
if #available(iOS 13.0, *) {
let dynamicColor = UIColor.init { (trainCollection) -> UIColor in
if self.traitCollection.userInterfaceStyle == .light {
return .green
} else {
return .blue
}
}
self.view.backgroundColor = dynamicColor
}
- 关于图片
在 Assets .xcassets 里，可以创建New Image Set，根据需要对图片进行命名和设置即可。示例代码如下：
imageView.image = UIImage.init(named: "LOrDImage")
image.png
其他代码参照第四点。
设置 Light/Dark 模式
如果需要单独设置展示模式，不跟随系统设置变化的话～
// Always adopt a light interface style.
overrideUserInterfaceStyle = .light
模拟器设置暗黑模式测试
设置->Developer(开发者)->Dark Appearance
通过指定方法去更新自定义视图
当用户更改系统外观时，系统会自动要求每个窗口和视图重新绘制。苹果官方建议，在这些指定的方法去修改颜色，因为如果在创建时设置 layer 的颜色之类的，会因为 CGColorRef 对象不适应而不发生改变，创建时设置背景颜色什么倒是可以的。示例如下：
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
label.layer.borderWidth = 2
label.layer.borderColor = UIColor.init(named: "LabelBorder")?.cgColor
}
1585647459360.jpg
网友评论