如何为 wkwebview 使用 iOS 13 暗模式

Posted 2023-02-19

【中文标题】如何为 wkwebview 使用 iOS 13 暗模式

【英文标题】：how to use iOS 13 darkmode for wkwebview

【发布时间】：2019-12-03 20:19:04

【问题描述】：

我正在使用 Xcode 11 beta 为 ios 13 工作。有什么方法可以在 Web 视图上支持暗模式？我为除 WKWebviews 之外的所有其他视图创建了一个颜色集。如何更改深色模式的网页视图背景和文本颜色？

【问题讨论】：

更具体。在明暗模式之间，您的网络视图需要发生什么？ Edit您的问题详情（请勿在评论中回复）。

【参考方案1】：

假设您的问题是询问如何根据是亮模式还是暗模式来更改您在 WKWebView 中显示的 html 内容的颜色，那么您在应用程序的代码中没有任何操作。所有更改都需要在您的 HTML 内容使用的 CSS 中。

我有一些在 WKWebView 中使用的本地 HTML 文件。我能够通过更新我的 css 文件来支持暗模式。

假设您当前有一个包含以下内容的 css 文件：

body 
    background-color: white;
    color: black;


a:link 
    color: #0078b5;
    text-decoration: none;

这些在灯光模式下都很好。要同时支持暗模式，您可以在 CSS 中添加 @media 部分：

@media (prefers-color-scheme: dark) 
    body 
        background-color: rgb(38,38,41);
        color: white;
    
    a:link 
        color: #0096e2;
    
    a:visited 
        color: #9d57df;
    

在暗模式下，@media 部分中的颜色将覆盖@media 部分之外定义的相应颜色。

【讨论】：

由于某种原因，这对我在 iOS13 上不起作用。我最终只是为 CSS 部分执行此操作...NSString *cssString = @":root color-scheme:light dark;"; // 1

我如何在 xcode 上使用它？

【参考方案2】：

我在迁移我的 iOS 应用程序时遇到了同样的挑战，因为我们确实使用 WKWebView 登录，当我咨询时，我发现下面的示例可以处理这种情况。只需要为颜色创建变量并需要在 CSS 中处理。

之前

body  color: black; 
h1  color: white; 
.header 
    background-color: #FFFFFF;
    color: white;

之后

:root 
    color-scheme: light dark;
        --h1-color: #333;
        --header-bg-clr: #FFF1FF;
        --header-txt-clr: white;
    
    @media (prefers-color-scheme: dark) 
    :root 
        color-scheme: light dark;
        --h1-color: #333;
        --header-bg-clr: #FFF1FF;
        --header-txt-clr: white;
        
    

body  
h1  color: var(--h1-color); 
.header 
    background-color: var (--header-bg-clr);
    color: var(--header-txt-clr);

集成此更改后，您可以使用 Safari 进行测试（首先您需要在 Sarafi、Preferences、Advanced 中启用开发者菜单选项）。打开 wen 检查器（使用 Command + Options + I），您将看到此屏幕，其中包含切换亮/暗模式的选项。

注意只是为了添加更多信息。您还可以像处理颜色一样处理不同的图像。

之前

<img src="day.jpg">

之后

<picture>
<source srcset="light.jpg" media="(prefers-color-scheme: light)">
<img src="day.jpg">
</picture>

【讨论】：

我如何在 xcode 上使用它？

【参考方案3】：

斯威夫特 5

对于WKWebView，下面的代码对我有用。

extension RichTextController : WKNavigationDelegate 
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 
        let cssString = "@media (prefers-color-scheme: dark) body color: white;a:link color: #0096e2;a:visited color: #9d57df;"
        let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
        webView.evaluatejavascript(jsString, completionHandler: nil)
    

【讨论】：

不为我工作你能帮帮我吗？ ***.com/questions/69830561/…

【参考方案4】：

更简单，只需反转除图像之外的所有颜色和样式：

@media (prefers-color-scheme: dark) 
    html
        filter: invert(1)  hue-rotate(.5turn);
    
    img 
        filter: invert(1)  hue-rotate(.5turn);
    

【参考方案5】：

根标签将反转除表格之外的所有组件颜色，并且图像将为负形式。

要执行完美的颜色反转检查下面的 CSS 文件

   @media (prefers-color-scheme: dark) 
     /* root tag inverting all the components color except the table.*/
     : root 
            color-scheme: light dark;
        filter: invert(100%);
       -webkit-filter: invert(100%)
     
    /*table tag needed for inverting table content.*/
    table 
            filter: invert(100%);
     
    /* If We do color invert in : root , images will be color inverted and it will be in negative. If we invert again these negative images, it will be positive.*/
     img 
         filter: invert(100%);
     
    

【讨论】：

我如何在 xcode 上使用它？