eyedropper api 提供浏览器原生取色能力，需用户手势触发，返回{srgbhex: "#rrggbb"}，支持css变量或内联样式同步更新dom颜色，目前仅chromium系113+版本在https/localhost下可用。

EyeDropper API 提供了浏览器原生的取色器能力，无需依赖 Canvas 或第三方库，用户点击即可从任意网页像素中拾取颜色。它返回一个 DOMColor 对象（实际是 string 格式的十六进制颜色值），配合 CSS 自定义属性或内联样式，能实时同步更新 DOM 元素的背景、文字、边框等颜色。

启用 EyeDropper 并获取颜色值

EyeDropper 构造函数需在用户手势（如 click）中调用，否则会抛出 SecurityError。调用 open() 后，光标变为吸管图标，点击页面任意位置即可获取颜色：

• 返回 Promise，成功时解析为 { sRGBHex: "#ff5733" }（注意：目前仅 Chromium 系浏览器支持，且需 HTTPS 或 localhost 环境）
• 若用户取消（ESC 或点击取消按钮），Promise 被拒绝，应捕获错误避免中断逻辑

将颜色同步到 DOM 样式

拿到颜色值后，可灵活应用到页面元素。推荐优先使用 CSS 自定义属性（CSS 变量），便于全局复用和动态切换：

• 设置根元素变量：document.documentElement.style.setProperty('--primary-color', color)
• 在 CSS 中引用：button { background-color: var(--primary-color); }
• 也可直接修改内联样式：element.style.backgroundColor = color，适合单个元素快速响应

结合 UI 实现交互闭环

为提升体验，建议添加视觉反馈与状态管理：

• 点击取色按钮时禁用按钮并显示 loading 状态，防止重复触发
• 成功取色后，自动填充颜色预览块（如一个 <div> 的背景色 + 文字显示 #rrggbb） <li>可将颜色存入 localStorage，页面刷新后恢复上次选择</li> <li>监听 <code>change 或自定义事件，触发下游逻辑（如生成配色方案、更新 SVG 填充色等）

兼容性处理与降级方案

当前 EyeDropper 仅在 Chrome 113+、Edge 113+ 中可用。检测支持性后，可提供备选方案：

• 用 'EyeDropper' in window 判断是否支持
• 不支持时显示提示，并 fallback 到手动输入色值或预设色板（<input type="color">）
• 注意：<input type="color"> 在部分移动端体验较差，且无法从页面任意位置取色，仅作补充