19

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

4

5 回答 5

46

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

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

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

body {
    background-color: white;
    color: black;
}

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

这些在灯光模式下都很好。为了也支持暗模式，您可以@media在 CSS 中添加一个部分：

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

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

于 2019-07-25T17:13:54.553 回答
5

我在迁移我的 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>
于 2019-07-30T06:27:43.290 回答
4

斯威夫特 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)
    }
}
于 2020-04-16T11:03:23.700 回答
3

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

@media (prefers-color-scheme: dark) {
    html{
        filter: invert(1)  hue-rotate(.5turn);
    }
    img {
        filter: invert(1)  hue-rotate(.5turn);
    }
}
于 2020-04-06T16:06:20.887 回答
1

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

要执行完美的颜色反转检查下面的 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%);
     }
    }
于 2019-11-25T10:01:33.323 回答