dark-mode-testing

深色模式测试

通过切换主题并进行比较，验证深色模式是否正常工作。

工作流

1. 打开应用

使用 browser_navigate 导航到目标页面。

2. 截取浅色模式截图

使用 browser_take_screenshot 截取页面默认（浅色）状态的截图。

3. 切换到深色模式

通过以下方法之一切换到深色模式（按顺序尝试）：

1. 切换类：执行 JS，向 <html> 添加 dark 类：

   document.documentElement.classList.toggle('dark')
   

2. 切换属性：设置 data-theme="dark"：

   document.documentElement.setAttribute('data-theme', 'dark')
   

3. 媒体查询：使用浏览器模拟 prefers-color-scheme: dark
4. UI 切换：在 browser_snapshot 中找到主题切换按钮并点击

4. 截取深色模式截图

切换后再截取一张截图。

5. 检查问题

检查 browser_snapshot 无障碍树和截图，确认是否存在以下问题：

• 白色闪烁：元素使用了硬编码的 bg-white，而不是 bg-white dark:bg-slate-900
• 文本不可见：文本颜色与深色背景相同（例如，深色背景上的黑色文本）
• 边框缺失：边框使用了仅适用于浅色模式的颜色，在深色背景下会消失
• 对比度违规：文本与深色背景的对比度过低（需要达到 4.5:1）
• 硬编码颜色：内联样式中出现任何 #ffffff、#000000、white、black
• 图片：Logo 或图标没有深色模式变体
• 阴影：盒子阴影在深色背景下不可见
• 表单输入框：输入框在深色模式下仍然保持白色背景

6. 报告

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

修复每个问题并重新测试。