Cara membuat perubahan mod Gelap/Cahaya yang lancar

Baiklah, jadi anda berada di tapak web dan ia berada dalam mod gelap. Tetapi anda lebih suka mod ringan (jika anda melakukannya, itu hak prerogatif anda?). Dah pukul 3 pagi. Anda klik togol mod gelap/terang. Tiba-tiba, kilat! Kebutaan sementara berlaku, diikuti dengan tinnitus dan sawan. Perjalanan mahal ke ER kemudian (terima kasih, sistem penjagaan kesihatan AS!), dan anda keluar beribu-ribu.

Itu agak hiperbola, tetapi suis tema yang menggelegar tidak dapat dinafikan menjengkelkan. Mari kita betulkan! Menggunakan CSS termaju (okay, mungkin bukan itu canggih), kita boleh melaksanakan peralihan yang lancar. Saya akan memberikan kod dan penjelasan.

Pertama, anda memerlukan penukar tema. Lihat Pautan Ini untuk mendapatkan arahan jika anda belum memilikinya. Kaedah ini serasi dengan pembolehubah CSS (--color: blue;) dan pendekatan yang serupa.

Ini kodnya:

* {
  transition-duration: 1s;
}

Laraskan 1s (satu saat) kepada kelajuan peralihan pilihan anda.

Asterisk (*) ialah pemilih universal, bermakna setiap elemen pada halaman terjejas. Dengan menetapkan transition-duration, kami memberitahu penyemak imbas untuk menggunakan peralihan yang lancar apabila mana-mana sifat mana-mana elemen berubah. Mudah!

Terima kasih kerana membaca!

Andrew McSillyone

Atas ialah kandungan terperinci Cara membuat perubahan mod Gelap/Cahaya yang lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!