SFSafariViewController 没有带有自定义条形颜色的暗模式

Posted 2023-03-14

【中文标题】SFSafariViewController 没有带有自定义条形颜色的暗模式

【英文标题】：SFSafariViewController no dark mode with custom bar tint color

【发布时间】：2021-01-07 10:42:03

【问题描述】：

我从我的应用程序调用SFSafariViewController 以打开myurl。我更改了SFSafariViewController 的条形颜色。这很好用：

vc.preferredBarTintColor = UIColor.teal025

但是，当设备将外观样式模式从浅色更改为深色时，条形色调颜色保持 teal025 并且不会像默认条形色调颜色那样调整为较深的颜色（例如，从浅灰色变为深色灰色）如果未使用preferredBarTintColor 设置。

应用的主要部分也使用 teal025 作为导航栏的色调。进入暗模式时，这些对象会根据需要自动调整颜色。

我怎样才能使 SFSafariViewController 条形颜色具有相同的行为？

这里是完整的代码：

let urlString = "https://myurl"
if let url = URL(string: urlString) 
    let vc = SFSafariViewController(url: url)
    vc.preferredBarTintColor = UIColor.teal025 // this prevents dark mode change
    vc.preferredControlTintColor = UIColor.teal100
    present(vc, animated: true)

NB1：我不想使用 UIWebView，因为 myurl 使用 Google 字体，在使用 UIWebView 的 ios 上无法正常显示。

NB2：teal025 和 teal100 是自定义颜色。

--- 更新 --- (10.01.2021)

根据要求，我在这里定义（d）我的颜色。

extension UIColor 
    static var teal025: UIColor  return UIColor(red: 0.0, green: 127.0/255.0, blue: 127.0/255.0, alpha: 1.0)  // 0x008080

--- 更新 --- (12.01.2021)

我的目标是让 SFSafariViewController 栏色调与应用程序的导航栏具有完全相同的色调、渐变和半透明度。我的导航类型是Prefer Large Titles 样式以及scrollEdgeAppearance。这两个属性处理自动亮/暗偏好变化以及半透明和垂直颜色渐变。我相信 SFSafariViewController 没有所有这些规定。所以最接近的是 UIColor 的 dynamicProvider 初始化器，正如 CSmith 所建议的那样。这将“仅”解决明/暗偏好变化。

let urlString = "https://myurl"
if let url = URL(string: urlString) 
    let vc = SFSafariViewController(url: url)
    vc.preferredBarTintColor = UIColor.safariBarTint
    vc.preferredControlTintColor = UIColor.safariControlTint
    present(vc, animated: true)


extension UIColor 
    struct Material 
        static var orangeA100: UIColor  return UIColor(red: 0xff / 0xff,
                                                        green: 0xd1 / 0xff,
                                                        blue:  0x80 / 0xff,
                                                        alpha: 1.0)  // #FFD180
        ...
        static var orangeA700: UIColor  return UIColor(red: 0xff / 0xff,
                                                        green: 0x6d / 0xff,
                                                        blue:  0x00 / 0xff,
                                                        alpha: 1.0)  // #FF6D00
    


static var safariBarTint: UIColor 
    if #available(iOS 13.0, *) 
        return UIColor  (traits: UITraitCollection) -> UIColor in
            return traits.userInterfaceStyle == .dark ?
                UIColor.Material.orangeA700 :
                UIColor.Material.orangeA100
        
     else  // for iOS 12 and earlier
        return UIColor.Material.orangeA100
    

static var safariControlTint: UIColor 
    if #available(iOS 13.0, *) 
        return UIColor  (traits: UITraitCollection) -> UIColor in
            return traits.userInterfaceStyle == .dark ?
                UIColor.Material.orangeA100 :
                UIColor.Material.orangeA700
        
     else  // for iOS 12 and earlier
        return UIColor.Material.orangeA700
    

我相信应用导航栏和 SFSafariViewController 之间的 1:1 颜色适配必须手动完成，因此仍然是在黑暗中拍摄？！

我相信上面的代码是我能得到的最接近的。

【参考方案1】：

我观察到SFSafariViewController 正确地尊重了UIColor 设置为preferredBarTintColor 的明暗变体。您在 UIColor 扩展中对 teal025 的定义定义了单一颜色变体 (0x008080)，并且没有单独的深色模式颜色。

要解决在颜色资产目录中定义您的 teal025 并使用以下方法加载值：

preferredBarTintColor = UIColor.init(named:"teal025")

通过为设置Appearance 选择“Any,Dark”，确保在颜色资源中同时定义深色和浅色变体，然后为每种颜色设置适当的颜色。

或者，使用 UIColor 的 dynamicProvider 初始化器在运行时返回暗模式和亮模式变体，如下所示：

extension UIColor 

    static var teal025: UIColor 
    
        if #available(iOS 13.0, *) 
        
            return UIColor  (traits: UITraitCollection) -> UIColor in
                
                // Return one of two colors depending on light or dark mode
                return traits.userInterfaceStyle == .dark ?
                    UIColor(red: 0.0, green: 0.5, blue: 0.5, alpha: 1) :
                    UIColor(red: 0.0, green: 0.4, blue: 0.4, alpha: 1)
            
         
        else 
        
            // for iOS 12 and earlier
            return UIColor(red: 0.0, green: 0.5, blue: 0.5, alpha: 1)
        
    

最后，在更好地理解您的问题后，您可能会发现 SFSafariViewController 条形颜色看起来与您的应用不同，因为条形半透明。目前没有办法访问SFSafariViewController的UINavigationBar来禁用半透明。

【讨论】：

您的代码有效。但是，我（可能是错误地）在“印象”下，即使自定义 UIColors 在从浅色模式更改为深色模式时也会自动改变，就像故事板中定义的色调一样。是不是可以在代码中定义一个 UIColor 自动执行该操作（您的代码执行此操作，但手动执行）？如果不是，在给定特定的光模式颜色的情况下，如何确定（系统生成的）暗模式颜色的 RGB 值？

我编辑了我的答案，将颜色资产目录显示为首选方法，这将在用户更改设备暗/亮模式设置时处理自动更新

另请注意，没有“系统生成的暗模式颜色的 RGB 值给定特定的亮模式颜色”这样的概念。您可以决定在深色和浅色模式下，teal025 始终为 0x008080，或者稍微调整 RGB 值以获得最佳外观。

您说资产目录方法是首选，因为它会在用户更改明暗偏好时自动处理更改。我现在使用了您建议的扩展 UIColor 代码，并且一旦更改了明/暗首选项，此代码也会进行所需的 UI 更改。换句话说......我看不出资产目录和扩展 UIColor 代码方法在这方面有什么区别。

遗憾的是 SFSafariViewController 的 navigationController 属性似乎为零，因此您无法访问导航栏来执行诸如禁用半透明之类的操作，至少我不知道自 iOS 14 起