Fungsi Light-Dark CSS: Adaptasi Tema Otomatis untuk Web Global

Di dunia yang terhubung secara global saat ini, situs web harus dapat diakses dan menarik secara visual bagi pengguna dari berbagai latar belakang dan preferensi. Salah satu cara paling efektif untuk mencapai ini adalah melalui adaptasi tema otomatis, khususnya dengan menawarkan tema terang dan gelap yang menyesuaikan berdasarkan pengaturan sistem pengguna. Postingan blog ini akan memandu Anda dalam mengimplementasikan fungsionalitas ini menggunakan media query CSS dan properti kustom, memastikan pengalaman menjelajah yang mulus dan nyaman bagi audiens internasional Anda.

Mengapa Menerapkan Tema Terang dan Gelap Otomatis?

Ada beberapa alasan kuat untuk memasukkan adaptasi tema otomatis ke dalam proyek web Anda:

Pengalaman Pengguna yang Ditingkatkan: Pengguna sering kali memiliki preferensi yang kuat untuk tema terang atau gelap. Menghormati pengaturan sistem mereka memungkinkan mereka menjelajahi situs web Anda dengan cara yang terasa alami dan nyaman. Ini sangat penting bagi pengguna yang menghabiskan waktu berjam-jam di depan layar, karena tema gelap dapat mengurangi ketegangan mata di lingkungan dengan cahaya redup.
Aksesibilitas yang Ditingkatkan: Tema terang dan gelap dapat secara signifikan meningkatkan aksesibilitas bagi pengguna dengan gangguan penglihatan. Mode kontras tinggi dapat membuat teks lebih mudah dibaca, sementara tema gelap dapat mengurangi silau dan meningkatkan keterbacaan bagi pengguna dengan sensitivitas cahaya.
Desain Web Modern: Menerapkan tema terang dan gelap menunjukkan komitmen terhadap prinsip-prinsip desain web modern dan keterpusatan pada pengguna. Ini menunjukkan bahwa Anda peduli dalam menyediakan pengalaman yang terpoles dan dapat disesuaikan.
Mengurangi Ketegangan Mata: Sangat penting bagi pengguna di wilayah dengan jam kerja panjang di depan komputer (misalnya, banyak negara Asia). Tema gelap akan mengurangi ketegangan pada mata mereka.
Menghemat Masa Pakai Baterai: Pada perangkat dengan layar OLED, tema gelap dapat menghemat daya baterai dengan mengurangi jumlah cahaya yang dipancarkan. Ini relevan bagi pengguna di seluruh dunia, terutama mereka yang menggunakan perangkat seluler dengan kapasitas baterai terbatas.

Cara Menerapkan Adaptasi Tema Otomatis dengan CSS

Inti dari adaptasi tema otomatis terletak pada media query prefers-color-scheme. Media query CSS ini memungkinkan Anda mendeteksi skema warna pilihan pengguna (terang atau gelap) dan menerapkan gaya yang sesuai.

Langkah 1: Tentukan Properti Kustom (Variabel CSS)

Mulailah dengan mendefinisikan properti kustom (variabel CSS) untuk menyimpan nilai warna untuk tema terang dan gelap Anda. Ini memudahkan untuk beralih antar tema hanya dengan memperbarui nilai variabel.


:root {
  --background-color: #ffffff; /* Latar belakang tema terang */
  --text-color: #000000; /* Teks tema terang */
  --link-color: #007bff; /* Tautan tema terang */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Latar belakang tema gelap */
    --text-color: #ffffff; /* Teks tema gelap */
    --link-color: #66b3ff; /* Tautan tema gelap */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Dalam contoh ini, kita mendefinisikan variabel untuk warna latar belakang, warna teks, warna tautan, dan warna tombol. Selektor :root menerapkan variabel ini ke seluruh dokumen. Media query @media (prefers-color-scheme: dark) kemudian menimpa variabel ini dengan nilai tema gelap ketika pengguna telah mengatur sistem mereka ke mode gelap.

Langkah 2: Terapkan Properti Kustom pada Gaya Anda

Selanjutnya, terapkan properti kustom ini ke gaya CSS Anda untuk mengontrol tampilan elemen situs web Anda.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Transisi yang mulus */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Di sini, kita menggunakan fungsi var() untuk mengakses nilai properti kustom kita. Kami juga telah menambahkan properti transition ke elemen body untuk menciptakan transisi yang mulus antar tema.

Langkah 3: Pengujian dan Penyempurnaan

Uji implementasi Anda secara menyeluruh di berbagai browser dan sistem operasi. Browser modern seperti Chrome, Firefox, Safari, dan Edge sepenuhnya mendukung media query prefers-color-scheme. Anda dapat beralih antara mode terang dan gelap di pengaturan sistem operasi Anda untuk melihat perubahan tercermin di situs web Anda.

Teknik dan Pertimbangan Tingkat Lanjut

Menyediakan Pengalih Tema Manual

Meskipun adaptasi tema otomatis adalah titik awal yang bagus, beberapa pengguna mungkin lebih suka mengganti pengaturan sistem mereka secara manual. Anda dapat menyediakan pengalih tema manual menggunakan JavaScript dan penyimpanan lokal (local storage).

HTML:


<button id="theme-toggle">Ganti Tema</button>

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Default ke auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Terapkan tema awal saat halaman dimuat
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Jika diatur ke auto, biarkan prefers-color-scheme yang memutuskan
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Tambahkan CSS berikut bersama dengan CSS sebelumnya. Perhatikan penggantian manual:


body.light-theme {
  --background-color: #ffffff; /* Latar belakang tema terang */
  --text-color: #000000; /* Teks tema terang */
  --link-color: #007bff; /* Tautan tema terang */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Latar belakang tema gelap */
  --text-color: #ffffff; /* Teks tema gelap */
  --link-color: #66b3ff; /* Tautan tema gelap */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Potongan kode ini menambahkan tombol yang memungkinkan pengguna untuk beralih antara tema terang, gelap, dan otomatis. Tema yang dipilih disimpan di penyimpanan lokal sehingga tetap ada saat halaman dimuat ulang.

Menangani Gambar dan SVG

Beberapa gambar dan SVG mungkin tidak terlihat bagus di tema terang dan gelap. Anda dapat menggunakan media query CSS untuk menampilkan versi berbeda dari aset ini secara kondisional.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Potongan kode ini menunjukkan satu gambar (dengan kelas light-mode) dalam mode terang dan gambar yang berbeda (dengan kelas dark-mode) dalam mode gelap.

Pertimbangan Palet Warna untuk Audiens Internasional

Saat memilih palet warna untuk tema terang dan gelap Anda, perhatikan asosiasi budaya dan pertimbangan aksesibilitas. Berikut adalah beberapa pedoman umum:

Kontras: Pastikan kontras yang cukup antara warna teks dan latar belakang untuk memenuhi standar aksesibilitas (WCAG). Gunakan alat seperti Pemeriksa Kontras WebAIM untuk memverifikasi rasio kontras.
Buta Warna: Pertimbangkan dampak pilihan warna Anda pada pengguna dengan buta warna. Gunakan alat seperti Simulator Buta Warna untuk melihat pratinjau situs web Anda seperti yang dilihat oleh orang dengan berbagai jenis buta warna.
Asosiasi Budaya: Sadarilah bahwa warna dapat memiliki asosiasi budaya yang berbeda di berbagai belahan dunia. Misalnya, putih sering dikaitkan dengan kemurnian dan duka di beberapa budaya, sementara merah dikaitkan dengan keberuntungan dan kemakmuran di budaya lain. Teliti asosiasi budaya untuk menghindari menyinggung atau menimbulkan kebingungan secara tidak sengaja.
Palet Netral: Jika ragu, pilihlah palet warna netral yang cenderung tidak disalahartikan atau menyinggung. Warna abu-abu, krem, dan nada yang lembut bisa menjadi pilihan yang aman dan serbaguna.
Pengujian Pengguna: Lakukan pengujian pengguna dengan kelompok peserta yang beragam untuk mengumpulkan umpan balik tentang pilihan warna Anda dan memastikan bahwa mereka diterima secara positif oleh audiens target Anda.
Lokalisasi: Jika memungkinkan, pertimbangkan untuk menggunakan palet warna yang dilokalkan yang disesuaikan dengan preferensi budaya wilayah atau negara tertentu. Ini dapat melibatkan penyesuaian rona, saturasi, dan kecerahan warna agar selaras dengan selera lokal.

Pertimbangan Kinerja

Meskipun menerapkan adaptasi tema otomatis relatif mudah, penting untuk mempertimbangkan dampak potensialnya terhadap kinerja. Hindari menggunakan selektor CSS atau animasi yang terlalu rumit yang dapat memperlambat rendering. Juga, pastikan properti kustom Anda didefinisikan secara efisien untuk meminimalkan overhead pencarian variabel.

Berikut adalah beberapa praktik terbaik untuk mengoptimalkan kinerja:

Jaga Agar Selektor CSS Tetap Sederhana: Hindari menggunakan selektor CSS yang terlalu spesifik atau bersarang, karena dapat meningkatkan waktu yang dibutuhkan browser untuk mencocokkan gaya dengan elemen.
Gunakan Properti Kustom CSS dengan Bijaksana: Meskipun properti kustom sangat kuat, penggunaan yang berlebihan dapat memengaruhi kinerja. Gunakan secara strategis untuk nilai yang sering berubah atau nilai yang dibagikan di beberapa elemen.
Minimalkan Animasi yang Tidak Perlu: Animasi dapat menambah daya tarik visual ke situs web Anda, tetapi juga dapat memengaruhi kinerja jika tidak diterapkan dengan hati-hati. Gunakan transisi dan animasi CSS dengan hemat dan optimalkan untuk rendering yang mulus.
Uji pada Perangkat Nyata: Selalu uji situs web Anda pada perangkat nyata dengan kondisi jaringan dan kemampuan perangkat keras yang bervariasi untuk mengidentifikasi potensi hambatan kinerja. Gunakan alat pengembang browser untuk membuat profil kinerja situs web Anda dan mengidentifikasi area untuk perbaikan.

Praktik Terbaik Aksesibilitas

Pastikan tema terang dan gelap Anda memenuhi pedoman aksesibilitas, seperti WCAG (Web Content Accessibility Guidelines). Ini termasuk menyediakan kontras warna yang cukup, menggunakan HTML semantik, dan memastikan bahwa semua elemen interaktif dapat diakses dengan keyboard.

Berikut adalah beberapa praktik terbaik aksesibilitas spesifik yang harus diikuti:

Kontras Warna yang Cukup: Pastikan rasio kontras antara warna teks dan latar belakang memenuhi standar WCAG 2.1 AA (4.5:1 untuk teks normal, 3:1 untuk teks besar). Gunakan alat seperti Pemeriksa Kontras WebAIM untuk memverifikasi rasio kontras.
HTML Semantik: Gunakan elemen HTML semantik (misalnya, <header>, <nav>, <article>, <aside>, <footer>) untuk menyusun konten Anda secara logis. Ini membantu pembaca layar dan teknologi bantu lainnya memahami konten dan menavigasi halaman secara efektif.
Aksesibilitas Keyboard: Pastikan semua elemen interaktif (misalnya, tautan, tombol, bidang formulir) dapat diakses dengan keyboard. Gunakan atribut tabindex untuk mengontrol urutan fokus dan memberikan isyarat visual untuk menunjukkan elemen mana yang memiliki fokus.
Atribut ARIA: Gunakan atribut ARIA (Accessible Rich Internet Applications) untuk memberikan informasi tambahan tentang struktur dan fungsionalitas aplikasi web Anda ke teknologi bantu. Misalnya, gunakan aria-label untuk memberikan label deskriptif untuk sebuah elemen, atau aria-hidden untuk menyembunyikan elemen dari pembaca layar.
Pengujian dengan Teknologi Bantu: Uji situs web Anda dengan pembaca layar dan teknologi bantu lainnya untuk mengidentifikasi potensi masalah aksesibilitas. Gunakan alat seperti NVDA (NonVisual Desktop Access) atau VoiceOver untuk merasakan situs web Anda sebagai pengguna dengan gangguan penglihatan.
Sediakan Teks Alternatif untuk Gambar: Gunakan atribut alt untuk memberikan teks alternatif deskriptif untuk semua gambar. Teks ini akan ditampilkan jika gambar tidak dapat dimuat, dan juga akan dibacakan oleh pembaca layar.

Contoh di Berbagai Wilayah

Pertimbangkan contoh-contoh ini tentang bagaimana tema terang dan gelap dapat disesuaikan untuk audiens global yang beragam:

Asia Timur: Di banyak budaya Asia Timur, putih dikaitkan dengan duka. Saat merancang tema gelap untuk wilayah ini, hindari penggunaan teks putih yang berlebihan pada latar belakang hitam. Pilihlah teks berwarna putih pudar atau abu-abu terang.
Timur Tengah: Di beberapa budaya Timur Tengah, warna-warna cerah sering kali lebih disukai. Saat merancang tema terang, pertimbangkan untuk menggunakan warna aksen yang cerah untuk menambah daya tarik visual. Namun, pastikan pilihan warna tidak bertentangan dengan kepekaan budaya.
Eropa: Di Eropa, desain minimalis sering disukai. Saat merancang tema terang dan gelap, pilihlah tata letak yang bersih, tipografi sederhana, dan palet warna yang halus.
Amerika Latin: Di Amerika Latin, desain yang berani dan ekspresif sering dihargai. Saat merancang tema terang dan gelap, pertimbangkan untuk menggunakan tipografi yang ceria, warna-warna cerah, dan animasi yang dinamis.
Afrika: Karena kecepatan internet dan kemampuan perangkat yang bervariasi, prioritaskan kinerja dan aksesibilitas. Gunakan elemen desain yang lebih sederhana dan uji pada koneksi yang lebih lambat.

Kesimpulan

Menerapkan tema terang dan gelap otomatis adalah langkah penting untuk menciptakan pengalaman web yang lebih mudah diakses dan ramah pengguna bagi audiens global. Dengan memanfaatkan media query CSS dan properti kustom, Anda dapat dengan mudah menyesuaikan tampilan situs web Anda agar sesuai dengan preferensi pengguna, mengurangi ketegangan mata, dan meningkatkan aksesibilitas bagi pengguna dengan gangguan penglihatan. Ingatlah untuk mempertimbangkan asosiasi budaya, pedoman aksesibilitas, dan pertimbangan kinerja untuk memastikan pengalaman menjelajah yang mulus dan inklusif bagi semua orang.

Dengan mengadopsi teknik-teknik ini, Anda menunjukkan komitmen pada prinsip-prinsip desain web modern dan memenuhi beragam kebutuhan audiens internasional Anda, menjadikan situs web Anda ruang yang ramah dan nyaman bagi semua.