---
name: dark-theme-design
description: 当需要设计暗色主题界面时使用此规则——包括iOS风格暗色主题设计规范。包括：选择与暗色主题协调的配色方案；设计暗色背景上的文字、图标和界面元素；确保足够的对比度和可读性；适配iOS系统的暗色模式；设计暗色主题下的布局和间距；处理暗色主题中的颜色反转和透明度；创建暗色主题的设计资源；优化暗色主题下的视觉效果。每当用户提及"暗色主题"、"夜间模式"、"dark mode"、"iOS暗色"、"移动端暗色"、"深色界面"或需要设计暗色风格界面时触发，无论他们之后打算如何适配。如果需要设计、实现或评估暗色主题界面，请使用此规则。
---

# 暗色主题设计规则

## 你必须遵循的工作流程

### 暗色主题设计流程（严格执行）

1. **🎨 视觉基调设定阶段**：
   - 首先确定全局底色规范，杜绝纯黑背景
   - 选择 iOS 系统级深灰或深冷灰作为基础色调
   - 建立与白色组件的视觉落差标准

2. **🔧 材质质感构建阶段**：
   - 应用极致毛玻璃效果（40-60px backdrop-blur）
   - 实施双层物理描边（内描边 + 外描边）
   - 设计深度反馈阴影系统

3. **🎯 交互组件规范阶段**：
   - 定义高对比交互按钮标准
   - 实现触觉反馈动画（scale-95 或 scale-[0.98]）
   - 遵循 iOS 连续曲率圆角美学

4. **📐 布局逻辑实施阶段**：
   - 创建层级堆叠视觉效果
   - 应用呼吸感排版（大间距原则）
   - 确保界面清晰度和可读性

5. **🔍 细节优化验证阶段**：
   - 统一字体规范（Inter 或 SF Pro Display）
   - 标准化图标使用（Lucide-React）
   - 执行质量检查清单验证

## 你必须遵守的原则

### 视觉基调原则

- **必须**：杜绝纯黑背景，使用 iOS 系统级深灰 `[#1C1C1E]` 或深冷灰 `[#121214]`
- **必须**：确保与白色组件产生明确的视觉落差
- **必须**：任何按钮或交互组件的背景必须比父容器深或浅 3%-10%
- **禁止**：使用单一纯色造成视觉混淆

### 材质质感原则

- **必须**：层级容器使用 `backdrop-blur-[40px]` 到 `[60px]`
- **必须**：背景色采用 `Black/40` 至 `Black/60` 的半透明填充
- **必须**：使用双层物理描边（内描边 `1px border-black/60` + 外描边 `1px border-gray-700/40`）
- **禁止**：使用低模糊度（低于 20px）导致背景透出
- **禁止**：只使用单层描边或过粗的边框

### 交互反馈原则

- **必须**：所有可点击项具备 `active:scale-95` 或 `active:scale-[0.98]` 的物理回弹反馈
- **必须**：Hover 状态下增加 `backdrop-blur-3xl` 或微调边框明度
- **必须**：悬浮组件使用扩散范围极大的柔和阴影 `shadow-[0_24px_48px_-12px_rgba(0,0,0,0.3)]`
- **必须**：凹陷组件使用 `shadow-inner` 配合 `bg-gray-800/50`
- **禁止**：无反馈的静态交互元素
- **禁止**：使用生硬、边缘清晰的阴影

### 布局排版原则

- **必须**：界面看起来像是由多层"打磨过的深色有机玻璃板"堆叠而成
- **必须**：内边距（Padding）至少为 `p-6` 或 `p-8`
- **必须**：使用 Inter 或 SF Pro Display 字体
- **必须**：统一使用 Lucide-React 图标库
- **禁止**：扁平化设计导致层级不明确
- **禁止**：紧凑的布局导致视觉压迫

## 具体要求和规范

### 色彩规范要求

**全局底色标准：**

- **必须**：使用 iOS 系统级深灰 `[#1C1C1E]` 或深冷灰 `[#121214]`
- **必须**：确保与白色组件产生明确的视觉落差
- **必须**：杜绝纯黑背景的使用

**对比度标准：**

- **必须**：按钮和交互组件与父容器保持 3%-10% 的色阶差异
- **必须**：通过微弱色阶差异而非粗糙线条区分边界
- **禁止**：使用单一纯色造成视觉混淆

### 材质质感要求

**毛玻璃效果标准：**

- **必须**：层级容器使用 `backdrop-blur-[40px]` 到 `[60px]`
- **必须**：背景色采用 `Black/40` 至 `Black/60` 的半透明填充
- **禁止**：模糊度低于 20px

**描边规范：**

- **必须**：内描边 `1px border-black/60`（模拟玻璃切面光线）
- **必须**：外描边 `1px border-gray-700/40`（定义物理空间轮廓）
- **禁止**：单层描边或超过 1px 的边框

**阴影系统：**

- **必须**：悬浮组件使用 `shadow-[0_24px_48px_-12px_rgba(0,0,0,0.3)]`
- **必须**：凹陷组件使用 `shadow-inner` 配合 `bg-gray-800/50`
- **禁止**：生硬、边缘清晰的阴影

### 交互组件要求

**按钮规范：**

- **必须**：主按钮使用"亮白色" `[#FFFFFF]` 或"浅灰色"
- **必须**：次级按钮使用带有微弱投影的深色块
- **必须**：通过颜色对比引导用户注意力

**触觉反馈：**

- **必须**：所有可点击项具备 `active:scale-95` 或 `active:scale-[0.98]` 反馈
- **必须**：Hover 状态增加 `backdrop-blur-3xl` 或微调边框明度
- **禁止**：无反馈的静态交互元素

**圆角标准：**

- **必须**：大容器 `rounded-[40px]` 至 `[50px]`
- **必须**：功能块 `rounded-[28px]`
- **必须**：小组件 `rounded-xl`
- **必须**：遵循 iOS 连续曲率
- **禁止**：不一致的圆角值

## 实践指导

### 设计实施策略

**从基础到复杂的渐进式方法：**

1. **先建立色彩基础**：确定全局底色和对比度标准
2. **再构建材质层次**：逐步添加毛玻璃、描边和阴影效果
3. **最后完善交互细节**：优化按钮、字体和图标规范

**常见设计陷阱避免：**

- 避免直接使用纯黑色背景，这会导致界面显得过于沉重
- 避免使用过细的字体，暗色环境下可读性会降低
- 避免过度使用阴影，保持简洁的层级关系

### 最佳实践示例

**优秀的暗色主题设计应该：**

- 使用微妙的色彩变化而非强烈的对比
- 通过材质质感而非颜色饱和度的变化来表达层级
- 保持足够的留白空间，让界面有"呼吸感"
- 确保所有交互元素都有清晰的视觉反馈

**设计验证方法：**

- 在不同光照条件下测试界面可读性
- 验证色盲用户的可访问性
- 检查低对比度显示设备上的显示效果
- 确认所有交互状态都有明确的视觉区分

## 执行检查清单

### 设计前检查项

在开始暗色主题设计前，你必须确认：

- [ ] 已确定全局底色规范（iOS 系统级深灰或深冷灰）
- [ ] 已建立与白色组件的视觉落差标准
- [ ] 已规划层级结构和材质质感层次
- [ ] 已选择 Inter 或 SF Pro Display 字体
- [ ] 已确定 Lucide-React 图标库使用方案

### 设计实施检查项

在实施设计过程中，你必须确认：

- [ ] 全局底色使用了 iOS 系统级深灰 `[#1C1C1E]` 或深冷灰 `[#121214]`
- [ ] 杜绝了纯黑背景的使用
- [ ] 按钮和交互组件与父容器保持 3%-10% 的色阶差异
- [ ] 层级容器使用了 40-60px 的 backdrop-blur
- [ ] 使用了双层物理描边（内描边 black/60 + 外描边 gray-700/40）
- [ ] 悬浮组件使用了柔和的大扩散阴影
- [ ] 凹陷组件使用了 shadow-inner 配合深灰背景
- [ ] 主按钮使用了亮白色或浅灰色
- [ ] 所有可点击项有物理回弹反馈（scale-95 或 scale-[0.98]）
- [ ] 圆角遵循了 iOS 连续曲率规范
- [ ] 界面有清晰的层级堆叠感
- [ ] 内边距至少为 p-6 或 p-8
- [ ] 标题使用了 Font-Extrabold + Tracking-tight
- [ ] 次要信息使用了 Uppercase + Tracking-widest
- [ ] 统一使用了 Lucide-React 图标
- [ ] 图标线条粗度为 1.5 或 2

### 设计验证检查项

在完成设计后，你必须确认：

- [ ] 在不同光照条件下测试了界面可读性
- [ ] 验证了色盲用户的可访问性
- [ ] 检查了低对比度显示设备上的显示效果
- [ ] 确认了所有交互状态都有明确的视觉区分
- [ ] 进行了跨浏览器兼容性测试
- [ ] 验证了响应式设计的适配性
