CSS Academy · Pelajaran

Kueri Media prefers-color-scheme

Deteksi preferensi mode gelap atau terang sistem pengguna menggunakan kueri media prefers-color-scheme.

Pelajaran 1 dari 413 langkah

Kueri Media prefers-color-scheme adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Mengapa Mode Gelap Otomatis?

Banyak pengguna mengaktifkan mode gelap pada tingkat OS demi kenyamanan, daya baterai (layar OLED), atau aksesibilitas. Kueri media prefers-color-scheme mendeteksi preferensi ini dan memungkinkan situs Anda menyesuaikan diri secara otomatis.

Nilai Kueri

Terdapat dua nilai:

light — pengguna memilih skema warna terang (atau tidak memiliki preferensi)
dark — pengguna memilih mode gelap

<p>This page respects your OS dark mode setting.</p>

Mode dark yang Mengutamakan Seluler

Jika sebagian besar pengguna Anda menggunakan perangkat seluler OLED, pertimbangkan untuk menjadikan dark sebagai gaya dasar:

<p>Dark by default; switches to light in light mode.</p>

Pendekatan Variabel CSS

Implementasi paling rapi adalah mendefinisikan satu set token untuk setiap skema:

<div class="card">Themed card using CSS variables</div>

Gambar dalam Mode dark

Kurangi kecerahan gambar dalam mode dark agar gambar tidak menyilaukan:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

Mendeteksi dengan JavaScript

Periksa preferensi mode dark dalam JavaScript untuk perilaku dinamis:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

Pengujian di DevTools

Di Chrome DevTools → tab Rendering → Tiru preferensi skema warna CSS. Beralih antara mode terang dan dark tanpa mengubah pengaturan OS. Di Firefox: DevTools → tab Inspector → menu ikon mata.

Prinsip Warna Mode dark

Mode dark yang efektif:

Gunakan abu-abu gelap, bukan hitam pekat, untuk latar belakang — mengurangi ketegangan mata
Kurangi bayangan elevasi — gunakan warna latar belakang yang lebih terang untuk permukaan yang lebih tinggi
Sesuaikan warna batas agar lebih terang dan mudah terlihat
Periksa rasio kontras teks — rasio yang berbeda mungkin diperlukan

Antipola Pembalikan Warna

Jangan pernah membalik semua warna begitu saja dengan filter: invert(1) untuk mode dark. Gambar dan ikon akan memiliki warna yang aneh. Gunakan token mode dark yang tepat dengan warna yang sesuai untuk setiap elemen.

Performa: Mencegah Kilatan

Jika Anda menggunakan pergantian tema yang digerakkan oleh JavaScript, cegah Flash of Unstyled Theme (FOUT) dengan menerapkan kelas tema ke <html> secara sinkron dalam tag <script> di <head> sebelum halaman dirender.

Warna Tema Meta

Perbarui warna antarmuka peramban, seperti bilah alamat seluler dan pengalih tugas, agar sesuai dengan tema dark:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

Pemeriksaan Cepat

Nilai kueri media apa yang harus Anda gunakan untuk menerapkan gaya mode dark ketika OS diatur ke mode dark?

Jawab di pelajaran interaktif

Rangkuman

prefers-color-scheme: dark mendeteksi preferensi mode dark pada OS. Terapkan mode dark otomatis menggunakan variabel CSS yang menukar nilai token di dalam kueri media. Kurangi kecerahan gambar dalam mode dark. Lakukan pengujian di DevTools. Perbarui tag meta theme-color peramban untuk pengalaman seluler yang lengkap.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kueri Media prefers-color-scheme” gratis?

Ya — teks lengkap “Kueri Media prefers-color-scheme” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kueri Media prefers-color-scheme”?

Deteksi preferensi mode gelap atau terang sistem pengguna menggunakan kueri media prefers-color-scheme. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Kueri Media prefers-color-scheme” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy