Beranda>Tutorial Desain Web>tutorial HTML

Implementasi halaman HTML mendukung mode gelap

Penulis：Eve Cole Waktu Pembaruan：2025-04-11 07:16:01

Sejak 2019, platform Android dan iOS telah mulai memainkan mode gelap. Tentu saja, tidak ada yang salah dengan ini, tetapi ketika halaman kami dihidupkan oleh pengguna dalam mode gelap, putih besar tradisional akan langsung dibutakan oleh mata.

Di sini saya akan berbicara singkat tentang cara membuat halaman mendukung mode gelap.

Mempersiapkan

Bahkan, kita hanya perlu menggunakan kueri media skema warna-warna di CSS.

  1. Tidak ada preferensi berarti bahwa pengguna belum merumuskan tema sistem operasi. Saat digunakan sebagai boolean, output salah.
  2. Cahaya berarti bahwa sistem operasi pengguna adalah tema berwarna terang.
  3. Gelap berarti bahwa sistem operasi pengguna adalah tema gelap.
menjelaskan

  1. Ketika artikel ini diterbitkan, WeChat tidak bisa mendapatkan parameter prefers-color-scheme, jadi ketika kita membuka halaman di WeChat, saat ini tidak mendukung Mode Gelap.
  2. Metode ini hanyalah demo sederhana, dan Anda dapat menggunakan metode ini untuk memperluas implementasi lain.
  3. lebih memilih instruksi skema warna
  4. Alamat demo

Html

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>Page adapts to dark mode</title></head><body class=back><div class=models><h1>Test Teks </h1> </div> </body> </html>

CSS

 .back {latar belakang: putih; Warna: #555; Text-Align: center} @media (lebih prefers-color-skema: gelap) {.back {latar belakang: #333; Color: white;} .models {border: solid 1px #00ff00}}@media (lebih disukai-skema: light) {.back {latar belakang: white; Warna: #555;} .models {border: solid 1px #2b85e4}}

Di atas adalah semua konten artikel ini. Saya harap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.

Artikel Terkait