CSS: Mod gelap mudah

Mod gelap ialah pilihan paparan yang menukar tema warna tapak web atau aplikasi daripada latar belakang terang (dengan teks gelap) kepada latar belakang gelap (dengan teks terang). Mod ini semakin popular kerana faedahnya dalam mengurangkan ketegangan mata dalam persekitaran cahaya malap, menjimatkan tenaga pada peranti dengan skrin OLED dan menawarkan alternatif yang menarik secara visual kepada tema cahaya tradisional.
Biasanya, anda boleh menogol antara 3 mod: gelap, terang dan tetapan tema Sistem.

Cara lama

Sehingga kini kami telah menggunakan ciri media CSS skema warna pilihan:

Ciri media CSS skema warna pilihan digunakan untuk mengesan jika pengguna telah meminta tema warna terang atau gelap. Pengguna menunjukkan pilihan mereka melalui tetapan sistem pengendalian (cth. mod terang atau gelap) atau tetapan ejen pengguna.

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

Seperti yang anda lihat, kami perlu mengekalkan 2 tema, satu untuk setiap mod.
Mengambil pendekatan ini dalam aplikasi berskala besar mungkin sukar.

Cara baharu dan lebih baik

Nasib baik, CSS telah memperkenalkan harta baharu untuk menjadikan hidup kita lebih mudah, gelap-gelap() dan ia disokong oleh semua pelayar utama:

Fungsi CSS terang-gelap() membolehkan menetapkan dua warna untuk harta - mengembalikan salah satu daripada dua pilihan warna dengan mengesan jika pembangun telah menetapkan skema warna terang atau gelap atau pengguna telah meminta tema warna terang atau gelap - tanpa perlu membungkus warna tema dalam pertanyaan ciri media skema warna pilihan.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

Hanya gunakan sifat terang-gelap() pada setiap elemen yang kami ingin togol antara mod, itu sahaja!

Atas ialah kandungan terperinci CSS: Mod gelap mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!