47 lines
1.9 KiB
Markdown
47 lines
1.9 KiB
Markdown
# 二维码生成器夜间模式适配 Spec
|
|
|
|
## Why
|
|
二维码生成器页面的夜间模式不完整：hero 区亮紫色渐变在暗色下刺眼、部分自定义元素缺少暗色样式，影响夜间使用体验。
|
|
|
|
## What Changes
|
|
- hero 区渐变改为暗色调
|
|
- 补充缺失的自定义元素暗色样式（生成按钮、下载按钮、弹窗 body、颜色选择器边框等）
|
|
- 确保暗色模式下整体视觉柔和舒适
|
|
|
|
## Impact
|
|
- Affected specs: qrcode-logo-and-styles, qrcode-fixes-and-improvements
|
|
- Affected code: `src/pages/QRCodeGenerator/QRCodeGenerator.css`
|
|
|
|
## MODIFIED Requirements
|
|
|
|
### Requirement: Hero 区暗色渐变
|
|
系统 SHALL 在暗色模式下使用深色调渐变替代亮紫色。
|
|
|
|
#### Scenario: 暗色模式 Hero
|
|
- **WHEN** 系统处于暗色模式
|
|
- **THEN** hero 区背景使用深紫/深蓝渐变（如 #1e1b4b → #312e81），而非亮紫色 #667eea → #764ba2
|
|
|
|
### Requirement: 自定义按钮暗色基础样式
|
|
系统 SHALL 在暗色模式下为自定义按钮提供合适的基色。
|
|
|
|
#### Scenario: 生成按钮暗色
|
|
- **WHEN** 系统处于暗色模式
|
|
- **THEN** 生成按钮渐变稍暗（如 #4f46e5 → #6366f1），hover 效果保持
|
|
|
|
#### Scenario: 下载按钮暗色
|
|
- **WHEN** 系统处于暗色模式
|
|
- **THEN** 下载按钮渐变稍暗（如 #059669 → #10b981），hover 效果保持
|
|
|
|
### Requirement: 弹窗 body 暗色背景
|
|
系统 SHALL 在暗色模式下为美化弹窗 body 提供暗色背景。
|
|
|
|
#### Scenario: 弹窗暗色 body
|
|
- **WHEN** 系统处于暗色模式且美化弹窗打开
|
|
- **THEN** 弹窗 body 区域背景为 #1e293b，与弹窗 header 一致
|
|
|
|
### Requirement: 颜色选择器暗色边框
|
|
系统 SHALL 在暗色模式下为原生 color input 提供可见边框。
|
|
|
|
#### Scenario: 颜色选择器暗色
|
|
- **WHEN** 系统处于暗色模式
|
|
- **THEN** color input 的 swatch 边框为 #475569，与暗色背景区分 |