/* ============================================================================ 02 — GIAO DIỆN TỐI Chỉ khai lại BẢNG MÀU. Không một luật bố cục nào ở đây — đó là lý do đổi nền không bao giờ làm xô lệch trang. Ba trạng thái người dùng, phải phủ đủ cả ba: · chọn "theo máy" → `` KHÔNG mang thuộc tính nào → chỉ media query quyết · chọn "tối" → `` · chọn "sáng" → `` ⚠ Chặn `:not([data-theme="light"])` ở media query là BẮT BUỘC. Thiếu nó thì người chọn Sáng trên máy đang để nền tối vẫn ra tối — và họ sẽ báo là app hỏng. ============================================================================ */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ink:#E8EDF6; --ink-soft:#C2CCDC; --paper:#0E131C; --card:#161D2A; --line:#28313F; --line-strong:#3C4657; --accent:#7CA4F0; --accent-soft:#1B2740; --ok:#4FC79B; --ok-soft:#12291F; --warn:#E2A94F; --warn-soft:#2B2313; --err:#F0776F; --err-soft:#2E1817; --muted:#94A2B8; --ok-ink:#5BD3A6; --ok-line:#26584A; --ok-bg2:#11211B; --warn-ink:#EFBD6B; --warn-line:#5A4520; --warn-bg2:#231C11; --err-ink:#F5897F; --err-line:#5C2B28; --err-bg2:#2A1615; --accent-ink:#9CBCF7; --accent-line:#2F4370; --accent-bg2:#17223A; --soft:#121924; --soft2:#1A2230; --nav:#0A0F18; --nav-chu:#AFBCD0; --accent-on:#0B1220; } } /* ⚠ Khối này PHẢI trùng khớp từng dòng với khối trên. Hai bản chép tay rất dễ trôi khỏi nhau — sửa một bên thì sửa luôn bên kia, hoặc gom lại bằng công cụ dựng CSS nếu dự án của bạn có. */ :root[data-theme="dark"]{ color-scheme:dark; --ink:#E8EDF6; --ink-soft:#C2CCDC; --paper:#0E131C; --card:#161D2A; --line:#28313F; --line-strong:#3C4657; --accent:#7CA4F0; --accent-soft:#1B2740; --ok:#4FC79B; --ok-soft:#12291F; --warn:#E2A94F; --warn-soft:#2B2313; --err:#F0776F; --err-soft:#2E1817; --muted:#94A2B8; --ok-ink:#5BD3A6; --ok-line:#26584A; --ok-bg2:#11211B; --warn-ink:#EFBD6B; --warn-line:#5A4520; --warn-bg2:#231C11; --err-ink:#F5897F; --err-line:#5C2B28; --err-bg2:#2A1615; --accent-ink:#9CBCF7; --accent-line:#2F4370; --accent-bg2:#17223A; --soft:#121924; --soft2:#1A2230; --nav:#0A0F18; --nav-chu:#AFBCD0; --accent-on:#0B1220; } /* --- BỘ THỨ BA: TỜ GIẤY ---------------------------------------------------- Thứ SẼ IN RA GIẤY phải luôn là nền sáng, kể cả khi app đang nền tối — nếu không thì bản xem trước trên màn không còn giống bản in trong tay. Thủ thuật: khai LẠI cả bảng màu lên chính khối giấy. Mọi `var()` bên trong tự ra màu sáng, khỏi phải rà từng luật con. */ .giay{ --ink:#14233A; --ink-soft:#2A3B54; --paper:#F5F7FA; --card:#FFFFFF; --line:#E2E6EC; --line-strong:#CDD4DE; --accent:#2E5AAC; --accent-soft:#EAF0FB; --ok:#1F7A5C; --ok-soft:#E7F3EE; --warn:#9F5D17; --warn-soft:#FBF0E1; --err:#C0392B; --err-soft:#FBEAE8; --muted:#636D7B; --soft:#F7F9FC; --soft2:#EEF2F7; color:#14233A; background:#fff; }