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

著者：Eve Cole 更新時間：2025-04-11 07:16:01

2019年以来、AndroidプラットフォームとiOSプラットフォームの両方がダークモードのプレイを開始しています。もちろん、これには何の問題もありませんが、ダークモードでユーザーがページをオンにすると、伝統的な大きな白はすぐに目に盲目になります。

ここでは、ページがダークモードをサポートする方法について簡単に説明します。

準備する

実際、CSSでPreferreds-Color-Schemeメディアクエリを使用する必要があります。

非プレーは、ユーザーがオペレーティングシステムのテーマを策定していないことを意味します。ブール値として使用する場合、出力は偽です。
Lightは、ユーザーのオペレーティングシステムが明るい色のテーマであることを意味します。
Darkは、ユーザーのオペレーティングシステムが暗いテーマであることを意味します。

説明します

この記事が公開されたとき、WeChatはより好ましい色のかわいいパラメーターを取得できなかったため、WeChatでページを開くと、現在Dark Modeをサポートしていません。
この方法は単純なデモであり、この方法を使用して他の実装を拡張できます。
カラーシームの指示を好む
デモアドレス

HTML

 <！doctype html> <html lang = en> <head> <meta charset = utf-8> <viewport content = width = device-width、inictional-scale = 1.0、minigt-scale = 1.0、maximing-scale = 1.0、user-scalable = no> <title = adabs </hearテキスト</h1> </div> </body> </html>

CSS

 .back {background：white;色：＃555; Text-Align：center} @media（presters-color-scheme：dark）{.back {background：＃333;色：white;} .models {border：solid 1px＃00ff00}}@media（presters-color-scheme：light）{.back {background：white;色：＃555;} .models {border：solid 1px＃2b85e4}}}

上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。