Chế độ tối (Dark mode) là một tính năng phổ biến giúp cải thiện khả năng đọc và giảm mỏi mắt trong môi trường thiếu sáng. Với Tailwind CSS và React, việc triển khai chuyển đổi giữa giao diện sáng và tối khá đơn giản. Trong hướng dẫn này, chúng ta sẽ cùng đi qua từng bước cụ thể.
Bước 1: Khởi tạo ứng dụng React
Bắt đầu bằng cách tạo một dự án React mới bằng Vite hoặc Create React App:
npx create-react-app dark-mode-toggle
cd dark-mode-toggle
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Sau đó, cấu hình file tailwind.config.js như sau:
module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], darkMode: 'class', theme: { extend: {}, }, plugins: [],
}
Bước 2: Tạo chức năng chuyển đổi chế độ
Trong component chính của bạn (ví dụ: App.js), sử dụng state để thêm hoặc gỡ class dark cho phần tử gốc (document.documentElement):
import { useEffect, useState } from "react"; function App() { const [darkMode, setDarkMode] = useState(false); useEffect(() => { if (darkMode) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } }, [darkMode]); return ( <div className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900 text-black dark:text-white"> <button onClick={() => setDarkMode(!darkMode)} className="px-4 py-2 rounded bg-gray-200 dark:bg-gray-800"> Toggle Dark Mode </button> </div> );
} export default App;
Bước 3: Styling với lớp dark: của Tailwind
Sử dụng prefix dark: của Tailwind để định kiểu cho các phần tử trong chế độ tối. Trong ví dụ trên, chúng ta thay đổi màu nền và màu chữ tùy theo chế độ.
Kết luận
Với React và Tailwind CSS, việc thêm một nút chuyển chế độ tối là rất nhanh chóng và dễ tùy biến. Đây là một cách tuyệt vời để cải thiện trải nghiệm người dùng và khiến dự án của bạn trở nên chuyên nghiệp hơn.