dark-mode-maker
Installation
SKILL.md
Skill: dark-mode-maker
Module độc lập, tách ra từ docs-site-macos (feedback 160926: "bê nguyên cái làm hiệu ứng dark/light mode thành 1 skill riêng"). Dùng được cho BẤT KỲ trang HTML nào cần nút chuyển dark/light — không chỉ trang docs-site-macos.
WHAT
Purpose và context
- Purpose: gắn vào một trang HTML nút gạt dark/light có circle-reveal tỏa từ vị trí con trỏ (kẹp trong biên nút) + crest-glow, palette dark trung tính kiểu thị trường, chống FOUC, nghiệm thu bằng Playwright thật.
- Trigger (when to use):
- Trang cần nút chuyển dark/light (mọi trang HTML sinh cho người xem, theo luật
html-theme-toggle-required). - User nói "làm dark mode", "theme toggle", "chuyển sáng tối", "circle reveal", "hiệu ứng đổi giao diện".
docs-site-macos§ Theme Toggle trỏ vào đây thay vì nhúng lại toàn bộ CSS/JS.
- Trang cần nút chuyển dark/light (mọi trang HTML sinh cho người xem, theo luật
- Non-goals:
- KHÔNG dùng để chọn xem trang có BẮT BUỘC phải có toggle hay không — đó là luật
html-theme-toggle-required(/fdk§ Rules), skill này chỉ lo PHẦN "chuyển thế nào" sau khi đã quyết có toggle. - Không phải sàn trang tài liệu (đó là
docs-site-macos).
- KHÔNG dùng để chọn xem trang có BẮT BUỘC phải có toggle hay không — đó là luật
Mental model
<nav> có sẵn → JS chèn .theme-row > .lbl + .theme-switch → click (clientX/Y kẹp trong biên nút) → overlay .theme-reveal (nền MODE ĐÍCH) clip-path circle lan + drop-shadow crest trên CHÍNH nó → phủ hết → commit data-theme + localStorage → fade → gỡ overlay. Reduced-motion → crossfade ≤150ms, không spatial.