web-dev-qa-db-ja.com

wkwebviewのiOS 13ダークモードの使用方法

Xcode 11ベータ版のiOS 13で作業していました。 Webビューでダークモードをサポートする方法はありますか？ WKWebviews以外のすべてのビューのカラーセットを作成しました。ダークモードのWebビューの背景とテキストの色を変更するにはどうすればよいですか？

ioswkwebviewios13ios-darkmode
11
Vinu David Jose

ルートタグは、テーブルを除くすべてのコンポーネントの色を反転させ、画像はネガティブ形式になります。

完全な色反転を実行するには、以下の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%);
     }
    }
0
Manikandan

よりシンプルで、画像以外のすべての色とスタイルを反転させるだけです。

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

Swift 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)
    }
}
0
Dhaval Bhimani