Html5プロジェクト適応システムダークカラーモードプログラム概要の詳細説明

2022-01-21 23:21:24

I. 背景

iOS 13のリリースに伴い、ダークモードはますます世間の注目を集め、少し前にWeChatの適応が改めて話題になるなど、最近のモバイルアプリやWebサイトではダークモードへの対応がトレンドになっています。ダークモードは、消費電力を劇的に削減し、明るいコントラストを弱めるだけでなく、視認性と没入感を向上させることができます。

ダークモードへの切り替え方法

iOS: 設定 - ディスプレイと明るさ - 外観 - 暗い色を選択します。
Android: "システム設定"-"ディスプレイ"-"ダークモード".

II. 問題点

システムがダークカラーモードを設定した場合、H5ページが対応する処理を行わないため、背景色の衝突、暗いテキストの異常表示、暗いアイコンの異常表示など、表示上の問題が発生します。

そのため、ダークモードに何らかの適応をする必要があります。

いろいろと試してみました。

第三に、H5プロジェクトは、ダークカラーモードスキームを適応させる

1. カラースキームの宣言

カラースキーム

これには2つの方法があります。

1.1meta

ヘッドで宣言する <meta name="color-scheme" content="light dark"> 現在のページがライトとダークの両方のモードをサポートしており、システムがダークモードに切り替わると、ブラウザのデフォルトのスタイルもダークに切り替わることを宣言しています。

1.2 CSS

以下のcssでも、上記のmeta宣言の効果を得ることができます。

:root {
    color-scheme: light dark;
}

注：この宣言はページを自動適応させるものではなく、ブラウザのデフォルトのスタイルにのみ影響します

詳細については、W3Cのドキュメントを参照してください。 CSSカラーアジャストメントモジュールレベル 1

2. CSSメディアによるクエリ

プリファース・カラー・スキーム

CSSのメディア機能を利用して、ユーザーがシステムのテーマカラーを「明るい」「暗い」のどちらに設定しているかを検知しています。

ノープレファレンス
この領域でのユーザーの選択肢をシステムが認識していないことを示す。ブーリアンコンテキストでは、falseの結果で実行される。

ライト
ユーザーがインターフェイスにライトテーマを使用することをシステムに通知したことを示す。

暗い
ユーザーがインターフェイスにダークテーマを使用することをシステムに通知したことを示す。

:root {
    color-scheme: light dark;
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        background: black;
        color: white;
    }
}
// For more colors, it is recommended to use CSS variables to manage the color values

3. 画像の適応

picture+sourceタグを使用して、異なるモードの画像のurlを設定します。

HTMLの <picture> 要素は、0個以上の <source> 要素と <img> 要素を含んで、異なるディスプレイ/デバイスのシナリオに対応した画像バージョンを提供します。
ブラウザは、最も適合する子要素の <source> を選択し、適合するものがない場合は <img> 要素の src 属性にある URL を選択します。選択された画像は、<img> 要素が占めるスペースにレンダリングされます。

<picture>
    <! -- picture in dark mode -->
    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
    <! -- image in default mode -->
    <img src="light.jpg"/>
</picture>

4. JavaScript &で現在のモードを決定し、モード変更をリッスンする。

4.1MatchMedia

ウインドウの matchMedia() メソッドは、指定されたメディアクエリー (en-US) 文字列を解析した結果を表す新しい MediaQueryList オブジェクトを返します。返された MediaQueryList は，文書がメディアクエリに一致するかどうかを決定するため，又はメディアクエリに一致するか又は一致しなくなるかを決定するために文書を監視するために使用されることができる。

4.2addListener()
のMediaQueryListインターフェイスは addListener() メソッドは、メディアクエリの状態への変更に応じてカスタムコールバック関数を実行するリスナーをMediaQueryListenerに追加します。

JavaScriptリスナー決定

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

function darkModeHandler() {
    if (mediaQuery.matches) {
        console.log('Now in dark mode')
    } else {
        console.log('Now in light mode')
    }
}

// Determine the current mode
darkModeHandler()
// Listen for mode changes
mediaQuery.addListener(darkModeHandler)

今回紹介したのはHtml5プロジェクト適応システムダークモードの概要で、もっと関連するHtml5ダークモード内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスを応援してくださいね。