/* ============================================================================ HỆ THỐNG THEME — NHÀ NGHỈ HÀ NỘI SAO ---------------------------------------------------------------------------- File này CHỈ chứa định nghĩa màu (biến CSS). Không có luật giao diện nào ở đây — mọi thành phần trong site.css đều dùng var(--...), nên đổi theme là đổi đúng một dòng config, không phải sửa CSS. ĐỔI THEME: app/config/site.php -> 'theme' => 'hanoi-warm' (hanoi-warm | emerald | terracotta | ocean) Kết quả: thẻ nhận data-theme="" và toàn bộ bảng màu đổi theo. Không cần tải thêm file CSS, không nhấp nháy màu khi tải trang. --------------------------------------------------------------------------- BẢNG BIẾN (dùng chung cho mọi theme) --------------------------------------------------------------------------- NỀN --bg-page nền ngoài khung trang --bg-sidebar nền cột trái (sidebar) --bg-sidebar-soft nền phụ trong sidebar (khối nhấn nhẹ) --bg-content nền vùng nội dung chính --bg-content-dark nền đậm hơn (thanh CTA mobile, lightbox) BỀ MẶT (thêm ở đợt UI refresh 2026-08 — dùng cho card/khối) --surface nền thẻ, sáng hơn --bg-content vài phần trăm --surface-elevated nền thẻ nổi hơn (hover, khối nhấn) --surface-sidebar nền khối nhấn trên nền sidebar sáng HÀNH ĐỘNG --primary màu hành động chính: nút "Đặt phòng", nút filled --primary-strong biến thể đậm của primary (hover, viền) --text-on-primary màu chữ đặt TRÊN nền primary --accent màu nhấn: icon, giá tiền, liên kết trong nội dung --accent-hover biến thể của accent khi rê chuột --accent-soft biến thể mờ của accent (nền nhạt, viền nhạt) CHỮ --text-main chữ chính trên nền content --text-light chữ phụ / mờ trên nền content --text-muted (= --text-light) tên chuẩn hoá ở đợt refresh --text-on-dark chữ tương phản cao nhất trên mọi nền tối --text-on-sidebar chữ trên nền sidebar --text-muted-sidebar chữ phụ trên nền sidebar ĐƯỜNG KẺ & BÓNG --border đường kẻ trên nền tối (content) --border-soft đường kẻ rất nhẹ dùng cho card hiện đại --border-sidebar đường kẻ trên nền sáng (sidebar) --border-sidebar-soft đường kẻ rất nhẹ trên nền sáng --shadow-soft bóng rất nhẹ cho card ở trạng thái thường --shadow-lift bóng khi rê chuột (nâng 1–2px) --danger màu báo lỗi form --------------------------------------------------------------------------- THÊM THEME MỚI: copy một khối [data-theme="..."] bên dưới, đổi tên và màu, rồi thêm tên đó vào mảng 'themes_available' trong app/config/site.php. Nhớ kiểm tra độ tương phản: php tools/check-contrast.php ========================================================================= */ /* --------------------------------------------------------------------------- THEME MẶC ĐỊNH: hanoi-warm — kem ấm + than đen + vàng champagne Đặt trên :root để trang vẫn đúng màu ngay cả khi thiếu data-theme. ------------------------------------------------------------------------ */ :root, [data-theme="hanoi-warm"] { --bg-page: #45413a; --bg-sidebar: #f5ecd8; --bg-sidebar-soft: #efe3c9; --bg-content: #292929; --bg-content-dark: #1f1f1f; --surface: #313131; --surface-elevated: #383838; --surface-sidebar: #ede0c4; --primary: #d9bd80; --primary-strong: #b9975b; --text-on-primary: #292929; --accent: #e2c98f; --accent-hover: #f0dcaf; --accent-soft: rgba(226, 201, 143, 0.14); --text-main: #ffffff; /* Nâng từ 0.65 lên 0.78 ở đợt refresh: chữ phụ dễ đọc hơn cho người lớn tuổi. */ --text-light: rgba(255, 255, 255, 0.78); --text-muted: rgba(255, 255, 255, 0.78); --text-on-dark: #ffffff; --text-on-sidebar: #2b2721; /* 0.74: chữ phụ trên nền kem vẫn vượt ngưỡng AA khi font đã lớn hơn. */ --text-muted-sidebar: rgba(43, 39, 33, 0.74); --border: rgba(255, 255, 255, 0.2); --border-soft: rgba(255, 255, 255, 0.13); --border-sidebar: rgba(0, 0, 0, 0.18); --border-sidebar-soft: rgba(0, 0, 0, 0.10); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.14); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.26), 0 12px 28px rgba(0, 0, 0, 0.20); --danger: #ffb4a2; } /* --------------------------------------------------------------------------- emerald — xanh ngọc, cảm giác mát và sạch sẽ ------------------------------------------------------------------------ */ [data-theme="emerald"] { --bg-page: #24352e; --bg-sidebar: #eef4ee; --bg-sidebar-soft: #dfeae1; --bg-content: #1e2a25; --bg-content-dark: #16201c; --surface: #26332d; --surface-elevated: #2d3c35; --surface-sidebar: #e3ede5; --primary: #6fcfa4; --primary-strong: #46a67c; --text-on-primary: #10201a; --accent: #8ddcb8; --accent-hover: #b2ead0; --accent-soft: rgba(141, 220, 184, 0.14); --text-main: #ffffff; --text-light: rgba(255, 255, 255, 0.78); --text-muted: rgba(255, 255, 255, 0.78); --text-on-dark: #ffffff; --text-on-sidebar: #1b2a24; --text-muted-sidebar: rgba(27, 42, 36, 0.74); --border: rgba(255, 255, 255, 0.2); --border-soft: rgba(255, 255, 255, 0.13); --border-sidebar: rgba(0, 0, 0, 0.16); --border-sidebar-soft: rgba(0, 0, 0, 0.09); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.16); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.22); --danger: #ffb4a2; } /* --------------------------------------------------------------------------- terracotta — gạch nung ấm, thân thiện ------------------------------------------------------------------------ */ [data-theme="terracotta"] { --bg-page: #40312b; --bg-sidebar: #f8ece2; --bg-sidebar-soft: #f0ddce; --bg-content: #2b211d; --bg-content-dark: #211917; --surface: #332824; --surface-elevated: #3c2f2a; --surface-sidebar: #f2e2d5; --primary: #e79a72; --primary-strong: #c4744c; --text-on-primary: #2b211d; --accent: #f0ad88; --accent-hover: #f7c7ac; --accent-soft: rgba(240, 173, 136, 0.14); --text-main: #ffffff; --text-light: rgba(255, 255, 255, 0.78); --text-muted: rgba(255, 255, 255, 0.78); --text-on-dark: #ffffff; --text-on-sidebar: #33231c; --text-muted-sidebar: rgba(51, 35, 28, 0.74); --border: rgba(255, 255, 255, 0.2); --border-soft: rgba(255, 255, 255, 0.13); --border-sidebar: rgba(0, 0, 0, 0.16); --border-sidebar-soft: rgba(0, 0, 0, 0.09); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.16); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.22); --danger: #ffc9bb; } /* --------------------------------------------------------------------------- ocean — xanh biển, cảm giác mát và tin cậy ------------------------------------------------------------------------ */ [data-theme="ocean"] { --bg-page: #2b3745; --bg-sidebar: #ecf2f7; --bg-sidebar-soft: #dde8f0; --bg-content: #1f2937; --bg-content-dark: #171f2a; --surface: #27313f; --surface-elevated: #2e3a4a; --surface-sidebar: #e2ebf2; --primary: #7fc8ea; --primary-strong: #4d9dc4; --text-on-primary: #10202b; --accent: #9ad7f2; --accent-hover: #c2e8f8; --accent-soft: rgba(154, 215, 242, 0.14); --text-main: #ffffff; --text-light: rgba(255, 255, 255, 0.78); --text-muted: rgba(255, 255, 255, 0.78); --text-on-dark: #ffffff; --text-on-sidebar: #1c2a35; --text-muted-sidebar: rgba(28, 42, 53, 0.74); --border: rgba(255, 255, 255, 0.2); --border-soft: rgba(255, 255, 255, 0.13); --border-sidebar: rgba(0, 0, 0, 0.16); --border-sidebar-soft: rgba(0, 0, 0, 0.09); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.16); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.22); --danger: #ffb4a2; } /* ============================================================================ GHI CHÚ VỀ ĐỘ TƯƠNG PHẢN (WCAG) ---------------------------------------------------------------------------- Cả 4 preset đã được kiểm tra bằng script: php tools/check-contrast.php - text-main trên bg-content : ≥ 14:1 (AAA) - accent trên bg-content : ≥ 7:1 (AAA cho chữ thường) - text-light trên bg-content : ≥ 7:1 (AAA — nâng ở đợt refresh 2026-08) - text-on-primary trên primary : ≥ 8:1 (AAA) - text-on-sidebar trên bg-sidebar: ≥ 13:1 (AAA) Khi thêm theme mới, hãy chạy lại script kiểm tra trước khi dùng thật. ========================================================================= */