Implementasi Fitur Dark Mode di Blogger dengan CSS Variables

Penjelasan Lengkap Mengenai Implementasi Fitur Dark Mode di Blogger dengan CSS Variable beserta Tips Trik Terkait Penerapannya.
Penjelasan Lengkap Mengenai Implementasi Fitur Dark Mode di Blogger dengan CSS Variable beserta Tips Trik Terkait Penerapannya Menggunakan Metode prefers-color-scheme dan Tombol Switch.

dark mode blogger css variable

Mengenai Dark Theme Mode (Mode Tema Gelap)

Sejak 2 tahun terakhir ketika berbagai Sistem Operasi (dari Windows 10, Android 9 dan seterusnya) mengenalkan fitur Mode Tema Gelap, maka berbagai kelompok pengembang Android dan Website juga mulai mengimplementasikan fitur tersebut ke perangkat lunak mereka.

Inti dari fitur ini adalah dengan memberikan pilihan mode tema gelap atau terang kepada penggunanya yang mana dapat meningkatkan nilai interaksi antara pengguna dan perangkat lunaknya.

Dark Theme pada CSS Variables

Sebelum melangkah lebih jauh, sebaiknya kita memahami terlebih dahulu bahwa CSS Variables memiliki beberapa perbedaan dibandingkan dengan Variable bawaan Blogger. Detail perbedaan tersebut diringkas pada tabel di bawah ini.
PerbedaanCSS VariablesBlogger Variables
Pe-render-anDi-render oleh BrowserDi-render oleh Server Blogger
Hasil RenderTampil di View SourceTidak tampil
PemodifikasianSource Code CSSSource Code CSS dan Theme Designer
Dapat DitimpaID CSS VariablesID atau CLASS CSS induk
Untuk memahami bagaimana merubah Blogger Variable menjadi CSS Variables, bisa membaca artikel tentang Dasar Penggunaan CSS Variable di Blogger.

Metode dan Cara Kerja Dark Mode pada CSS Variables

Pada artikel sebelumnya, pendeklarasian CSS Variable menggunakan Syntax :root{...} yang berisi Nama dan Value dari setiap Variable. Syntax ini yang dijadikan sebagai Tema Terang.

Sedangkan untuk Tema Gelap terdapat 2 metode dalam penerapannya; Pertama menggunakan Syntax @media(prefers-color-scheme:dark){...}, dan yang Kedua menggunakan [data-theme="dark"]{...}.

Catatan:
Sebelum mulai, pastikan sudah menerapkan CSS Variables di Blog dengan mendeklarasikan syntax :root{...} di dalam tag <style> atau <b:skin>

  1. Metode Pertama : prefers-color-scheme:dark
    Cara kerja metode ini yaitu dengan mengambil value tema bawaan Sistem Operasi yang mendukung Tema Gelap (dark / light), jika bernilai dark maka CSS Variable di dalam tag @media(prefers-color-scheme:dark){...} yang dipakai. Cara ini bisa diterapkan tanpa tambahan JavaScript untuk mengubah temanya, tetapi hanya mendukung Sistem Operasi yang memiliki fitur Tema Gelap.
    Langkah Penerapan
    1. Tambahkan kode @media(prefers-color-scheme:dark){...} tepat di bawah deklarasi syntax :root{...}, kurang lebih seperti ini. 
      :root {
 --main-colors:#424242;
 --link-colors:#616161;
 --link-hover-colors:#2196f3;
}
@media(prefers-color-scheme:dark) {
 --main-colors:#eeeeee;
 --link-colors:#e0e0e0;
}
    2. Sesuaikan Variable yang ada di dalam @media dengan Variable yang akan dirubah Value-nya. Jika tidak ada value yang dirubah, tidak perlu ditulis di dalamnya.
    3. Simpan template
  2. Metode Kedua : Tombol Switch + JavaScript
    Sedangkan Metode kedua ini sebagai alternatif metode pertama, yaitu dengan menambahkan atribut data-theme="dark" ke dalam tag <html> dengan bantuan JavaScript.
    Langkah Penerapan
    1. Tambahkan [data-theme="dark"]{...} tepat di bawah :root{...}, sehingga hasilnya kurang lebih seperti ini. 
      :root {
 --main-colors:#424242;
 --link-colors:#616161;
 --link-hover-colors:#2196f3;
}
[data-theme="dark"] {
 --main-colors:#eeeeee;
 --link-colors:#e0e0e0;
}
    2. Tambahkan tombol switch Tema di bawah ini ke tempat yang strategis 
      <div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
</div>
    3. Tambahkan CSS ini di atas tag </body> 
      <style>
/*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
      Sesuaikan kode di atas sesuai keinginan.
    4. Terakhir, tambahkan JavaScript ini di atas tag </body> 
      <script>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
  
  if (currentTheme === 'dark') {
    toggleSwitch.checked = true;
  }
}

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
  else {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  }    
}

toggleSwitch.addEventListener('change', switchTheme, false);
</script>
    5. Simpan Template.

Demikian artikel tentang cara implementasi fitur dark mode di Blogger dengan CSS Variables menggunakan Metode prefers-color-scheme dan tombol switch, Semoga Bermanfaat.
Referensi:
[1] https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
[2] https://web.dev/prefers-color-scheme/

Posting Komentar