M

MLOG

Bahasa Indonesia

Implementasikan mode gelap di situs web Anda dengan panduan komprehensif ini. Pelajari tentang media query CSS, toggle JavaScript, pertimbangan aksesibilitas, dan praktik terbaik untuk pengalaman pengguna yang mulus.

Implementasi Mode Gelap: Panduan Komprehensif dengan CSS dan JavaScript

Mode gelap telah menjadi semakin populer, menawarkan pengalaman menonton yang lebih nyaman, terutama di lingkungan dengan cahaya redup. Panduan ini memberikan gambaran komprehensif tentang cara mengimplementasikan mode gelap di situs web Anda menggunakan CSS dan JavaScript, memastikan pengalaman pengguna yang mulus dan dapat diakses untuk audiens global.

Mengapa Menerapkan Mode Gelap?

Ada beberapa alasan kuat untuk mempertimbangkan penerapan mode gelap:

Metode untuk Menerapkan Mode Gelap

Ada beberapa pendekatan untuk menerapkan mode gelap, masing-masing dengan kelebihan dan kekurangannya sendiri. Kita akan menjelajahi metode yang paling umum:

1. Menerapkan Mode Gelap dengan Kueri Media CSS

Kueri media CSS prefers-color-scheme memungkinkan Anda mendeteksi skema warna pilihan pengguna dan menerapkan gaya yang berbeda sesuai dengan itu. Ini adalah cara yang paling mudah dan efisien untuk menerapkan mode gelap bagi pengguna yang telah mengatur preferensi sistem mereka.

Contoh Kode

Tambahkan CSS berikut ke stylesheet Anda:

/* Tema Default (Terang) */
body {
  background-color: #fff;
  color: #000;
}

/* Tema Gelap */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Sesuaikan elemen lain sesuai kebutuhan */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Penjelasan:

Kelebihan

Kekurangan

2. Menerapkan Mode Gelap dengan Toggle JavaScript

Menggunakan toggle JavaScript memberi pengguna sakelar manual untuk mengontrol tema situs web. Ini memberi pengguna lebih banyak kontrol dan memungkinkan mereka untuk mengesampingkan preferensi sistem mereka. Pendekatan ini sangat penting untuk melayani pengguna di berbagai perangkat dan platform yang mungkin tidak secara konsisten mendukung atau mengekspos pengaturan mode gelap di seluruh sistem.

Struktur HTML

Pertama, tambahkan elemen toggle ke HTML Anda:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Ini membuat sakelar toggle sederhana menggunakan kotak centang dan beberapa gaya CSS kustom.

Penataan Gaya CSS (Opsional)

Anda dapat menata sakelar toggle menggunakan CSS. Berikut contohnya:

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

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Kode JavaScript

Sekarang, tambahkan kode JavaScript berikut untuk menangani fungsionalitas toggle:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Fungsi untuk beralih mode gelap
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Simpan preferensi pengguna di localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Periksa localStorage untuk preferensi yang disimpan
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Tambahkan event listener ke toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

Penjelasan:

Penataan Gaya CSS untuk Mode Gelap (menggunakan kelas)

Perbarui CSS Anda untuk menggunakan kelas dark-mode untuk menerapkan gaya tema gelap:

/* Tema Default (Terang) */
body {
  background-color: #fff;
  color: #000;
}

/* Tema Gelap */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Kelebihan

Kekurangan

3. Menggabungkan Kueri Media dan JavaScript

Pendekatan terbaik sering kali adalah menggabungkan kueri media CSS dan toggle JavaScript. Ini memberikan yang terbaik dari kedua dunia: deteksi otomatis skema warna pilihan pengguna, sambil juga memungkinkan pengguna untuk secara manual mengesampingkan preferensi sistem. Ini melayani audiens yang lebih luas, termasuk mereka yang mungkin tidak mengetahui atau tidak dapat mengubah pengaturan tema di seluruh sistem mereka.

Contoh Kode

Gunakan HTML dan CSS yang sama dari contoh Toggle JavaScript. Ubah JavaScript untuk memeriksa preferensi sistem:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Fungsi untuk beralih mode gelap
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Simpan preferensi pengguna di localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Periksa localStorage untuk preferensi yang disimpan, lalu preferensi sistem
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Tambahkan event listener ke toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

Penjelasan:

Kelebihan

Kekurangan

Pertimbangan Aksesibilitas

Saat menerapkan mode gelap, sangat penting untuk mempertimbangkan aksesibilitas untuk memastikan bahwa situs web Anda tetap dapat digunakan untuk semua pengguna. Ingatlah bahwa hanya membalikkan warna tidak secara otomatis menjamin aksesibilitas. Berikut adalah beberapa pertimbangan utama:

Praktik Terbaik untuk Implementasi Mode Gelap

Berikut adalah beberapa praktik terbaik yang harus diikuti saat menerapkan mode gelap di situs web Anda:

Contoh: Variabel CSS untuk Tema

Variabel CSS memudahkan untuk beralih antara tema mode terang dan gelap. Definisikan variabel dalam pseudo-kelas :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Sekarang, ketika kelas dark-mode ditambahkan ke body, variabel CSS diperbarui, dan gaya secara otomatis diterapkan.

Kesimpulan

Menerapkan mode gelap dapat secara signifikan meningkatkan pengalaman pengguna situs web Anda, meningkatkan aksesibilitas, dan bahkan menghemat masa pakai baterai. Dengan mengikuti teknik dan praktik terbaik yang diuraikan dalam panduan ini, Anda dapat menciptakan pengalaman mode gelap yang mulus dan menyenangkan bagi pengguna Anda di seluruh dunia.

Ingatlah untuk memprioritaskan aksesibilitas dan menguji implementasi Anda secara menyeluruh untuk memastikan bahwa situs web Anda tetap dapat digunakan untuk semua pengguna, terlepas dari preferensi atau kemampuan visual mereka.

Dengan menerapkan mode gelap secara bijaksana, Anda tidak hanya mengikuti tren, tetapi juga menciptakan pengalaman web yang lebih inklusif dan ramah pengguna untuk audiens global. Dedikasi terhadap pengalaman pengguna ini dapat sangat menguntungkan kinerja dan daya tarik keseluruhan situs web Anda.