Skip to content

feat(theme): 新增主题系统#132

Open
hqwlkj wants to merge 16 commits into
lessweb:mainfrom
hqwlkj:feature/theme
Open

feat(theme): 新增主题系统#132
hqwlkj wants to merge 16 commits into
lessweb:mainfrom
hqwlkj:feature/theme

Conversation

@hqwlkj
Copy link
Copy Markdown
Contributor

@hqwlkj hqwlkj commented May 29, 2026

概述

为 Deep Code CLI 添加完整的主题系统,支持多套预设主题、实时预览切换、自定义配色,并修复了多个 UI 渲染问题。

主要变更

1. 主题系统核心

  • 新增 ThemeTokens 类型定义(13 个语义化颜色 token)
  • 新增 resolveTheme 主题解析器,支持 preset / overrides / tokens 三种配置方式
  • 新增 ThemedChalk 将主题 token 映射到 chalk 样式函数
  • 新增 ThemeProvider / useTheme React Context 机制
  • 全局 setCurrentTheme / getCurrentThemedChalk 供非组件代码使用

2. 预设主题(8 套)

预设 风格
light 浅色主题(默认)
dark 暗色主题
github-light GitHub Light
github-dark GitHub Dark
gitlab-light GitLab Light
gitlab-dark GitLab Dark
monokai Monokai
dracula Dracula

3. /theme 选择器

  • 新增 ThemeDropdown 组件,支持方向键浏览、实时预览、Space/Enter 确认、Esc 取消回退
  • 预览时仅切换 UI 不保存,确认后持久化到 settings.json
  • AppContext 新增 currentPreset / previewTheme / revertTheme

4. ThemeableStatic 组件

  • 替代 Ink <Static> 以支持主题切换时全量重渲染
  • key={themeVersion}:{resetKey} 机制:主题变化或会话切换时强制重新挂载
  • /new 清屏采用分步策略:先清空消息 → 清屏 → 再渲染 welcome 页面,避免 Ink 重绘覆盖

5. 退出摘要 React 化

  • 新增 ExitSummaryView 组件,替代 process.stdout.write 直接写入
  • 退出摘要通过 Ink React 渲染,解决终端滚动时内容丢失问题
  • 新增 buildExitSummaryData 返回结构化数据供组件使用

6. 文档同步更新

  • configuration.md / configuration_en.md:新增 /theme 命令描述
  • README.md / README-zh_CN.md / README-en.md:新增关于主题预设列表和 /theme 命令描述

hqwlkj added 13 commits May 28, 2026 16:09
- 移除多个组件和视图中的硬编码颜色,改为使用主题上下文提供的颜色
- 在AppContainer中添加ThemeProvider,初始化全局主题设置
- 优化消息视图、权限提示、提问提示、进程输出、状态列表等组件的颜色适配
- 调整markdown渲染和退出摘要中颜色生成逻辑,支持主题色彩
- 解决部分组件主题切换不更新的问题,确保依赖主题的子组件正确重渲染
- 更新权限提示中的风险颜色映射,改为从主题中读取
- 在PromptInput中支持高亮粘贴标记的颜色主题配置
- 移除了一些不再使用的硬编码颜色属性,提升UI一致性和可维护性
- 将全局主题中所有 accent/active 样式替换为 primary 样式
- 替换主题 token 名称及测试中的相关字段与断言
- 调整多个组件及视图中的颜色应用,使用 primary 色调
- 更新 Chalk 主题工程实现,使用 primary 和 secondary 代替 accent 和 accentAlpha
- 替换边框颜色及渐变色为 secondary
- 使用 useEffect 初始化主题,确保灵活响应主题变更
- 简化部分 UI 组件边框样式与文本加粗设置,统一区域主色调用
- 在 PermissionPrompt 组件中将风险色映射由 riskLow/riskMedium/riskHigh 改为 success/warning/error
- 修改 theme presets,移除旧的风险等级颜色配置
- 更新测试中风险颜色的断言,改为使用新的语义色断言
- 统一 README 文档中主题色 token,替换 accent/risk 相关为 primary/secondary 和语义色
- 修改 DropdownMenu 组件中选中项标签加粗表现
- 调整 MessageView 组件中 Thinking 状态颜色为 theme.text
- 精简 theme 类型定义,去除旧风险色属性,改用语义色属性
- 清理测试文件中与旧风险色相关的代码和注释内容
- 移除name文本的颜色属性,改为默认颜色显示
- 保持文本加粗样式不变
- 调整相关代码间距,提升阅读性
- 移除 App 组件中无用的 theme 依赖以减少重渲染
- 为状态提示文字添加左边距增强视觉效果
- 调整 DropdownMenu 组件中选中项标签字体加粗改为普通
- 修改 MessageView 中状态行的颜色由 theme.text 改为 theme.primary
- 更换 MessageView 中文本符号以提升美观度
- 更新主题色板中的 success、error、info 颜色值以及边框和渐变色
- PromptInput 组件中多处添加 marginLeft 进行缩进优化
- 根据焦点状态动态调整输入框底部边框颜色
- 在 SessionList 中根据搜索状态调整提示文字颜色为主色或次色
- 将 success 颜色从 #52c41a 修改为 #1a7f37
- 将 error 颜色从 #f5222d 修改为 #d1242f
- 将 info 颜色从 #2f54eb 修改为 #0969da
- 保持 warning 颜色不变,依然为 #fa8c16
- 将原来简略的 token 说明替换为详细的默认主题色值表格
- 新增每个 token 的默认颜色值,及其具体用途说明
- 说明颜色值支持 hex、带透明度的 hex 及 chalk 命名色
- 增加 tokens 优先于 overrides 的优先级说明
- 说明主题配置文件可放置的位置
- 文档中中英双语 README 都同步了相同修改内容
- 在主题预设中新增 textBright 颜色属性
- 在类型定义中添加 textBright 属性及对应注释
- 用于强调提示的文字显示优化
- 添加多种预设主题(暗色、Monokai、Dracula、GitHub Light/Dark、GitLab Light/Dark)
- 支持自定义主题颜色并保存至 settings.json,实现个性化调色
- 在 AppContext 中提供主题版本、当前预设和主题切换相关接口
- 实现主题预览、切换和回退功能,动态更新终端界面主题
- 修改应用入口 AppContainer,集成主题状态管理与持久化逻辑
- 在 PromptInput 添加主题切换相关回调和状态支持,集成主题选择组件
- 替换原有 Static 为支持主题的 ThemeableStatic,提升界面一致性
- 优化退出逻辑,新增结构化退出总结视图呈现
- 增加颜色令牌 textBright,丰富主题色彩层次
- 更新文档说明,详细介绍主题配置、预设主题及运行时主题切换操作
- 优化权限提示颜色映射,统一使用主题色配置
- DropdownMenu 支持禁用项及自定义标签颜色,增强菜单表达能力
- 详细说明运行时使用 `/theme` 命令打开主题选择器的交互方式
- 更新主题切换保存机制说明,支持实时预览及取消恢复
- README添加多套预设主题介绍及默认主题调整为浅色主题
- 说明 `theme.preset` 可切换预设主题或完全自定义主题,包含配置示例
- 补充新增亮色文字 `textBright` 颜色Token及其默认值
- 修改类型定义,明确预设主题可选值示例及“custom”含义
- 修改代码块语言标签颜色显示方式,增强可读性
@hqwlkj hqwlkj changed the title feat(ui): 统一使用主题颜色替代硬编码样式 feat(theme): 新增主题系统 May 30, 2026
hqwlkj added 3 commits May 30, 2026 17:00
- 在命令列表中增加了 /theme 命令
- 支持用户通过命令行更换界面主题
- 提升了用户自定义界面的灵活性和体验
- 在 App 组件中新增 onRestart 支持,区别处理生产环境和测试环境重启逻辑
- 修改 CLI 逻辑,实现 Ink 实例销毁后再清屏和启动应用,避免闪烁
- 在会话界面选择和视图重载时加入清屏控制,提升用户体验
- 调整 MessageView 组件中 Thinking 状态的颜色风格,增强主题一致性
- 修改状态参数文字颜色为正常文本色,提高可读性
- 在 README 文档各语言版本中新增 /theme 命令说明,支持主题选择功能
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant