Membuat Dark Mode Pada Blogger

Dark mode/ mode malam merupakan fitur untuk merubah warna pada template blog kalian yang seharusnya terang menjadi gelap, tujuannya ialah untuk membuat tampilan blog menjadi tidak terang.

Cara membuat dark mode cukup mudah, untuk lebih jelasnya kalian bisa ikuti tutorialnya dibawah ini.

Demo

Membuat Dark Mode Pada Blogger

1. Buka Blogger > Tema > Edit HTML
2. Letakkan Jquery berikut diatas </body>

<script type='text/javascript'>//<![CDATA[
// Jquery cookie
$(() => {
  const theme = 'dark';
  const darkMode = localStorage.getItem(theme);
  $('html').toggleClass(theme, darkMode === 'true');
  $('#' + theme).prop('checked', darkMode === 'true').click(function() {
    $("html").toggleClass(theme, $(this).is(':checked'));
    localStorage.setItem(theme, String($(this).is(':checked')));
  });
});
//]]></script>



3. Simpan CSS berikut kedalam <b:skin>...</b:skin> atau <style>...</style>

/* Button Switch dark */
.theme{/* Empty */}
.theme .text{text-transform:uppercase;font-size:.7rem;font-weight:600;padding:5px 0}
.theme .switch{position:relative;display:inline-block;width:30px;height:15px;margin:0 5px 0 10px;vertical-align:0}
.theme .switch input{display:none}
.theme .geser{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;background:#ccc}
.theme .geser:before{position:absolute;content:"";height:15px;width:15px;left:0;bottom:0;background-color:#fff;-webkit-transition:.4s;transition:.4s}
.theme input:checked+.geser{background-color:#000}
.theme input:focus+.geser{box-shadow:0 0 1px #000}
.theme input:checked+.geser:before{-webkit-transform:translateX(15px);-ms-transform:translateX(15px);transform:translateX(15px)}
.theme .geser.round{border-radius:34px}
.theme .geser.round:before{border-radius:50%;background:#0eafc1}



4. Simpan tombol switch mode dark di-mana saja sesuai keinginan kalian..

<div class='theme'>
<label class='switch'>
    <input id='dark' name='toggle-flip' type='checkbox'/>
    <span class='geser round'/>
</label>
</div>



5. Selanjutnya, memilih bagian dari template yang akan dibuat gelap, caranya dengan menambahkan CSS kedalam tema
6. Semua bagian yang ingin dibuat gelap diberi css .dark, contoh

.dark body {
    background-color: #333;
    color: #ddd;
}
.dark::-webkit-scrollbar {background-color: #1d1f20;color: #cfcbc3;}
.dark::-webkit-scrollbar-corner{background-color:#191b1c}
.dark::-webkit-scrollbar-thumb{background-color:#2c2e30}



7. Cara untuk mencari bagiannya seperti gambar berikut


8. jika semua css dark sudah dibuat silahkan simpan kedalam <b:skin>...</b:skin> atau <style>...</style>