如何將 iOS 13 暗模式用於 wkwebview

Question

我正在使用 Xcode 11 beta 為 iOS 13 工作。 有什么方法可以在網頁視圖上支持暗模式？ 我為除 WKWebviews 之外的所有其他視圖創建了一個顏色集。 如何更改深色模式的 Web 視圖背景和文本顏色？

Answer 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部分之外定義的相應顏色。

Answer 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、首選項、高級中啟用開發人員菜單選項）。 打開 wen 檢查器（使用 Command + Options + I），您將看到此屏幕，其中包含切換亮/暗模式的選項。

注意只是為了添加更多信息。 您還可以像處理顏色一樣處理不同的圖像。

前

<img src="day.jpg">

后

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

Answer 3

斯威夫特 5

對於WKWebView ，下面的代碼對我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)
    }
}

Answer 4

更簡單，只需反轉除圖像以外的所有顏色和樣式：

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

Answer 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%);
     }
    }