Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end Tutorial Simpel Membuat Website Dark Mode dengan CSS dan...

Tutorial Simpel Membuat Website Dark Mode dengan CSS dan Javascript

-

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

darkmode2

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.

Artikel Terkait  Eksistensi Kode VS Terbaik Untuk Pengembangan Javascript di Tahun 2021

Mempermudah Proses Desain

web-desain-adalah

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.

Artikel Terkait  Panduan Membuat Situs Website Resume Professional Dalam Waktu Singkat

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;
}

    <

  1. 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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya