chunyu_prject_react/.trae/documents/css-dark-mode-plan.md

CSS 暗色模式覆盖添加计划

目标

为 6 个工具页面 CSS 文件添加 [data-theme="dark"] 暗色模式覆盖样式。

文件清单与分析

1. TimestampTool/TimestampTool.css

• 前缀: .timestamp-, .ts-
• 主色: #8b5cf6 (紫色渐变 #8b5cf6 → #6366f1 → #3b82f6)
• 需要覆盖的类:
  • .timestamp-page
  • .timestamp-panel
  • .ts-panel-header
  • .ts-panel-title
  • .ts-panel-dot
  • .ts-back-btn
  • .timestamp-timezone-bar
  • .ts-timezone-label
  • .ts-result-item, .ts-result-label, .ts-result-value
  • .ts-result-copy
  • .ts-badge-seconds, .ts-badge-milliseconds
  • .ts-empty-hint-icon
  • .ts-action-clear (危险操作按钮)
• **说明：用户已提供完整内容,直接追加即可。

2. RegexTool/RegexTool.css

• 前缀: .regex-
• 主色: #f97316 (橙色渐变 #f97316 → #ea580c → #dc2626)
• 需要覆盖的类:
  • .regex-page
  • .regex-panel
  • .regex-panel-header
  • .regex-panel-title
  • .regex-panel-dot
  • .regex-back-btn
  • .regex-action-primary (主按钮 - 保持渐变)
  • .regex-action-danger (危险按钮)
  • .regex-flag-bar
  • .regex-preset-btn
  • .regex-match-count
  • .regex-result-item, .regex-result-index, .regex-result-text, .regex-result-pos
  • .regex-highlight-section, .regex-highlight-header, .regex-highlight-title
  • .regex-highlight-text (深色代码背景 #1e1e2e - 保持不变)
  • .regex-highlight-mark
  • .regex-tip-card
  • .regex-tip-symbol, .regex-tip-desc

3. TextDiff/TextDiff.css

• 前缀: .diff-
• 主色: #667eea (共享 ToolDetail 基础)
• 需要覆盖的类:
  • .diff-stats-bar
  • .diff-result-container (已经是深色背景,保持不变)
  • .diff-line 行样式保持
  • .diff-line-number
  • .diff-line-prefix
  • .diff-line-content

4. EncodingConverter/EncodingConverter.css

• 前缀: .ec-
• 主色: #f43f5e (粉色渐变 #f43f5e → #ec4899 → #fb7185)
• 注意: 依赖 .tool-detail-page .tool-detail-hero (ToolDetail.css 已处理)
• 需要覆盖的类:
  • .encoding-converter-page .tool-detail-hero (hero背景)
  • .ec-encoding-selectors
  • .ec-swap-encoding-btn
  • .ec-convert-btn (主按钮,保持渐变)
  • .ec-detected-tag

5. CharsetConverter/CharsetConverter.css

• 前缀: .cc- (charset converter)
• 主色: #1677ff (蓝色)
• 注意: 无 hero 渐变，但使用 #1677ff
• 需要覆盖的类:
  • .charset-converter-page
  • .cc-encoding-selectors
  • .cc-panel
  • .cc-textarea (浅色输入背景,但暗色模式用深色)
  • .cc-panel-footer
  • .cc-output (浅色输出背景)
  • .cc-swap-encoding-btn
  • .cc-convert-btn

6. ColorConverter/ColorConverter.css

• 前缀: .cc- (color converter), .color-converter-
• 主色: #6366f1 (靛蓝色渐变 #6366f1 → #8b5cf6 → #a855f7)
• 注意: cc- 前缀与 CharsetConverter 相同，但使用不同的主色
• 需要覆盖的类:
  • .color-converter-page
  • .cc-panel
  • .cc-panel-header
  • .cc-panel-title
  • .cc-panel-dot
  • .cc-back-btn
  • .cc-preview-block
  • .cc-native-picker
  • .cc-css-input
  • .cc-format-input
  • .cc-format-copy
  • .cc-swap-btn
  • .cc-section-divider
  • 注意：.color-converter-toolbar, .color-converter-container 等容器

通用规则

1. 页面背景: #0f172a
2. 面板背景: #1e293b
3. 边框: #334155
4. 面板头部: rgba(主色, 0.08)
5. 标题/文字: 标题 #f1f5f9, 正文 #94a3b8
6. 返回按钮: 颜色 #94a3b8, 边框 #334155, hover 变主题色
7. textarea 深色代码背景 #1e1e2e 保持不变
8. 危险按钮: 颜色 #f87171, hover 背景 rgba(239,68,68,0.1)
9. 在 @media 响应式块之后添加暗色模式

编辑方式

每个文件在末尾添加 /* ===== 暗色模式 ===== 开始的暗色模式覆盖块。