web-dev-qa-db-fra.com

comment utiliser le mode sombre iOS 13 pour wkwebview

Je travaillais pour iOS 13 avec Xcode 11 beta. Existe-t-il un moyen de prendre en charge le mode sombre sur les vues Web? J'ai créé un jeu de couleurs pour toutes les autres vues sauf WKWebviews. Comment changer l'arrière-plan de la vue Web et la couleur du texte pour le mode sombre?

ioswkwebviewios13ios-darkmode
11
Vinu David Jose

La balise racine inversera toutes les couleurs des composants sauf le tableau et les images seront sous forme négative.

Pour effectuer une inversion parfaite des couleurs, consultez le fichier CSS ci-dessous

   @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

Plus simple, il suffit d'inverser toutes les couleurs et tous les styles à l'exception des images:

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

Swift 5

Pour WKWebView, le code ci-dessous a fonctionné pour moi.

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