Tailwind CSS Dark Mode
⚠️ Dark mode is built in to Tailwind CSS as of v2.0. Plugin này sẽ không nhận được bất kỳ bản cập nhật nào thêm nữa.
Cài đặt
npm install tailwindcss-dark-mode --save-dev
Thêm plugin vào mảng plugins
trong cấu hình Tailwind của bạn.
plugins: [
require('tailwindcss-dark-mode')()
]
Sử dụng
Các kiểu được tạo ra bởi plugin này chỉ được sử dụng nếu bộ chọn được áp dụng vào phần tử <html>
. Cách bạn làm điều đó hoàn toàn tùy bạn. prefers-dark.js
được cung cấp như một tùy chọn, đó là một đoạn mã đơn giản cho phép chế độ Dark dựa trên chủ đề hệ thống của người dùng.
Các Biến thể Có Sẵn
Các biến thể cho chế độ Dark dựa trên Tailwind’s own variants…
dark
dark-hover
dark-focus
dark-active
dark-disabled
dark-group-hover
dark-focus-within
dark-even
dark-odd
dark-placeholder
… và được sử dụng theo cùng cách.
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a ... class="text-blue-300 hover:text-blue-400 dark:text-blue-700 dark-hover:text-blue-600">
Learn more
</a>
</p>
</div>
Kích hoạt Biến thể
Giống như các biến thể hiện có như hover
và focus
, các biến thể cho chế độ Dark phải được kích hoạt trong cấu hình Tailwind của bạn cho bất kỳ tiện ích nào cần chúng.
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder']
}
Vui lòng lưu ý: Đây chỉ là một minh họa đơn giản về cách kích hoạt các biến thể Dark và cách chúng có thể được sử dụng. Các biến thể được cung cấp bởi plugin này không phải là thay thế cho các biến thể của Tailwind, chúng được sử dụng bổ sung vào chúng. Ví dụ, bất kỳ nơi nào bạn kích hoạt dark-hover
, bạn cũng nên kích hoạt hover
.
Thay đổi Bộ chọn
Theo mặc định, .mode-dark
được sử dụng làm bộ chọn cho chế độ Dark. Bạn có thể thay đổi điều này bằng cách thêm khóa darkSelector
vào phần theme
trong cấu hình Tailwind của bạn.
theme: {
darkSelector: '.mode-dark'
}
Đừng quên cũng thay đổi bộ chọn trong tệp prefers-dark.js
nếu bạn đang sử dụng nó.
PurgeCSS
Nếu bạn đang sử dụng PurgeCSS, bạn nên thêm bộ chọn này vào mảng whitelist
…
whitelist: ['mode-dark']
… hoặc thêm prefers-dark.js
vào mảng content
.
content: [
'**/*.js',
'./node_modules/tailwindcss-dark-mode/prefers-dark.js',
'./or/your/own/prefers-dark.js'
]
Nếu không, PurgeCSS sẽ cho rằng bất kỳ lớp nào liên quan đến chế độ Dark nên bị xóa, vì bộ chọn chỉ được áp dụng khi trang web được tải.
Chi tiết tải về:
Tác giả: ChanceArthur
Nguồn: https://github.com/ChanceArthur/tailwindcss-dark-mode
Giấy phép: MIT license