Bài 23: Dark mode trong Tailwind – thiết kế giao diện sáng tối chuyên nghiệp

🔗 Bài học khác trong chuyên mục:

Chúng ta cùng bước vào bài 23 – một chủ đề đang rất phổ biến trong thiết kế giao diện hiện đại: Dark Mode.

Bạn đã bao giờ ghé thăm một trang web vào buổi tối và thấy… chói mắt vì nền trắng chưa?
Đó chính là lý do mà ngày càng nhiều ứng dụng và website cung cấp Dark Mode – chế độ giao diện tối để dịu mắt hơn khi sử dụng ban đêm hoặc trong môi trường ánh sáng yếu.

Với Tailwind CSS, việc tạo dark mode không còn là chuyện phức tạp. Bạn không cần viết 2 phiên bản CSS khác nhau, chỉ cần thêm một prefix là đủ.

Trong bài học hôm nay, chúng ta sẽ tìm hiểu:

Cách bật dark mode trong Tailwind
Cách viết class hỗ trợ dark mode
Cách kiểm tra và tùy chỉnh giao diện theo chế độ người dùng
Một số mẹo khi thiết kế dark mode chuyên nghiệp

Cách bật dark mode trong Tailwind

Tailwind không bật sẵn dark mode theo mặc định.
Bạn cần kích hoạt nó trong file cấu hình tailwind.config.js:

module.exports = {
  darkMode: 'media', // hoặc 'class'
  // ...
}

Bạn có 2 cách để dùng:

media: tự động theo hệ điều hành (nếu người dùng chọn dark mode)
class: bạn điều khiển bằng cách thêm class dark vào thẻ <html> hoặc <body>

Gợi ý: Nếu bạn muốn người dùng tự chuyển đổi giữa light/dark, hãy dùng 'class'.

Cách viết class dark mode

Khi dark mode được bật, bạn có thể dùng prefix dark: để thay đổi giao diện trong chế độ tối.

Ví dụ:

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded">
  Giao diện này sẽ đổi màu nếu bật dark mode
</div>

Khi ở chế độ sáng:

Nền trắng (bg-white)
Chữ đen (text-black)

Khi dark mode bật:

Nền chuyển thành bg-gray-900
Chữ chuyển thành trắng

Sử dụng dark mode theo class

Giả sử bạn dùng cấu hình 'class', chỉ cần thêm dark vào thẻ HTML:

<html class="dark">

Hoặc bật/tắt bằng JavaScript:

document.documentElement.classList.add('dark');

Bạn có thể lưu trạng thái này vào localStorage để ghi nhớ lựa chọn của người dùng.

Thiết kế đồng nhất giữa light và dark

Tailwind giúp bạn viết giao diện một cách thống nhất bằng cách đặt cả 2 trạng thái cạnh nhau.

Ví dụ một thẻ thông báo:

<div class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 p-4 rounded">
  Thành công! Mọi thứ đã sẵn sàng.
</div>

Bạn cũng có thể thêm shadow, border, hover riêng cho dark mode:

<button class="bg-white text-black dark:bg-black dark:text-white
               hover:bg-gray-200 dark:hover:bg-gray-800
               transition px-4 py-2 rounded">
  Bấm vào tôi
</button>

Kiểm tra dark mode trên trình duyệt

Nếu bạn dùng 'media':

Truy cập DevTools (Chrome): chọn tab “Rendering”
Bật chế độ prefers-color-scheme: dark

Nếu bạn dùng 'class', thử thêm class="dark" vào thẻ <html> để xem ngay hiệu ứng.

Mẹo thiết kế dark mode đẹp

Tránh nền đen tuyệt đối (#000) – dùng bg-gray-900 hoặc bg-neutral-950
Giữ contrast tốt để dễ đọc: chữ text-gray-100 hoặc text-white trên nền tối
Các màu trung tính như gray, blue, emerald hoạt động tốt trong cả 2 chế độ
Luôn kiểm tra trên nhiều thiết bị để đảm bảo trải nghiệm đồng đều

So sánh với CSS truyền thống

Cách làm	CSS thuần	Tailwind CSS
Tự động dark mode	`@media (prefers-color-scheme: dark) {}`	`dark:` với `darkMode: 'media'`
Điều khiển bằng class	Thêm/tắt class `.dark` và viết CSS riêng	`dark:` trong class Tailwind
Giao diện 2 chế độ	Viết 2 đoạn style cho cùng 1 phần tử	Gộp class light/dark cùng 1 dòng

Tổng kết kiến thức

Tính năng	Cách dùng trong Tailwind
Bật dark mode	`darkMode: 'media'` hoặc `'class'`
Class dark mode	`dark:bg-`, `dark:text-`, `dark:hover:*`
Điều khiển bằng JS	`classList.add('dark')` hoặc toggle class
Kiểm tra	DevTools hoặc thêm class thủ công

Tóm tắt bài học

Dark mode không còn là tùy chọn, mà đang dần trở thành tiêu chuẩn trải nghiệm người dùng.
Với Tailwind, bạn có thể triển khai dark mode rất linh hoạt: tự động hoặc do người dùng bật tắt.
Viết class dark mode dễ dàng, rõ ràng, không cần tách file hay viết lại style.

Bài tiếp theo

Khi đã có giao diện đẹp, sáng tối linh hoạt, bước kế tiếp là… xử lý form – thành phần không thể thiếu trong mọi website.

Trong bài 24, bạn sẽ học cách:

Tùy chỉnh input, select, checkbox, button bằng Tailwind
Thêm hiệu ứng tương tác cho form
Viết layout form rõ ràng, dễ đọc, và responsive

Hẹn bạn ở bài 24: Form control – tạo input, button, checkbox chuẩn giao diện Tailwind.

Bài học trước ← Bài 22: Trạng thái tương tác nâng cao – group-hover, focus-within và beyond Bài học tiếp theo Bài 24: Form control – tạo input, button, checkbox chuẩn giao diện Tailwind →