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 モジュールを実装する

推薦する

Windows で MySQL サービスを停止または削除できない問題の解決策

圧縮パッケージを解凍して Windows に MySQL をインストールしました。インストール方法は...

Vue.js ソースコード解析のカスタム手順の詳細な説明

序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...

MySQLのインストールと設定方法のグラフィックチュートリアル（CentOS7）

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう...

JavaScript WeakMap の使い方の詳しい説明

WeakMap オブジェクトは、キーが弱参照であるキー/値のペアのコレクションです。キーはオブジェク...

Centos6.9 インストール Mysql5.7.18 ステップ記録

インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...

Vue はインターフェースのスライド効果を実装します

この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

デザイン理論：人の心を理解する方法

<br />かつて、仏印と東坡氏が仏教について雑談していたとき、東坡氏が突然こう言った。...

Vueはv-showを通じて最高の効果を達成します

html <div class="totop" v-show="...

Ubuntu の仮想環境に Django をインストールする方法

Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

Dockerにlogstashをインストールする詳細な手順

docker-compose.yml を編集し、次のコンテンツを追加します。 バージョン: '...

Tomcat10 Catalinaのログの文字化けの問題を解決する

実行環境、Idea2020バージョン、Tomcat10、実行時にTomcat CatalinaLog...