SuperAPI AI 工具集

dark-mode-maker

通用与其它

查看项目

更新于 10-16 01:12

技能介绍

用途:为一个 HTML 页面添加深/浅主题切换开关,切换时从鼠标指针位置(被限制在按钮边界内)扩散圆形揭示效果,并带光晕;附防 FOUC、中性深色配色,并用真实 Playwright 脚本验收。适用于任何需要主题切换的 HTML 页面,不限于特定站点。

主要能力:用 JS 在页面已有 <nav> 末尾自动插入 .theme-row > .lbl + .theme-switch,设置 data-theme 并写入 localStorage;切换时生成 .theme-reveal 覆盖层,以目标模式底色用 clip-path 圆形扩散,配合三层 drop-shadow 形成光晕,扩散完成后提交主题并淡出移除。支持键盘 Enter/Space(回退为按钮中心为原点),并尊重 prefers-reduced-motion,降级为不超过 150ms 的交叉淡入。

必要用法:页面需含 <nav> 或等价导航容器,脚本自行插入开关;需替换 localStorage 名称 <tên-trang> 与明暗两种底色、两种 tint;保持 .theme-row/.theme-switch/.theme-reveal 类名不变;验收命令为 node skills/dark-mode-maker/scripts/verify-theme-motion.mjs <file.html>。

规则与限制:.theme-row 必须 background:transparent 且不得加 backdrop-filter;扩散原点必须钳制在按钮边界内;深色配色须为中性(参考 GitHub Dark、Vercel、Linear),仅保留单一强调色 #0a84ff,不向边框/底色混入饱和色;不得另建独立涟漪元素,光晕只用同一元素上的 drop-shadow。无 <nav> 时脚本会提前返回、不生成开关。动画时长由单一 TOTAL_MS 加固定 GROW_RATIO 按比例拆分。脚本验收不通过则视为失败,需修正后重跑。是否必须存在切换开关属于另一规则范畴,不在本技能职责内。其他平台或收费信息暂未提供。