Menggunakan Varian Gelap
Awali sebarang utiliti dengan dark:* untuk menggunakan gaya berbeza dalam mod gelap, termasuk warna, latar belakang, sempadan dan bayang.
Menggunakan Varian Gelap ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Awalan dark: dalam Tindakan
Setelah strategi mod gelap anda dikonfigurasikan, gunakan awalan dark: untuk menggunakan gaya alternatif dalam mod gelap. Anggaplah ia sebagai syarat: utiliti selepas dark: hanya diaktifkan apabila mod gelap sedang berkuat kuasa. Letakkan kedua-dua versi lalai dan gelap pada unsur yang sama, lalu Tailwind menjana CSS yang betul untuk kedua-dua keadaan. Ini mengekalkan semua logik gaya di satu tempat — HTML.
<p class="text-gray-900 dark:text-gray-100">
This text is dark on light backgrounds and light on dark backgrounds.
</p>Warna Latar Belakang Gelap
Warna latar belakang ialah perkara paling asas dalam mod gelap. Tukar permukaan cerah seperti bg-white atau bg-gray-50 kepada permukaan gelap seperti bg-gray-900 atau bg-slate-800. Palet warna Tailwind menyediakan rona daripada 50 (paling cerah) hingga 950 (paling gelap), memberikan anda kawalan terperinci terhadap tona tepat yang diingini dalam setiap mod.
<div class="bg-white dark:bg-gray-900 min-h-screen">
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
Layered surfaces for depth in both modes
</div>
</div>
</div>Warna Teks Gelap
Warna teks mesti kekal mudah dibaca dalam kedua-dua mod. Dalam mod cerah, teks gelap pada latar belakang cerah ialah amalan standard. Dalam mod gelap, gunakan rona teks yang lebih cerah — biasanya dark:text-gray-100 untuk teks utama, dark:text-gray-300 untuk teks sekunder dan dark:text-gray-400 untuk teks dimalapkan. Hierarki tiga tahap ini membantu mengekalkan hierarki visual dalam mod gelap, sama seperti dalam mod cerah.
<div class="bg-white dark:bg-gray-900 p-6">
<h1 class="text-gray-900 dark:text-gray-100 text-2xl font-bold">Primary Text</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Secondary description text.</p>
<span class="text-gray-400 dark:text-gray-500 text-sm">Muted metadata</span>
</div>Warna Jidar Gelap
Jidar sering kelihatan terlalu menonjol pada latar belakang gelap jika dibiarkan dengan warna lalainya. Gunakan dark:border-gray-700 atau dark:border-gray-600 untuk mengekalkan jidar yang lembut dalam mod gelap. Untuk pembahagi hiasan, anda mungkin menggunakan jidar yang lebih gelap seperti dark:border-gray-800 bagi menghasilkan pemisahan yang halus tanpa gangguan visual.
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<hr class="border-gray-100 dark:border-gray-800 my-4" />
<p class="text-gray-700 dark:text-gray-300">Content inside a bordered card</p>
</div>Utiliti Bayang-bayang Gelap
Bayang-bayang berfungsi secara berbeza dalam mod gelap kerana latar belakang gelap menjadikan bayang kotak tradisional tidak kelihatan. Gunakan utiliti shadow-{color} Tailwind untuk menambah bayang berwarna, atau kurangkan keamatan bayang dalam mod gelap. Sebagai alternatif, gunakan jidar halus dan bukannya bayang untuk menghasilkan kedalaman pada permukaan gelap — corak lazim dalam antara muka pengguna gelap moden.
<div class="
bg-white shadow-lg
dark:bg-gray-800 dark:shadow-none dark:border dark:border-gray-700
rounded-xl p-6
">
<p>Card with shadow in light, border in dark</p>
</div>Varian Gelap pada Unsur Interaktif
Butang dan pautan memerlukan varian gelap untuk semua keadaannya: lalai, tuding, fokus dan aktif. Gabungkan awalan dark: dengan varian keadaan untuk mengendalikan setiap interaksi. Ingat bahawa nisbah kontras mesti memenuhi piawaian WCAG dalam kedua-dua mod — butang biru terang yang sesuai dalam mod cerah mungkin memerlukan rona yang lebih cerah seperti dark:bg-blue-400 untuk mengekalkan kontras yang mencukupi terhadap latar belakang gelap.
<button class="
bg-blue-600 hover:bg-blue-700 text-white
dark:bg-blue-500 dark:hover:bg-blue-400
focus:outline-none focus:ring-2 focus:ring-blue-400
dark:focus:ring-blue-300
font-semibold px-5 py-2 rounded-lg transition-colors
">
Primary Button
</button>Varian Gelap untuk Ikon SVG
Ikon SVG yang digayakan dengan utiliti text-* Tailwind (yang mengawal CSS currentColor) mewarisi varian gelap secara semula jadi. Gunakan dark:text-gray-300 pada pembungkus ikon atau terus pada unsur SVG. Untuk ikon SVG berisi yang menggunakan fill-current atau stroke-current, pendekatan yang sama berfungsi kerana kedua-duanya mewarisi sifat color.
<svg class="w-6 h-6 text-gray-500 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>Mod Gelap untuk Teks Ruang Tanda
Ruang tanda dalam input borang juga memerlukan varian gelap. Gunakan varian placeholder: bersama-sama dark: untuk menggayakan teks ruang tanda dalam mod gelap. Latar belakang, jidar dan teks input juga masing-masing memerlukan padanan gelapnya. Gaya input yang konsisten dalam mod gelap biasanya menggunakan latar belakang sederhana gelap dengan teks ruang tanda yang lebih cerah serta jidar halus.
<input
type="text"
placeholder="Search..."
class="
bg-white border-gray-300 text-gray-900
placeholder:text-gray-400
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100
dark:placeholder:text-gray-500
rounded-lg px-4 py-2 w-full
focus:outline-none focus:ring-2 focus:ring-blue-500
"
/>Varian Gelap dengan Pengubah Kelegapan
Anda boleh menggabungkan awalan dark: dengan sintaks pengubah kelegapan Tailwind. Contohnya, dark:bg-white/10 menggunakan latar belakang putih dengan kelegapan 10% dalam mod gelap — teknik berguna untuk menghasilkan permukaan kad halus dengan kesan seperti kaca. Kebolehgabungan ini ialah salah satu ciri Tailwind yang paling berkuasa untuk membina tema gelap yang canggih.
<div class="bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-6 backdrop-blur">
<p class="text-gray-800 dark:text-gray-200">Glassmorphism-style card</p>
</div>Mengelakkan Kesilapan Lazim Mod Gelap
Kesilapan lazim ialah menggunakan varian gelap pada latar belakang sahaja tanpa mengemas kini warna teks dan jidar — ini menghasilkan gabungan gelap pada gelap atau cerah pada cerah. Sentiasa kemas kini semua sifat berkaitan secara bersama: latar belakang, teks, jidar dan bayang. Kesilapan lain ialah menggunakan hitam sepenuhnya (bg-black) sebagai permukaan gelap — ini menghasilkan kontras yang keras. Utamakan rona kelabu gelap seperti bg-gray-900 atau bg-slate-900 untuk penampilan yang lebih lembut.
<!-- BAD: Only background updated, text becomes invisible -->
<p class="text-gray-900 dark:bg-gray-900">Invisible text in dark mode!</p>
<!-- GOOD: Both background and text updated together -->
<p class="text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900">Readable in both modes</p>Menguji Mod Gelap Semasa Pembangunan
Apabila menggunakan strategi kelas, anda boleh menguji mod gelap semasa pembangunan dengan menambahkan kelas dark secara manual pada unsur <html> anda. DevTools pelayar juga membolehkan anda meniru prefers-color-scheme: dark tanpa mengira strategi anda. Untuk ujian automatik, tulis ujian yang menogol kelas gelap dan mengesahkan bahawa gaya terhitung yang betul digunakan pada unsur penting anda.
<!-- Quick test: add dark class to html -->
<html class="dark">
<!-- Remove to go back to light -->
<html>Semakan Ringkas
Uji pemahaman anda tentang penggunaan varian gelap dalam Tailwind CSS.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: awalan dark: menggunakan gaya alternatif apabila mod gelap aktif, latar belakang, teks, jidar dan bayang semuanya memerlukan varian gelap untuk mengekalkan kualiti visual, dan anda boleh menggabungkan dark: dengan varian keadaan serta pengubah kelegapan untuk kawalan terperinci. Seterusnya, kita akan membina togol mod gelap JavaScript yang menukar tema semasa aplikasi berjalan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Menggunakan Varian Gelap” percuma?
Ya — teks penuh “Menggunakan Varian Gelap” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menggunakan Varian Gelap”?
Awali sebarang utiliti dengan dark:* untuk menggunakan gaya berbeza dalam mod gelap, termasuk warna, latar belakang, sempadan dan bayang. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Menggunakan Varian Gelap” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Strategi Mod Gelap
- Menggunakan Varian Gelap
- Membina Togol Mod Gelap
- Mod Gelap untuk Komponen Kompleks