Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Dark Mode Murni CSS: Menggunakan Media Query prefers-color-scheme

Fitur prefers-color-scheme adalah media query yang membaca pengaturan sistem pengguna. Jika user menyetel HP atau Laptop-nya ke "Dark Mode", website Anda akan otomatis menyesuaikan diri.

1. Persiapan Variabel Dasar

Cara terbaik untuk membuat Dark Mode adalah dengan menggunakan CSS Variables yang sudah kita pelajari di materi sebelumnya. Kita tentukan dulu warna untuk "Ligh t Mode" sebagai default.

:root { /* Skema Warna Terang (Default) */ --bg-color: #ffffff; --text-color: #2c3e50; --card-bg: #f8f9fa; --primary-blue: #3498db;
}

2. Menggunakan Media Query

Sekarang, kita buat blok kode yang akan menimpa (override) nilai variabel tersebut jika sistem pengguna berada dalam mode gelap.

@media (prefers-color-scheme: dark) { :root { /* Skema Warna Gelap */ --bg-color: #121212; /* Hitam keabuan agar tida k terlalu kontras */ --text-color: #e0e0e0; /* Putih pucat agar nyaman dibaca */ --card-bg: #1e1e1e; /* Abu-abu tua untuk elemen kartu */ --primary-blue: #5dade2; /* Biru yang sedikit lebih terang agar menonjol */ }
}

3. Tutorial: Implementasi pada Halaman Berita

Mari kita terapkan pada struktur sederhana untuk portal SatuMedia.

Struktur HTML

<div class="article"> <h1>Inovasi Laravel 11h1> <p>Laravel kini mendukung Dark Mode secara native dengan konfigurasi minimal.p>
div>

Kode CSS (Universal)

body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; /* Transisi halus saat ganti mode */ padding: 40px; font-family: sans-serif;
} h1 { color: var(--primary-blue);
}

4. Tips Memilih Warna Dark Mode

1. Jangan Gunakan Hitam Pekat (#000): Warna latar belakang hitam murni dengan teks putih murni dapat menyebabk an kelelahan mata (halation effect). Gunakan abu-abu sangat tua (seperti #121212).

2. Turunkan Saturasi: Warna-warna cerah (seperti biru tua) seringkali terlihat terlalu menyala di latar gelap. Pilihlah versi warna yang lebih muda atau lebih pastel.

3. Gunakan Opacity untuk Elevasi: Di mode terang, kita gunakan bayangan (box-shadow) untuk efek timbul. Di mode gelap, cara terbaik adalah membuat latar belakang kartu sedikit lebih terang dari latar belakang halaman.

Keuntungan Metode Murni CSS

• Tanpa Delay: Website langsung tampil dalam mode yang benar saat pertama kali dimuat (tidak ada efek "flash" putih sebelum berubah jadi gelap).

• Performa Tinggi: Tidak ada skrip JavaScript yang perlu dijalankan.

• Sinkronisasi Otomatis: Jika p engguna mengatur jadwal Dark Mode otomatis (misal: aktif saat jam 6 sore), website Anda akan ikut berubah secara otomatis tanpa refresh.

Teknik ini sangat cocok diterapkan pada riwara.id agar pembaca tetap nyaman membaca berita di malam hari tanpa merasa silau!