LabelingSystem/web/apps/lq_label/THEME_FIX_QUICK_SUMMARY.md

主题颜色控制修复 - 快速总结

修复的问题

1. ✅ 标注页面和编辑器测试页面的 Header Bar - 现在完全受主题控制
2. ✅ 项目列表页面的徽章样式 - 在深色模式下有更好的对比度
3. ✅ SCSS 语法错误 - 修复了重复内容和缺少闭合括号的问题

修改的文件

样式文件

• web/apps/lq_label/src/views/annotation-view/annotation-view.module.scss - 添加主题感知的 header 样式
• web/apps/lq_label/src/views/editor-test/editor-test.module.scss - 添加主题感知的 header 样式
• web/apps/lq_label/src/views/project-list-view/project-list-view.module.scss - 优化 badgeInactive 样式

组件文件

• web/apps/lq_label/src/views/annotation-view/annotation-view.tsx - 使用 CSS 模块类替代 Tailwind 类
• web/apps/lq_label/src/views/editor-test/editor-test.tsx - 使用 CSS 模块类替代 Tailwind 类

关键改进

1. Header Bar 主题控制

之前：使用 Tailwind 类

<div className="flex items-center justify-between p-comfortable border-b border-neutral-border bg-primary-background">

现在：使用 CSS 模块和主题变量

<div className={styles.header}>

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-background);
}

2. 徽章样式优化

之前：对比度不够

.badgeInactive {
  background: var(--theme-background-secondary);
  color: var(--theme-paragraph-subtle);
}

现在：更好的对比度

.badgeInactive {
  background: var(--theme-background-tertiary);
  color: var(--theme-paragraph);
  border: 1px solid var(--theme-border);
}

测试建议

1. 切换到深色模式，检查标注页面的 header bar 是否正确显示
2. 切换到护眼模式，检查所有文本是否清晰可读
3. 在项目列表中查看 0 任务的徽章，确认对比度足够

主题变量参考

• --theme-background - 主背景色
• --theme-border - 边框颜色
• --theme-headline - 标题文本色
• --theme-paragraph - 正文文本色
• --theme-paragraph-subtle - 次要文本色
• --theme-background-tertiary - 第三级背景色

所有修改都遵循主题系统，确保在三种主题模式（白色、深色、护眼）下都有良好的视觉效果。