Javascript dan CSS : Tutorial Simpel Membuat Website Dark Mode

Last Updated on January 11, 2022 by

Saat ini fitur dark mode atau mode gelap sedang menjadi tren di berbagai website dan aplikasi selama beberapa tahun belakangan. Dark mode yang juga dikenal night mode adalah sebutan untuk tampilan front-end dengan latar hitam dan tulisan berwarna putih.

Sejatinya, mode gelap pada perangkat untuk mendukung kinerja pengguna bukanlah hal baru. Dark mode ini pertama kali digunakan oleh komputer zaman dahulu sebelum akhirnya digunakan oleh berbagai aplikasi saat ini.

Layar komputer zaman dahulu mempunyai latar gelap dengan huruf dan angka berwarna yang diakibatkan oleh kapasitas tabung sinar katoda yang digunakan pada masa itu. Mode gelap yang digunakan pada komputer saat pertama kali dibuat berasal dari layar Cathode Ray Tube (CRT) monokrom dengan fosfor berwarna hitam pada latar belakang yang dapat berubah menjadi hijau karena pengaruh elektron yang dipercepat.

Fitur ini pun menjadi populer setelah perusahaan- perusahaan besar seperti Apple dan Google memperkenalkan produk- produknya yang bertema gelap. Hal ini pun membuat dark mode banyak digunakan di berbagai aplikasi seperti YouTube, Twitter, Facebook, Instagram dan berbagai sosial media lainnya.

Tampilan dark mode menjadi tren di dunia teknologi saat ini karena selain terlihat unik dan menarik, fitur dark mode juga memiliki sejumlah manfaat, mulai dari manfaat kesehatan hingga manfaat dalam programing dan designing aplikasi maupun web.

Manfaat Dark Mode Dari Sisi Programing Dan Designing

Tampilan dark mode menjadi tren di dunia teknologi saat ini karena selain terlihat unik dan menarik, fitur dark mode juga memiliki sejumlah manfaat, mulai dari manfaat kesehatan hingga manfaat dalam programing dan designing aplikasi maupun web.

Hemat Baterai

Mode gelap atau dark mode dapat membantu para pengguna gadget untuk lebih menghemat baterai. Warna hitam pada layar ini membuat gadget tidak perlu bekerja lebih keras untuk menyalakan LED maupun OLED yang ada dalam layar.

Hal ini pun membuat energi yang dikeluarkan gadget Anda tidak terlalu besar. Tentunya, penghematan baterai ini akan berdampak baik pada gadget yang digunakan karena gadget Anda tidak harus sering melakukan pengisian baterai. Tentu hal ini juga akan membuat para pengguna gadget lebih bisa menghemat listrik serta berdampak baik pula pada lingkungan sekitar.

Mempermudah Proses Coding

Dark mode membantu para developer membuat proses coding menjadi lebih mudah. Adanya fitur dark mode membantu para developer dalam membuat perbedaan warna setiap syntax.

Perbedaan ini pun akan terlihat lebih jelas dalam mode gelap sehingga dapat mengurangi kesalahan pemrograman. Hal ini pun dapat berdampak pada efisiensi waktu pengerjaan bagi pada developer.

Mempermudah Proses Desain

Dark mode membantu para designer website untuk mendesain dengan lebih mudah. Tampilan layar yang gelap dapat membantu para designer web maupun aplikasi dapat fokus pada komponen desain utama.

Designer web menjadi tidak terganggu oleh spektrum warna lain khususnya tampilan putih pada layar umumnya yang dapat mengurangi konsentrasi para pengguna gadget.

Beberapa Manfaat Dark Mode Untuk Kesehatan

Dark mode atau mode gelap ini juga memiliki manfaat bagi kesehatan para penggunanya.

Baik untuk Mata

Menatap layar gadget terlalu lama dapat menyebabkan mata lelah, terlebih apabila layar gadget tersebut sangat terang. Layar yang terlalu terang atau sangat terang ini membuat mata Anda bekerja lebih keras dan membuat otot mata tegang.

Fitur dark mode ini membantu mengurangi cahaya berlebih masuk ke mata sehingga otot-otot mata bisa menjadi lebih rileks. Selain itu, fitur dark mode ini juga membantu mata dapat berkonsentrasi lebih nyaman karena cahaya yang masuk ke mata lebih minim.

Kemampuan Membaca Meningkat

Fitur dark mode tidak hanya berfungsi mengurangi kelelahan mata, tetapi juga membantu meningkatkan kemampuan membaca. Layar putih yang terang dengan tulisan hitam sering kali membuat mata kelelahan karena membuat otot mata tegang.

Hal ini pun membuat kemampuan membaca seseorang menurun. Dark mode dengan kombinasi tulisan berwarna putih dengan latar berwarna gelap dapat membantu seseorang menjadi lebih fokus dalam membaca.

Mengurangi Efek Radiasi Blue Light

Radiasi blue light atau sinar biru pada gadget dapat menyebabkan penyakit berbahaya. Selain, merusak pengelihatan manusia, radiasi ini juga dapat menyebabkan penyakit kanker serta dapat membuat seseorang mengalami gangguan tidur. Masyarakat modern cenderung tidak bisa melepaskan aktivitasnya dari gadget termasuk aktivitas sebelum tidur.

Bahkan, untuk membaca buku saja, seseorang lebih suka membaca menggunakan smartphone dibanding menggunakan buku fisi. Aktivitas penggunaan gadget sebelum tidur inilah yang membuat seseorang kerap mengalami gangguan tidur.

Fitur dark mode dapat mencegah radiasi blue light sehingga dapat meminimalisir resiko penyakit kanker. Minimnya radiasi blue light ini juga dapat mengurangi gangguan tidur dan membantu tidur menjadi lebih berkualitas.

Sistem Kerja Otak Menjadi Lebih Baik

Fitur dark mode dengan minimnya radiasi blue light yang dihasilkan dapat membantu pengguna gadget lebih mudah mendapatkan tidur yang berkualitas. Hal ini pun membuat otak menjadi lebih rileks sehingga dapay meningkatkan fungsi kerja otak.

Fungsi kerja otak yang meningkat ini pun membuat seseorang tidak mudah terpecah fokus saat beraktivitas.

Inilah pentingnya suatu aplikasi maupun website menyediakan fitur dark mode demi kenyamanan penggunanya. Oleh karena itu kami sajikan panduan mudah membuat dark mode pada website Anda serta cara switching ke light mode menggunakan CSS dan Javascript, agar pengunjung situs Anda menjadi lebih nyaman.

Membuat fitur dark mode di website dengan CSS dan Javascript hanya dengan tiga langkah. Berikut tutorialnya:

1. Buat Dokumen HTML

Pertama-pertama Anda perlu membuat dokumen HTML. Kami asumsikan, Anda sudah tahu cara membuat dokumen HTML. Jika ingin tahu caranya Anda bisa mencari panduannya dalam website ini. Di sini kami akan gunakan contoh HTML yang sederhana sebagai berikut:

<h1>Halo Semuanya</h1>

<p>Di sini saya akan jelaskan bagaimana cara membuat fitur Dark Mode dengan sangat mudah. Hanya dengan tiga langkah mudah.</p>

<p>Pertama-tama, terlebih dahulu anda harus membuat HTML dokumen kemudian, buatlah CSS, lalu tambahkan JavaScript. Jika Anda kebingungan membuat HTML atau CSS bisa klik link di bawah ini</p>

<a href=”#”> link di sini</a>

2. Buat CSS

CSS ini ditujukan untuk file dokumen serta untuk mode gelap. Contoh code pada CSS untuk membuat dark mode sebagai berikut:

body {
background: #fff;
font: 100% system-ui;
}
h1,
p {
color: #222;
}

body.dark-theme {
background: #121212;
}
body.dark-theme h1,
body.dark-theme p {
color: #eee;
}
body.dark-theme a {
color: #809fff;
}

<
3. Tambahkan JavaScript

Setelah selesai membuat CSS dan menambahkannya pada HTML dokumen. Saatnya Anda menambahkan JavaScript. Berikut contoh penambahan JavaScript:

const prefersDarkScheme = window.matchMedia(“(prefers-color-scheme: dark)”);

if (prefersDarkScheme.matches) {
document.body.classList.add("dark-theme");
} else {
document.body.classList.remove("dark-theme");
}

Itulah tiga langkah mudah dalam membuat website dark mode dengan CSS dan JavaScript. Namun jika Anda tidak menguasai coding dan ingin menggunakan fitur dark mode pada WordPress Anda tidak perlu khawatir. Anda tetap dapat menjalankan dark mode di WordPress Anda dengan menginstal plugin Dark Mode. Berikut panduannya:

1. Buka website WordPress Anda lalu klik Dashboard. Lalu pilih menu Plugins dan klik Add New. Anda pun akan diarahkan ke halaman yang terdapat banyak pilihan plugin.
2. Ketikan atau masukan kata kunci Dark Mode pada kolom yang tersedia kemudian klik Install Now pada plugin yang diinginkan. Klik Activate di lokasi tombol yang sama.
3. Setelah plugin aktif, kembali ke Dashboard dan cari menu Users lalu klik submenu Your Profile.
4. Carilah pilihan Dark Mode dan check bagian Enable Dark Mode in the Dashboard. Setelahnya, klik Update Profile di bagian bawah halaman.

Jika Anda tertarik untuk tahu informasi seputar teknologi aplikasi dan website, kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.