Latihan 1 dari materi Dark Mode di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bikin kartu yang ikut tema lewat class dark di pembungkusnya, bukan lewat tema perangkat.
Kode awal punya <style type="text/tailwindcss">, satu <div id="card-terang">, dan satu <div class="dark"> yang membungkus <div id="card">. Dua-duanya berisi Kartu Adaptif. Biarkan id, teks, dan pembungkusnya.
<style type="text/tailwindcss">, ganti komentarnya dengan @custom-variant dark (&:where(.dark, .dark *));. Baris ini bikin dark: ikut class dark, bukan tema perangkat.#card-terang dan #card class yang sama: bg-white dark:bg-gray-800 p-4 rounded-lg.Yang dicek:
#card ada, padding-nya 16px (dari p-4), dan border-radius-nya 8px (dari rounded-lg).bg-white dan dark:bg-gray-800 ada di class #card dan #card-terang.#card, yang ada di dalam .dark, benar-benar abu-abu tua (gray-800), dan latar #card-terang putih. Ini dibaca dari warna yang tampil, jadi hasilnya sama di HP mode terang maupun mode gelap. Tanpa @custom-variant, salah satu kartunya pasti salah warna.
