Cara Membuat Dark Mode di Blog / Web

Cara membuat Dark Mode / Mode malam di Blog - Saat ini banyak web / blog yang menggunakan Dark Mode (mode malam), tentunya ini akan sangat berguna bagi pembaca yang tidak suka dengan mode terang yang menyilaukan mata. Pada tutorial kali ini saya akan menjelaskan step-by-step cara membuat Dark Mode pada Blog

Syarat Membuat Blog Dark Mode

1. Bukan berbasic AMP HTML (karena tidak memperbolehkan penggunaan script di luar AMP Developer
2. Harus memahami struktur Template
3. Harus memahami kode CSS baik id atau class

Belajar Memahami Dark Mode pada Blog

1. Memahami CSS standar

Untuk pembelajaran, saya mempunyai CSS dan HTML standar. CSSnya seperti ini :

body {border: 0;font-family: Arial, sans-serif;font-size: 14px;font-weight: normal;margin: 0;outline: 0;padding: 0;background:#e5e5e5;}
#main-wrapper {max-width:960px;background:#fff;margin:30px auto}
header {color:#333;text-align:center;padding:30px}
header h1 {font-size:36px}
.menu {background:#d9d9f4;text-align:left;padding:2px 30px}
.menu p {font-weight:bold}
article {background:#fff;color:#777;padding:30px;text-align:left;font-size:14px; font-weight:normal}
article h2 {color:#111}
footer {background:#9696be;color:#fff;padding:20px;text-align:center}
footer a {color:#f3f3f9;text-decoration:none}
footer a:hover {color:#333}

<div id="main-wrapper">
  <header>
	<h1>Blog Header</h1>
  </header>
  <div class="menu"><p>MENU</p></div>
  <article>
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </article>
  <footer>
  <a href="https://kang-ismet.com">Kang Ismet</a> All Right Reserved
  </footer>
</div> 

Sehingga hasilnya seperti pada DEMO (masih biasa, belum ada mode gelap) Lihat Demo

2. Menambahkan JavaScript dan Icon

Simpan JavaScript ini di atas </body>

<script>
//<![CDATA[
function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#mainContent").classList.add("dark-mode"):document.querySelector("#mainContent").classList.remove("dark-mode")};
(localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('#mainContent').classList.add('dark-mode') : document.querySelector('#mainContent').classList.remove('dark-mode') 
//]]>
</script> 

Kemudian simpan icon di mana saja terserah penempatannya. Sebagai contoh saya simpan di menu :

<div class='dark-link' onclick='darkMode()'>
  <span class="dark">Dark Mode</span><svg class='line svg-1' data-text='Dark mode' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>
  <span class="light">Light Mode</span> <svg class='line svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg>
</div>

ini CSS untuk pengaturan Tombol. Karena tombol saya buat absolute maka di menu harus ditambah position:relative (silahkan dipelajari Memahami CSS Position Property dan Valuenya)

/* Icon Dark Mode */
.dark-switch, .dark-link {position:absolute;top:15px;right:30px;width:20px;height:20px;z-index:10;cursor:pointer}  
.dark-link .svg-2, .dark-mode .dark-link .svg-1{display:none}
.dark-mode .dark-link .svg-2{display:block;}
.dark-mode .dark-link svg.line{fill:none;stroke:#eaff00}  

/* Teks Dark Mode */
.dark {position:absolute;  min-width:60px;top:5px;right:25px;font-family:Arial;font-size:11px;color:#333}
.light {position:absolute; min-width:60px;top:5px;right:25px;font-family:Arial;font-size:11px;color:#ccc;display:none}
.dark-mode .dark {display:none}
.dark-mode .light {display:block}

maka hasil sementara, ada icon dan masih belum mempengaruhi tampilan blog. Lihat Demo

Menambah CSS .dark-mode

Setelah selesai dengan tombol dan JavaScript, maka langkah pertama adalah menambah id="mainContent" pada <body>, sehingga menjadi seperti ini :

<body id="mainContent">

Kemudian tambahkan .dark-mode pada class atau id yang ingin di rubah. Sehingga dari CSS awal yang kita buat, hasil penambahannya seperti ini:

/* Layout Blog Mode Dark */
body.dark-mode {background:#111}
.dark-mode header{background:#909090;color:#fff}
.dark-mode .menu{background:#646464;color:#fff}
.dark-mode article{background:#7c7a7a;color:#fff}
.dark-mode article h2{color:#f5f5f5}
.dark-mode footer{background:#333}
.dark-mode footer a{color:#f8eda2}
.dark-mode footer a:hover{color:#fefefe}

Hasil Akhir

Apabila masih bingung, silahkan ditanyakan di kolom komentar...