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

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

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

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

準備する

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

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

例示する

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

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>

CS

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

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

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

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

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

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

推薦する

CentOS8 ネットワークカード設定ファイル

1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...

Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告

Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...

ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

mysql mycat ミドルウェアの簡単な紹介

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

Linux で特定のプログラムを見つけるための whereis の例の詳細な説明

Linuxは特定のプログラムを見つけますwhereis コマンドは主にプログラム ファイルを検索し、...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

目次必要：アイデア:レッスン：テキストを共有する:要約する必要：インターフェイスからサブメニュー デ...

Jsonフォーマットの詳細な説明

目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....

要素フォーム検証で検証プロンプトをクリアする方法

目次問題のシナリオ:解決： 1. フィールドを個別にチェックする2. フォームフィールドの下のフィー...

vue-router 4 の使用例の詳しい説明

目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...

グリーンスタイルのウェブデザイン作品18点の最新コレクション

トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...

MySQL InnoDB ストレージ エンジンの詳細

序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする（1）ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

JavaScript のクロージャの詳細な説明

導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...