118 lines
3.9 KiB
Markdown
118 lines
3.9 KiB
Markdown
# 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` 响应式块之后添加暗色模式
|
|
|
|
## 编辑方式
|
|
每个文件在末尾添加 `/* ===== 暗色模式 =====` 开始的暗色模式覆盖块。
|