Theme & dark mode
Mọi màu sắc đến từ CSS custom properties do @thl-ui/tokens sinh ra; component không hard-code màu, nên skin, dark mode hay thương hiệu riêng chỉ là ghi đè token.
Skin
12 skin có sẵn: 6 màu × sidebar sáng / tối (-dark, nền #4F5467).
| Skin | Màu chủ đạo | Gradient topbar |
|---|---|---|
default | #0277b9 | #0078bc → #00beda |
green | #2ecc71 | #25bf67 → #3fdd82 |
yellow | #ffb136 | #f2a225 → #ffbb51 |
red | #d6411d | #d93c17 → #ff704f |
purple | #4a23ad | #4a23ad → #693fd5 |
black | #282f32 | #282f32 → #4b555b |
Thử ô chọn skin trên thanh điều hướng của trang này.
Dark mode
colorMode: 'dark' đổi token nền, chữ, viền; 'auto' theo hệ điều hành và cập nhật tức thì.
Token chính
| Token | Mục đích |
|---|---|
--thl-theme | màu nhấn: menu đang chọn, focus, highlight |
--thl-topbar-1, --thl-topbar-2 | gradient topbar |
--thl-color-{primary,success,info,warning,danger,…} | màu ngữ nghĩa |
--thl-body-bg, --thl-surface, --thl-border-color | nền, bề mặt, viền |
--thl-text, --thl-heading, --thl-link | chữ |
--thl-font-family, --thl-font-size | typography |
--thl-radius-sm, --thl-radius, --thl-radius-lg | bo góc |
--thl-topbar-height, --thl-sidebar-width | layout |
Thương hiệu riêng
css
:root { --thl-font-family: 'Inter', sans-serif; --thl-color-primary: #6d28d9; }
/* skin mới: config.theme = 'brand' */
[data-thl-theme='brand'] { --thl-theme: #6d28d9; --thl-topbar-1: #5b21b6; --thl-topbar-2: #8b5cf6; }Có thể áp theme cho một vùng: <section data-thl-theme="red">…</section>.
Layout
layout | Khung |
|---|---|
vertical | sidebar đầy đủ (265px) |
mini | sidebar icon (60px) |
horizontal | menu ngang |
Dưới 1170px sidebar tự thu nhỏ; dưới 768px thành off-canvas.