furniture-3d-system-Wu/docs/theme-testing-guide.md

主题系统测试指南

快速验证

1. 浏览器开发者工具检查

打开浏览器开发者工具（F12），在 Console 中运行：

// 检查 data-theme 属性
console.log('当前主题:', document.documentElement.getAttribute('data-theme'))

// 检查 CSS 变量值
const blue = getComputedStyle(document.documentElement).getPropertyValue('--color-blue')
console.log('蓝色变量值:', blue)

// 检查按钮实际背景色
const button = document.querySelector('.bg-apple-blue')
if (button) {
  console.log('按钮背景色:', getComputedStyle(button).backgroundColor)
}

2. 预期结果

浅色模式（data-theme="light"）

• --color-blue: #007AFF (rgb(0, 122, 255))
• 按钮背景色：亮蓝色
• 背景：白色/浅灰色
• 文字：黑色/深灰色

深色模式（data-theme="dark"）

• --color-blue: #0A84FF (rgb(10, 132, 255))
• 按钮背景色：更亮的蓝色
• 背景：黑色/深灰色
• 文字：白色/浅灰色

详细测试步骤

测试 1：默认主题加载

1. 清除浏览器 localStorage：

   localStorage.clear()
   

2. 刷新页面

3. 验证：

   • HTML 应该有 data-theme="light" 属性
   • 页面应该显示浅色主题

测试 2：主题切换

1. 点击页面右上角的主题切换按钮（太阳/月亮图标）

2. 验证：

   • data-theme 属性应该从 light 变为 dark（或相反）
   • 所有颜色应该立即切换
   • localStorage 应该保存新主题：

     console.log(localStorage.getItem('apple-ui-theme'))
     

测试 3：主题持久化

1. 切换到深色模式

2. 刷新页面

3. 验证：

   • 页面应该保持深色模式
   • 没有闪烁（FOUC）

测试 4：系统主题偏好

1. 清除 localStorage：

   localStorage.removeItem('apple-ui-theme')
   

2. 在操作系统中切换到深色模式

3. 刷新页面

4. 验证：

   • 页面应该自动使用系统的深色模式

测试 5：组件主题适配

检查以下组件是否正确适配主题：

Button 组件

<!-- 浅色模式 -->
<button class="bg-apple-blue">
  <!-- 背景应该是 #007AFF -->
</button>

<!-- 深色模式 -->
<button class="bg-apple-blue">
  <!-- 背景应该是 #0A84FF -->
</button>

Badge 组件

• Success badge：绿色应该随主题变化
• Error badge：红色应该随主题变化
• Info badge：蓝色应该随主题变化

Alert 组件

• 所有类型的 Alert 颜色应该随主题变化

常见问题排查

问题 1：按钮颜色不变

检查：

// 1. 检查 HTML 属性
console.log(document.documentElement.getAttribute('data-theme'))

// 2. 检查 CSS 变量
console.log(getComputedStyle(document.documentElement).getPropertyValue('--color-blue'))

// 3. 检查 Tailwind 类名
const button = document.querySelector('button')
console.log(button.className)
// 应该包含 'bg-apple-blue'，不应该有 'bg-apple-blue-light'

解决方案：

• 确保 HTML 有 data-theme 属性
• 确保组件使用 bg-apple-blue 而不是 bg-apple-blue-light

问题 2：主题切换有闪烁

原因：内联脚本没有正确执行

检查：

// 查看 head 中的脚本
console.log(document.head.innerHTML)
// 应该包含主题初始化脚本

解决方案：

• 确保 layout.tsx 中的内联脚本在所有其他内容之前
• 检查浏览器控制台是否有 JavaScript 错误

问题 3：localStorage 不生效

检查：

// 设置主题
localStorage.setItem('apple-ui-theme', 'dark')

// 读取主题
console.log(localStorage.getItem('apple-ui-theme'))

// 刷新页面，检查是否保持

解决方案：

• 确保浏览器允许 localStorage
• 检查是否在隐私模式下（某些浏览器会限制 localStorage）

自动化测试脚本

在浏览器控制台运行以下脚本进行完整测试：

async function testThemeSystem() {
  console.log('=== 主题系统测试开始 ===\n')
  
  // 测试 1: 检查 data-theme 属性
  const theme = document.documentElement.getAttribute('data-theme')
  console.log('✓ 测试 1: data-theme 属性')
  console.log(`  当前主题: ${theme}`)
  console.assert(theme === 'light' || theme === 'dark', '主题应该是 light 或 dark')
  
  // 测试 2: 检查 CSS 变量
  const blue = getComputedStyle(document.documentElement).getPropertyValue('--color-blue')
  console.log('\n✓ 测试 2: CSS 变量')
  console.log(`  --color-blue: ${blue}`)
  console.assert(blue.trim() !== '', 'CSS 变量应该有值')
  
  // 测试 3: 检查按钮
  const button = document.querySelector('.bg-apple-blue')
  if (button) {
    const bgColor = getComputedStyle(button).backgroundColor
    console.log('\n✓ 测试 3: 按钮背景色')
    console.log(`  背景色: ${bgColor}`)
    console.assert(bgColor !== 'rgba(0, 0, 0, 0)', '按钮应该有背景色')
  }
  
  // 测试 4: 检查 localStorage
  const savedTheme = localStorage.getItem('apple-ui-theme')
  console.log('\n✓ 测试 4: localStorage')
  console.log(`  保存的主题: ${savedTheme || '未设置'}`)
  
  // 测试 5: 切换主题
  console.log('\n✓ 测试 5: 主题切换')
  const newTheme = theme === 'light' ? 'dark' : 'light'
  document.documentElement.setAttribute('data-theme', newTheme)
  const newBlue = getComputedStyle(document.documentElement).getPropertyValue('--color-blue')
  console.log(`  切换到: ${newTheme}`)
  console.log(`  新的 --color-blue: ${newBlue}`)
  console.assert(newBlue !== blue, '切换主题后颜色应该改变')
  
  // 恢复原主题
  document.documentElement.setAttribute('data-theme', theme)
  
  console.log('\n=== 主题系统测试完成 ===')
}

testThemeSystem()

预期输出

=== 主题系统测试开始 ===

✓ 测试 1: data-theme 属性
  当前主题: light

✓ 测试 2: CSS 变量
  --color-blue: #007AFF

✓ 测试 3: 按钮背景色
  背景色: rgb(0, 122, 255)

✓ 测试 4: localStorage
  保存的主题: light

✓ 测试 5: 主题切换
  切换到: dark
  新的 --color-blue: #0A84FF

=== 主题系统测试完成 ===

总结

如果所有测试都通过，说明主题系统工作正常。如果有任何测试失败，请参考"常见问题排查"部分。