Cara Menukar Laman Web Anda kepada Mod Gelap Menggunakan CSS dan JavaScript

pengenalan

Mod gelap ialah tetapan paparan yang menggunakan latar belakang gelap dengan teks dan elemen terang. Ia telah mendapat populariti kerana ia kelihatan baik dan menawarkan beberapa manfaat praktikal.

Kebaikan mod gelap termasuk:

1. Tekanan Mata Berkurang:Mod gelap boleh menjadi lebih mudah pada mata, terutamanya dalam persekitaran cahaya malap, kerana ia mengurangkan jumlah cahaya terang yang dipancarkan daripada skrin.
2. Hayat Bateri yang Dipertingkatkan pada Skrin OLED:Pada skrin OLED (Organic Light Emitting Diode), mod gelap boleh menjimatkan hayat bateri kerana piksel hitam pada dasarnya dimatikan, menggunakan lebih sedikit kuasa berbanding dengan memaparkan warna terang.

Dalam tutorial ini, kami akan membincangkan cara menukar tapak web anda kepada mod gelap menggunakan CSS dan JavaScript. Kami akan bermula dengan templat halaman web bertema ringan yang ringkas dan mengubahnya menjadi tapak web dengan mod terang/gelap boleh togol, membolehkan pengguna bertukar antara tema terang dan gelap dengan lancar.

Menyediakan Projek

Mari kita mulakan dengan templat halaman web bertema ringan yang ringkas. Kemudian, kami akan mengubahnya menjadi tapak web dengan mod terang/gelap boleh togol, membolehkan pengguna bertukar antara tema terang dan gelap.

Melaksanakan Gaya Mod Gelap

Memilih Warna

Langkah pertama ialah menyenaraikan semua warna yang kami gunakan dan pilih versi tema gelap untuk setiap satu. Dalam jadual di bawah, saya telah menyenaraikan semua warna pada halaman dan versi gelapnya yang sepadan.

Pembolehubah Tersuai

Kami kemudian menggunakan pembolehubah CSS untuk mencipta kelas gelap dan terang pada badan dengan pembolehubah tersebut.

body.dark { --body-bg: #121212; --primary-text: #e0e0e0; --header-footer-bg: #1f1f1f; --header-footer-text: #ffffff; --section-bg: #1f1f1f; --secondary-text: #1e90ff; --shadow: rgba(0, 0, 0, 0.2); } body.light { --body-bg: #f4f4f4; --primary-text: #333333; --header-footer-bg: #333333; --header-footer-text: #ffffff; --section-bg: #ffffff; --secondary-text: #006baf; --shadow: rgba(0, 0, 0, 0.1); }

Anda boleh membaca tentang pembolehubah CSS dalam Menggunakan sifat tersuai CSS. Pada asasnya, mereka ialah entiti yang ditakrifkan menggunakan dua sengkang (--) yang menyimpan nilai untuk digunakan semula dalam dokumen. Pembolehubah CSS menjadikan penyelenggaraan lebih mudah dengan membenarkan perubahan dikemas kini secara automatik.

Warna Elemen Dinamik

Kami menggunakan fungsi var() CSS untuk memasukkan nilai pembolehubah CSS. Dengan cara ini, kami boleh menukar warna secara dinamik dan mengemas kini satu pembolehubah untuk mencerminkan perubahan pada keseluruhan dokumen, dan bukannya menukar setiap satu secara manual.

Berikut ialah contoh elemen nav dan anak-anaknya:

body { background-color: var(--body-bg); color: var(--primary-text); } header, footer { background-color: var(--header-footer-bg); color: var(--header-footer-text); } article { background-color: var(--section-bg); box-shadow: 0 4px 8px var(--shadow); } a { color: var(--secondary-text); }

Togol Mod Cahaya/Gelap dengan JavaScript

Kini kita boleh menukar kelas badan kepada gelap atau terang untuk menukar tema. Mula-mula, tambahkan butang pada pengepala dan tetapkan fungsi changeTheme() untuk acara kliknya:

Tentukan fungsi changeTheme() yang menogol kelas badan:

function changeTheme() { if (document.body.classList.contains('light')) { document.body.classList.remove('light'); document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); document.body.classList.add('light'); } }

Dan kini pengguna boleh menukar tema laman web dengan mengklik pada butang.

Anda boleh melihat kod tutorial dalam CodePen di bawah

Langkah Seterusnya

Selain itu, anda boleh menyimpan pilihan tema pengguna dalam storan setempat. Mengemas kini fungsi changeTheme() untuk menyimpan tema yang dipilih dan menyemaknya apabila halaman dimuatkan akan memastikan pilihan pengguna diingati dan digunakan secara automatik pada lawatan seterusnya.

function changeTheme() { if (document.body.classList.contains('light')) { document.body.classList.remove('light'); document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); document.body.classList.add('light'); } // Save the current theme in localStorage const theme = document.body.classList.contains('dark') ? 'dark' : 'light'; localStorage.setItem('theme', theme); } document.addEventListener('DOMContentLoaded', function () { // Get the saved theme from localStorage when the page loads const savedTheme = localStorage.getItem('theme') || 'light'; document.body.classList.add(savedTheme); });

Menambah skema warna: gelap; hartanah semasa dalam tema gelap juga boleh memastikan bahawa sesetengah elemen, yang sebaliknya sukar untuk digayakan, akan diubah gayanya oleh penyemak imbas.

body.dark { color-scheme: dark; }

Kesimpulan

Kesimpulannya, menambahkan mod gelap pada tapak web anda boleh meningkatkan pengalaman pengguna dengan mengurangkan ketegangan mata dan memanjangkan hayat bateri pada skrin OLED. Dengan mengikuti panduan ini, anda boleh menyediakan togol mod terang/gelap dengan mudah menggunakan CSS dan JavaScript. Sesuaikan mod gelap agar sesuai dengan reka bentuk anda.

Kongsi pelaksanaan anda atau tanya soalan dalam ulasan di bawah.

Atas ialah kandungan terperinci Cara Menukar Laman Web Anda kepada Mod Gelap Menggunakan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!