ios - wkwebviewにiOS 13ダークモードを使用する方法

Question

私はXcode 11ベータ版でiOS 13に取り組んでいました。Web ビューでダーク モードをサポートする方法はありますか? WKWebviews を除く他のすべてのビューのカラー セットを作成しました。ダークモードのWebビューの背景とテキストの色を変更するには?

Answer 1

を使用してログインしているため、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 で開発者メニュー オプションを有効にする必要があります)。(Command + Options + I を使用して) wen inspector を開くと、この画面が表示され、ライト/ダーク モードを切り替えるオプションが表示されます。

注: もう少し情報を追加します。色と同じように、さまざまな画像を処理することもできます。

前

<img src="day.jpg">

後

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

Answer 2

よりシンプルに、画像を除くすべての色とスタイルを反転するだけです:

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