# 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` 响应式块之后添加暗色模式

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