CSS Tailwind dan Mod Gelap-tutorial css-php.cn

CSS Tailwind dan Mod Gelap

DDD

Lepaskan： 2024-10-08 16:09:02

asal

718 orang telah melayarinya

Tailwind CSS and Dark Mode

Dalam artikel ini, kami akan meneroka cara melaksanakan mod gelap dalam CSS Tailwind. Mod gelap telah menjadi trend reka bentuk yang popular kerana ia memberikan pengalaman pengguna yang lebih baik dalam persekitaran cahaya malap dan mengurangkan ketegangan mata. Tailwind memudahkan untuk menyokong mod gelap dengan utiliti terbina dalamnya.

1. Cara Mod Gelap Berfungsi dalam Tailwind

Tailwind menawarkan pendekatan mudah untuk melaksanakan mod gelap melalui varian gelap. Secara lalai, ia menyemak tetapan sistem pengguna untuk mod gelap dan menggunakan gaya yang sepadan.

Menetapkan Mod Gelap dalam Tailwind:

Dalam fail tailwind.config.js anda, dayakan mod gelap dengan menetapkannya kepada media (keutamaan sistem) atau kelas (togol manual):

module.exports = {
  darkMode: 'media', // or 'class'
}

Salin selepas log masuk

media: Mengaktifkan mod gelap berdasarkan tetapan OS pengguna.
kelas: Membolehkan anda menogol mod gelap secara manual dengan menambahkan kelas gelap.

2. Menggayakan untuk Mod Gelap

Setelah mod gelap didayakan, anda boleh menggunakan varian gelap untuk menggunakan gaya khusus untuk mod gelap.

Contoh:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
    This is a dark mode toggle example
</div>

Salin selepas log masuk

bg-putih dan teks-hitam digunakan pada mod cahaya.
dark:bg-gray-800 dan dark:text-white digunakan apabila mod gelap aktif.

Fleksibiliti ini membolehkan anda menggayakan komponen anda secara berbeza untuk mod gelap dan terang.

3. Mod Gelap dengan Strategi kelas Tailwind

Jika anda mahu pengguna bertukar antara mod terang dan gelap secara manual, gunakan strategi kelas. Ini membolehkan anda menogol mod gelap dengan menambah atau mengalih keluar kelas gelap pada atau elemen.

Contoh dengan JavaScript:

<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900 p-4">
      Toggle dark mode manually
    </div>
    <button onclick="document.documentElement.classList.toggle('dark')">
      Toggle Dark Mode
    </button>
  </body>
</html>

Salin selepas log masuk

Dengan persediaan ini, mengklik butang akan menogol kelas gelap dan bertukar antara mod terang dan gelap.

4. Menggunakan Mod Gelap untuk Elemen Tertentu

Kadangkala, anda mungkin mahu hanya bahagian tertentu halaman web anda bertukar kepada mod gelap sambil membiarkan bahagian lain tidak berubah. Anda boleh menggunakan penggayaan mod gelap pada asas setiap elemen dengan membungkus kelas mod gelap dalam bekas tertentu.

Contoh:

<div class="bg-gray-100 p-4">
    <div class="dark:bg-gray-900 dark:text-white p-4">
        This section is in dark mode, while the outer section remains light.
    </div>
</div>

Salin selepas log masuk

Kaedah ini memberi anda lebih kawalan ke atas bahagian reka bentuk anda yang dipengaruhi oleh mod gelap.

5. Menjahit Warna Mod Gelap

Anda juga boleh menyesuaikan warna mod gelap dalam fail tailwind.config.js anda dengan memanjangkan palet warna.

Contoh:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

Salin selepas log masuk

Kini, anda boleh menggunakan warna mod gelap tersuai seperti ini:

<div class="dark:bg-darkBackground dark:text-darkText">
    Custom Dark Mode Colors
</div>

Salin selepas log masuk

Kesimpulan

Tailwind CSS menjadikan pelaksanaan mod gelap menjadi mudah, sama ada melalui tetapan sistem atau togol manual. Menggunakan varian gelap, anda boleh mencipta reka bentuk yang menarik secara visual yang melaraskan dengan lancar kepada pilihan pengguna yang berbeza.

Ikuti saya di LinkedIn- Ridoy Hasan
Lawati Laman Web Saya- ridoyweb.com
baca seterusnya-
Amalan Terbaik untuk Menulis CSS

Atas ialah kandungan terperinci CSS Tailwind dan Mod Gelap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!