HTML ページはダークモードの実装をサポートします

2019年から、AndroidとiOSの両方のプラットフォームでダークモードが使用され始めました。もちろん、これに問題はありませんが、ユーザーがダークモードでページを開くと、従来の白色ですぐに目がくらんでしまいます。

以下では、ページをダークモードに対応させる方法について簡単に説明します。

準備する

実際には、CSS で prefers-color-scheme メディアクエリを使用するだけで済みます。

no-preference は、ユーザーがオペレーティングシステムのテーマを指定していないことを示します。ブール値として false が出力されます。
light は、ユーザーのオペレーティングシステムがライトテーマであることを示します。
dark は、ユーザーのオペレーティングシステムにダークテーマが設定されていることを示します。

例示する

この記事の執筆時点では、WeChat は prefers-color-scheme パラメータを取得できなかったため、WeChat でページを開くと、ダークモードは現在サポートされていません。
この方法は単なるデモであり、この方法を使用して他の実装方法を拡張することができます。
優先カラースキームの説明
デモアドレス

html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">
    <title>ページをダークモードに適応させる</title>
</head>
<body class="back">
<div class="models"><h1>テストテキスト</h1></div>
</本文>
</html>

.back {背景: 白; 色: #555; テキスト配置: 中央}

@media (優先カラースキーム: 暗い) {
  .back {背景: #333; 色: 白;}
  .models {境界線:実線 1px #00ff00}
}

@media (優先カラースキーム: 明るい) {
  .back {背景: 白; 色: #555;}
  .models {境界線:実線 1px #2b85e4}
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

>>: css-loader を使用して vue-cli で css モジュールを実装する