Panduan Mengubah Tampilan Toggle Button Dark Mode

Note: Style ini sudah digunakan secara default pada pembaruan terbaru, tapi jika lebih sudah tampilan lama anda bisa mengubahnya kembali

Source: jagodesain.com

Pada tutorial ini kita akan sedikit mengubah tampilan dari tombol switch dark mode agar terlihat lebih serasi dengan icon yang ada pada template ini. Tutorial ini bersifat optional Anda bisa menerapkannya atau tida tergantung keinginan.

Yang perlu Anda lakukan hanyalah mengubah sedikit kode CSS yang ada pada template, sangat mudah jika anda mengikuti panduan ini secara berurutan. Pertama carilah kumpulan kode CSS dibawah ini:

header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)}
header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:$(icon.link.colors);-webkit-transition:all .2s ease;transition:all .2s ease}

Gantikan semua kode diatas dengan CSS dibawah ini:

header .navicon .dark-switch i{display:flex;align-items:center;position:relative;margin-left:8px;width:28px;height:18px;border-radius:10px;border:1px solid $(header.icon.alt.colors)}
header .navicon .dark-switch i:before{content:'';display:block;position:relative;left:3px;width:10px;height:10px;border-radius:50%;background-color:$(header.icon.alt.colors);-webkit-transition:all .1s ease;transition:all .1s ease}
.dark-mode .navicon .dark-switch i{border-color:$(dark.sec.colors)}
.dark-mode .navicon .dark-switch i:before{left:12px;background-color:$(dark.sec.colors)}

Untuk menghindari bug kemungkinan akan ada bebrapa kode yang sama dengan kode diatas, untuk itu carilah lalu hapus kode dibawah ini (jika ada pada blog anda):

.dark-mode .navicon .dark-switch i:before{left:13px}

Preview

Untuk contoh penerapannya bisa Anda lihat pada postingan ini

Bagaimana jika saya ingin mengganti tombol switch dengan icon?

Mungkin banyak yang berfikiran seperti ini, terlebih ketika Tombol navigasi mobile dihapus, tampilan headernya jadi sedikit terlihat aneh. Akan jauh lebih baik jika tombol switch diganti dengan icon agar serasi dengan icon search pada header

Jika demikian maka pada kode pertama diatas tambahkanlah beberapa kode CSS dibawah ini:

Kode CSS awal
header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)}
header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:$(icon.link.colors);-webkit-transition:all .2s ease;transition:all .2s ease}

Tambahkan beberapa baris kode sehingga jadi seperti ini:
header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)}
header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:$(icon.link.colors);-webkit-transition:all .2s ease;transition:all .2s ease}
header .navicon .dark-link .svg-2, .dark-mode .navicon .dark-link .svg-1{display:none}
.dark-mode .navicon .dark-link .svg-2{display:block}
.dark-mode .navicon .dark-link svg.line{fill:none;stroke:$(dark.sec.colors)}

Kemudian carilah tag HTML dibawah ini dan ubah sesuai contoh

<span class='dark-switch' data-text='Dark mode' onclick='darkMode()'><i class='check'/></span>

Ganti semua kode diatas dengan kode dibawah ini:
<div class='dark-link' onclick='darkMode()'>
  <svg class='line svg-1' 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>
  <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>

Simpan template Anda dan lihatlah perbedaannya. Semoga bermanfaat