Saturday, 2 May 2020

Membuat Dark Mode Halaman Website

Untuk membuat thema dark mode pada halaman website, dua bahasa pemprograman yang harus dibuat, yaitu CSS dan Javascript. Cara membuatnya sederhana namun akan menjadi tidak sederhana jika sudah banyak kode yang sudah dibuat, karena dengan menambahkan dark mode sama dengan membuat CSS ganda.

Dalam pembuatannya, pertama yang harus diingat dalam tampilan dark atau latar belakang hitam, maka warna line, font harus diubah ke warna putih.

Maka Anda harus membuat kode CSS untuk dark mode dengan font putih dan latar belakang gelap. Sedangkan untuk light mode dibuat dengan CSS sesuai yang Anda inginkan untuk warna font dan line dengan latar belakang putih.

Untuk proses perubahan warna secara automatis, maka dibutuhkan element javascript yang memfungsikan tombol toggle pergantian thema halaman.

Untuk lengkapnya Anda dapat membuat kode dasar seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<style>
body {
  background-color: white;
  color: black;
  font-size: 12pt;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>

<button onclick="myFunction()">🌜</button>

<script>
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>

</body>
</html>

Sehingga toggle button tampilannya seperti ini:

Dark/Light Mode

Click the button to toggle between dark
and light mode for this page.

Itu adalah dasar dalam pembuatan tampilan website dark mode yang nantinya dapat Anda kembangkan sendiri.

Demikian tip membuat kode dark mode pada halamam website, jika masih ada yang belum jelas, Anda dapatjuga bisa hubungi kami via email :ahmad.hanafiah33@gmail.com,

Jika artikel ini berguna silahkan bagikan ke teman atau saudara.

Semoga bermanfaat.

AHA SARANG KOMPUTER adalah Perusahanan pembuatan Website yang berbasis di kota Bogor.

Saturday, 2 May 2020

Membuat Dark Mode Halaman Website

Dark/Light Mode

Artikel Terkait:

No comments:

Entri Populer

Blog Archive