Jumat, 19 April 2024

  Dark mode atau mode gelap adalah fitur yang memungkinkan pengguna untuk mengganti tampilan sebuah halaman web menjadi gelap. Fitur ini semakin populer karena dianggap lebih ramah untuk mata terutama saat digunakan dalam kondisi cahaya rendah atau gelap.

  Dalam artikel ini, kita akan membahas cara menerapkan dark mode di halaman HTML dengan menggunakan CSS dan JavaScript. Dark mode diimplementasikan dengan menyesuaikan warna latar belakang dan teks agar lebih mudah dibaca dalam kondisi gelap.

Cara Menerapkan Dark Mode dengan CSS

  Pertama-tama, kita dapat menggunakan media query dalam CSS untuk mengubah tampilan halaman menjadi gelap ketika pengguna memilih mode gelap pada perangkatnya. Berikut adalah contoh kode CSS untuk menerapkan dark mode:

 
 @media (prefers-color-scheme: dark) {
 body {
 background-color: #000;
 color: #fff;
 }
 }
 
 

  Dengan menggunakan media query (prefers-color-scheme: dark), halaman web akan berubah tampilan menjadi gelap secara otomatis sesuai dengan preferensi mode gelap yang dipilih oleh pengguna pada perangkatnya.

Cara Menerapkan Dark Mode dengan JavaScript

  Selain menggunakan CSS, kita juga dapat menerapkan dark mode dengan menggunakan JavaScript. Dengan JavaScript, kita dapat membuat sebuah tombol atau toggle yang memungkinkan pengguna untuk beralih antara mode gelap dan mode terang. Berikut adalah contoh kode JavaScript untuk menerapkan dark mode:

 
 const toggleSwitch = document.querySelector(.dark-mode-switch input[type=checkbox]);
 function switchTheme(e) {
 if (e.target.checked) {
 document.documentElement.setAttribute(data-theme, dark);
 } else {
 document.documentElement.setAttribute(data-theme, light);
 }
 }
 toggleSwitch.addEventListener(change, switchTheme, false);
 
 

  Dalam contoh kode JavaScript di atas, kita menggunakan event listener untuk mengubah atribut data-theme pada elemen html berdasarkan status toggle yang dipilih oleh pengguna.

Kesimpulan

  Dengan menggunakan CSS dan JavaScript, kita dapat dengan mudah menerapkan dark mode di halaman HTML. Dark mode dapat meningkatkan pengalaman pengguna terutama dalam kondisi cahaya rendah atau gelap.

  Sekian tips dari kita, semoga bermanfaat dalam memperbaiki tampilan dark mode pada halaman web Anda. Terima kasih telah membaca!

#DarkModeHTML
#HTMLDesign
#WebDevelopment
#UIUX
#FrontEndDev