Dark Mode Testing 是一个用于验证网页深色模式（暗色主题）是否正常工作的技能，主要面向需要在 Cursor 浏览器中检查主题切换效果的开发与测试场景。
用途 该技能用于确认深色模式是否正确工作，通过切换主题并对比浅色与深色两种状态来发现问题。
工作流程
- 打开应用：使用 browser_navigate 导航到目标页面。
- 截图浅色模式：使用 browser_take_screenshot 截取页面默认（浅色）状态的截图。
- 切换深色模式：按顺序尝试以下方法之一：
- Class 切换：执行 JS 向 <html> 添加 dark 类：document.documentElement.classList.toggle('dark')
- 属性切换：设置 data-theme="dark"：document.documentElement.setAttribute('data-theme', 'dark')
- 媒体查询：使用浏览器模拟 prefers-color-scheme: dark
- UI 切换：在 browser_snapshot 中找到主题切换按钮并点击
- 截图深色模式：切换后再次截图。
- 检查问题：检查 browser_snapshot 的 aria 树和截图，关注以下问题：
- 白闪：使用硬编码 bg-white 而非 bg-white dark:bg-slate-900 的元素
- 不可见文字：文字颜色与深色背景相同（例如深色背景上的黑色文字）
- 缺失边框：仅使用浅色颜色的边框在深色背景上消失
- 对比度违规：文字与深色背景对比度过低（需要 4.5:1）
- 硬编码颜色：内联样式中的任何 #ffffff、#000000、white、black
- 图片：没有深色模式变体的 logo 或图标
- 阴影：在深色背景上不可见的盒阴影
- 表单输入：在深色模式下仍保持白色背景的输入框
- 报告：输出类似以下格式的报告： Dark Mode Test: Light mode: OK Dark mode issues found: - Header logo: white logo invisible on dark bg (needs dark variant) - Card borders: border-gray-200 invisible on dark bg → add dark:border-gray-700 - Footer text: hardcoded #333 → use text-gray-900 dark:text-gray-100 修复每个问题后重新测试。
适用场景 适用于前端开发与测试阶段，用于检查网页在深色模式下的视觉一致性与可访问性，尤其是使用 Tailwind 类名（如 dark: 前缀）或 data-theme 属性的项目。
限制 该技能依赖 Cursor 浏览器环境及其 browser_navigate、browser_take_screenshot、browser_snapshot 等工具。关于其具体安装方式、收费、价格、支持平台等事实，资料中暂未提供。