IOS 10 统一颜色管理和适配深色模式

实现分析

像系统那样,给项目中常用的颜色取名字,这里使用扩展语法实现,好处是可以像访问系统颜色那样访问自定义的颜色。

添加依赖

为了能使用16进制的颜色值,这里通过依赖DynamicColor框架来实现

Swift 复制代码
#颜色工具类
#https://github.com/yannickl/DynamicColor
pod "DynamicColor"

还不了解如何使用 CocoaPods 管理依赖的,建议先看前面的文章:IOS 01 CocoaPods 安装与使用

定义颜色

通过扩展UIColor类来实现

Swift 复制代码
import DynamicColor

//iOS中也提供了命名颜色,例如:.systemBackground,但无法更改他的颜色,Android中就可以根据浅色,深色修改命名的颜色,更方便
extension UIColor {
    /// 主色调
    static var primaryColor : UIColor {return DynamicColor(hex: 0xd6271c)}

    /// 暗一点 主色调
    static var primary30 : UIColor {return DynamicColor(hex: 0xa92e29)}

//    #pragma mark - 黑色到白色
    //颜色命名也是很大的问题,关于颜色命名方式讨论:https://www.zhihu.com/question/301985702
    //以下命名后面的数字,没有实际意思
    //后面两位是透明度
    static var blackTransparent88 : UIColor {return DynamicColor(hex: 0x00000088,useAlpha: true)}
    static var buttonTransparent88 : UIColor {return DynamicColor(hex: 0x00000088,useAlpha: true)}
    static var transparent88 : UIColor {return DynamicColor(hex: 0x88888888,useAlpha: true)}
    static var black11 : UIColor {return DynamicColor(hex: 0xbbbbbb)}
    static var black15 : UIColor {return DynamicColor(hex: 0x111111)}
    static var black17 : UIColor {return DynamicColor(hex: 0x151515)}
    static var black20 : UIColor {return DynamicColor(hex: 0x161616)}
    static var black25 : UIColor {return DynamicColor(hex: 0x191919)}
    static var black30 : UIColor {return DynamicColor(hex: 0x111111)}
    static var black31 : UIColor {return DynamicColor(hex: 0x1b1b1b)}
    static var black311 : UIColor {return DynamicColor(hex: 0x1c1c1c)}
    static var black312 : UIColor {return DynamicColor(hex: 0x1e1e1e)}
    static var black32 : UIColor {return DynamicColor(hex: 0x202020)}
    static var black33 : UIColor {return DynamicColor(hex: 0x242424)}
    static var black322 : UIColor {return DynamicColor(hex: 0x212121)}
    static var black40 : UIColor {return DynamicColor(hex: 0x353535)}
    static var black42 : UIColor {return DynamicColor(hex: 0x353535)}
    static var black43 : UIColor {return DynamicColor(hex: 0x313131)}
    static var black45 : UIColor {return DynamicColor(hex: 0x3c3c3c)}
    static var black66 : UIColor {return DynamicColor(hex: 0x666666)}
    static var black70 : UIColor {return DynamicColor(hex: 0x707070)}
    static var black80 : UIColor {return DynamicColor(hex: 0x888888)}
    static var black90 : UIColor {return DynamicColor(hex: 0xaaaaaa)}
    static var black130 : UIColor {return DynamicColor(hex: 0xc8c8c8)}
    static var black140 : UIColor {return DynamicColor(hex: 0xcfcfcf)}
    static var black150 : UIColor {return DynamicColor(hex: 0xe5e5e5)}
    static var black160 : UIColor {return DynamicColor(hex: 0xd5d5d5)}
    static var black165 : UIColor {return DynamicColor(hex: 0xd1d1d1)}
    static var black170 : UIColor {return DynamicColor(hex: 0xe1e1e1)}
    static var black180 : UIColor {return DynamicColor(hex: 0xededed)}
    static var black183 : UIColor {return DynamicColor(hex: 0xf5f5f5)}
    static var black190 : UIColor {return DynamicColor(hex: 0xf6f6f6)}

    /// 链接颜色
    static var link : UIColor {return DynamicColor(hex: 0x2440b3)}

    /// 主色调,暗一点按钮颜色
    static var primaryButton : UIColor {return DynamicColor(hex: 0x596c94)}

    /// vip金色
    static var vipBorder : UIColor {return DynamicColor(hex: 0xc4b2ad)}

    static var divider2 : UIColor {return DynamicColor(hex: 0x484848)}

    /// 亮灰色,例如:设置item右侧图标,右侧更多文本颜色
    static var lightGray : UIColor {return DynamicColor(hex: 0x888888)}

    /// 错误警告颜色,主要是做敏感操作,例如:删除联系人时,确认按钮颜色
    static var warning : UIColor {return DynamicColor(hex: 0xf85353)}

    /// 优惠券文本颜色
    static var textPrice : UIColor {return DynamicColor(hex: 0xf42102)}

    /// 绿色,表示正确颜色
    static var pass : UIColor {return DynamicColor(hex: 0x0ab855)}
}

定动态颜色

为了能适配深色模式,创建动态颜色,通过initColor方法,根据当前手机的主题颜色返回对应模式适配的颜色,如:当前手机为深色模式,则返回定义的深色模式的颜色值。

Swift 复制代码
extension UIColor{
    /// 主色调
    static var colorPrimary: UIColor {
        return .initColor(normal: .primaryColor, dark: .primary30)
    }

    /// 背景色
    static var colorBackground: UIColor {
        return .initColor(normal: .black183, dark: .black17)
    }


    static var colorBackgroundLight: UIColor {
        return .initColor(normal: .white, dark: .black17)
    }

    /// 背景色上面内容颜色
    static var colorOnBackground: UIColor {
        return .initColor(normal: .black20, dark: .black140)
    }

    /// 背景色上面内容背景颜色,例如card背景,会话界面item背景,其他的例如LinearLayout这样的控件,需要手动指定使用该属性
    static var colorSurface: UIColor {
        return .initColor(normal: .white, dark: .black33)
    }

    /// colorSurface点击颜色
    static var colorSurfaceClick: UIColor {
        return .initColor(normal: .black130, dark: .black322)
    }

    /// colorSurface上面的主内容颜色,例如:card上面主要内容颜色,会话界面item上面标题颜色
    static var colorOnSurface: UIColor {
        return .initColor(normal: .black25, dark: .black165)
    }

    static var colorDivider: UIColor {
        return .initColor(normal: .black180, dark: .black33)
    }

    static var colorDivider2: UIColor {
        return .initColor(normal: .black170, dark: .black30)
    }

    static var colorSlideBackground: UIColor {
        return .initColor(normal: .black170, dark: .black17)
    }

    static var colorLightWhite: UIColor {
        return .initColor(normal: .white, dark: .black180)
    }

    static var secondButtonLight: UIColor {
        return .initColor(normal: .white, dark: .black45)
    }

    /// 文本消息左侧背景
    static var leftChatBackground: UIColor {
        return .initColor(normal: .black170, dark: .black17)
    }

    /// 文本消息右侧背景
    static var rightChatBackground: UIColor {
        return .initColor(normal: .colorPrimary, dark: .colorPrimary)
    }

    // MARK: - 颜色定义快捷方法

    /// 定义浅色,深色颜色快捷方法
    /// - Returns: <#description#>
    static func initColor(normal:UIColor,dark:UIColor) -> UIColor {
        if #available(iOS 13.0, *) {
            return UIColor { (traitCollection) -> UIColor in
                return traitCollection.userInterfaceStyle == .dark ? dark : normal
            }
        }else{
            //用浅色
            return normal
        }
    }
}

使用

设置所有界面背景颜色,如果某个界面不一样,但具体界面单独设置:

Swift 复制代码
//默认颜色,如果某些界面不一样,在单独设置
view.backgroundColor = .colorBackground
相关推荐
程序猿看视界5 小时前
如何在 UniApp 中实现 iOS 版本更新检测
ios·uniapp·版本更新
dr李四维9 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
️ 邪神9 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱20 小时前
flutter项目苹果编译运行打包上线
flutter·ios
网络安全-老纪1 天前
iOS应用网络安全之HTTPS
web安全·ios·https
1024小神1 天前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
lzhdim1 天前
iPhone 17 Air看点汇总:薄至6mm 刷新苹果轻薄纪录
ios·iphone
安和昂1 天前
【iOS】知乎日报第四周总结
ios
麦田里的守望者江1 天前
KMP 中的 expect 和 actual 声明
android·ios·kotlin
_黎明1 天前
【Swift】字符串和字符
开发语言·ios·swift