Tài liệu & Hướng dẫn chuyên sâu: Trình tạo Theme shadcn/ui (shadcn/ui Theme Builder)
1. Tổng quan & Nguyên lý hoạt động
shadcn/ui định nghĩa toàn bộ bảng màu của một ứng dụng thông qua các biến CSS dạng HSL (ví dụ --background, --primary, --muted) được đọc bởi Tailwind CSS. Việc tự tay cân chỉnh 19 biến màu này cho cả Light và Dark mode, sao cho vừa hài hòa vừa đảm bảo độ tương phản đọc được (WCAG AA), là một công việc tốn thời gian và dễ sai sót. Trình tạo Theme của Verdbench giải quyết vấn đề này: bạn chỉ cần chọn một màu chủ đạo (Primary) duy nhất, công cụ sẽ tính toán toán học trên không gian màu HSL (xoay Hue, điều chỉnh Saturation/Lightness) để sinh ra toàn bộ bộ token còn lại — card, popover, secondary, muted, accent, destructive, border, ring — cho cả hai chế độ sáng/tối, đồng thời tự động kiểm tra và hiệu chỉnh độ tương phản chữ/nền để đảm bảo đạt chuẩn accessibility.
2. Ưu thế kiến trúc & Tính năng nổi bật
Chỉ cần chọn mã HEX của màu Primary, thuật toán tự suy ra toàn bộ 19 biến CSS còn lại dựa trên Hue của màu đó, không cần tự phối màu thủ công.
Mỗi cặp nền/chữ (đặc biệt là Primary và Destructive) được kiểm tra tỷ lệ tương phản bằng thuật toán luminance chuẩn W3C; nếu chưa đạt 4.5:1, độ sáng (Lightness) sẽ tự động được nhích ra xa vùng "xám chết" cho đến khi đạt chuẩn.
Dashboard mẫu dựng từ chính các component shadcn/ui thật (Button, Card, Badge, Input, Switch) phản ứng ngay khi đổi màu, bo góc hay chế độ sáng/tối — không cần build lại ứng dụng để xem kết quả.
3. Cấu trúc các biến CSS được sinh ra
Toàn bộ theme được xuất dưới dạng khối @layer base chuẩn shadcn/ui (Tailwind v3/v4 kinh điển), dùng định dạng HSL thuần (không bọc hàm hsl()) để tương thích với mọi cấu hình tailwind.config đã dùng hsl(var(--token)):
| Nhóm biến | Vai trò | Nguồn gốc tính toán |
|---|---|---|
| --background / --foreground | Nền trang & chữ chính | Giữ hue của Primary ở độ bão hòa rất thấp (gần trung tính) |
| --primary / --primary-foreground | Nút & thành phần nhấn mạnh chính | Chính là màu HEX bạn chọn, đã hiệu chỉnh Lightness để đạt tương phản |
| --secondary / --muted / --accent | Nền phụ, trạng thái hover, vùng ít nổi bật | Cùng hue Primary, Lightness cao (light) hoặc thấp (dark), Saturation giảm dần |
| --destructive | Hành động nguy hiểm (xóa, hủy) | Hue đỏ cố định (không phụ thuộc Primary), tự hiệu chỉnh để luôn đọc rõ |
| --border / --input / --ring | Viền, khung input, vòng focus | Trung tính nhạt (light) / đậm (dark); --ring dùng lại màu Primary |
| --radius | Độ bo góc toàn hệ thống | Lấy trực tiếp từ thanh trượt Radius (0 – 2rem) |
4. Câu hỏi thường gặp (FAQ)
Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Trình tạo Theme shadcn/ui (shadcn/ui Theme Builder).
5. Công cụ liên quan
- Kiểm tra độ tương phản WCAGKiểm tra tỉ lệ tương phản giữa màu chữ và màu nền theo chuẩn WCAG 2.x (AA / AAA), kèm gợi ý màu đạt chuẩn.
- Chuyển đổi CSS sang TailwindDán CSS thuần, nhận ngay class Tailwind CSS tương ứng — xử lý hoàn toàn trên trình duyệt.
- Trình xem vật lý Spring (Framer Motion)Tinh chỉnh trực quan stiffness, damping, mass của spring animation và sao chép ngay mã React chính xác.