Sử dụng các variant để style trang web của bạn trong chế độ tối.
Bây giờ chế độ tối là một tính năng hạng nhất của nhiều hệ điều hành, việc thiết kế phiên bản tối của trang web của bạn để đi cùng với thiết kế mặc định ngày càng trở nên phổ biến.
Để làm cho việc này dễ dàng nhất có thể, Tailwind bao gồm một variant dark cho phép bạn style trang web của mình khác đi khi chế độ tối được bật:
Light mode
Writes upside-down
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
Dark mode
Writes upside-down
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>Theo mặc định, điều này sử dụng tính năng media CSS prefers-color-scheme, nhưng bạn cũng có thể xây dựng các trang web hỗ trợ chuyển đổi chế độ tối thủ công bằng cách ghi đè variant dark.
Nếu bạn muốn theme tối của mình được điều khiển bởi một CSS selector thay vì media query prefers-color-scheme, hãy ghi đè variant dark để sử dụng selector tùy chỉnh của bạn:
@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));Bây giờ thay vì các utility dark:* được áp dụng dựa trên prefers-color-scheme, chúng sẽ được áp dụng bất cứ khi nào class dark xuất hiện trước đó trong cây HTML:
<html class="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>Cách bạn thêm class dark vào phần tử html là tùy thuộc vào bạn, nhưng một cách tiếp cận phổ biến là sử dụng một chút JavaScript để cập nhật thuộc tính class và đồng bộ hóa tùy chọn đó đến một nơi nào đó như localStorage.
Để sử dụng một thuộc tính data thay vì một class để kích hoạt chế độ tối, chỉ cần ghi đè variant dark bằng một attribute selector thay thế:
@import "tailwindcss";@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));Bây giờ các utility chế độ tối sẽ được áp dụng bất cứ khi nào thuộc tính data-theme được đặt thành dark ở đâu đó phía trên cây:
<html data-theme="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>Để xây dựng các chuyển đổi theme ba chiều hỗ trợ chế độ sáng, chế độ tối và theme hệ thống của bạn, hãy sử dụng selector chế độ tối tùy chỉnh và window.matchMedia() API để phát hiện theme hệ thống và cập nhật phần tử html khi cần thiết.
Dưới đây là một ví dụ đơn giản về cách bạn có thể hỗ trợ chế độ sáng, chế độ tối, cũng như tôn trọng tùy chọn hệ điều hành:
// On page load or when changing themes, best to add inline in `head` to avoid FOUCdocument.documentElement.classList.toggle( "dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// Whenever the user explicitly chooses light modelocalStorage.theme = "light";// Whenever the user explicitly chooses dark modelocalStorage.theme = "dark";// Whenever the user explicitly chooses to respect the OS preferencelocalStorage.removeItem("theme");Một lần nữa, bạn có thể quản lý điều này theo bất kỳ cách nào bạn thích, thậm chí lưu trữ tùy chọn phía máy chủ trong cơ sở dữ liệu và render class trên máy chủ — hoàn toàn tùy thuộc vào bạn.