Skip to content

feat(desktop): follow OS theme with light/dark override - #53

Open
bd-dxg wants to merge 1 commit into
juejin-cn:mainfrom
bd-dxg:feat/desktop/theme-system
Open

feat(desktop): follow OS theme with light/dark override#53
bd-dxg wants to merge 1 commit into
juejin-cn:mainfrom
bd-dxg:feat/desktop/theme-system

Conversation

@bd-dxg

@bd-dxg bd-dxg commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

🏷️ 变动类型

  • 🆕 新功能
  • 🐞 Bug 修复
  • 🔌 新增 / 修复数据源解析器(parser)
  • 💄 样式与交互改进
  • ⚡️ 性能优化
  • 🛠 重构
  • 🤖 TypeScript 类型改进
  • 📝 文档改进
  • 📦 构建 / 打包 / 依赖
  • ✅ 测试用例
  • ⏩ 工作流 / CI
  • 🔒 安全修复
  • ❓ 其他(请说明是关于什么的改动)

🖥️ 影响范围

  • Desktop
  • CLI
  • Web

🔗 关联 Issue

无对应 issue。改动来源:用户需求——桌面版目前只有手动切换的浅色/深色主题,希望自动检测系统深浅色并跟随。

💡 改动说明

原来有什么问题

  1. 主题只有「亮色 / 暗色」两个手动选项,不感知操作系统深浅色,系统切换后界面不变。
  2. 主题选择没有持久化:currentTheme 只是主进程内存变量,重启后永远回到亮色。

这版怎么改的

  1. 主题模式升级为三态:跟随系统 / 亮色 / 暗色(切换控件各加一个显示器图标选项)。system 模式下用 Electron nativeTheme 解析系统外观,并通过 updated 事件实时跟随系统深浅色切换,无需重启。
  2. 用户选择持久化到 desktop-prefs.jsonthemeMode 字段),重启后保持;默认 system(升级后即自动跟随)。
  3. IPC 契约扩展为 { mode, resolved }mode 是用户选择(驱动三态高亮),resolved 是实际生效主题(驱动渲染),主窗口与 macOS 托盘弹窗保持一致,弹窗原生背景色也随主题更新。
  4. 顺带修复:手动主题重启丢失的问题(上述第 2 点)。

备选方案(被否)

  • 仅自动跟随、去掉手动切换:用户失去手动覆盖能力,不采用。
  • setThemeMode('system') 时渲染进程本地用 matchMedia 立即解析:固定模式下 prefers-color-scheme 反映的是 themeSource 而非真实系统外观,会短暂渲染错误主题,改为由主进程解析后广播。

UI 变化:主窗口筛选栏与托盘弹窗的主题切换控件从 2 选项变 3 选项(新增「跟随系统」),DashboardHeader 同样。无法贴对比图,可运行 pnpm dev:desktop 验证。

1788269037494

📝 Changelog

版本类型 变更描述(面向用户)
@juejin-opensource/jusage(CLI)
@juejin-opensource/jusage-core
@juejin-opensource/jusage-desktop patch 主题支持「跟随系统」:自动检测操作系统深浅色并实时跟随;手动选择的亮/暗主题会记住,重启后保持。
@juejin-opensource/jusage-dashboard

☑️ 自查清单

  • 分支命名符合 <type>/<end>/<short-desc>(见 CONTRIBUTING.md
  • 已在受影响的端本地自测通过(本次做了构建验证;运行态体验建议维护者 pnpm dev:desktop 验证:切换系统深浅色、三态切换、重启保持)
  • 若改动了面板 UI:已确认 packages/dashboard/srcapps/desktop/src/renderer 这两份同构但独立的代码是否都需要改(本次按需求只改 Desktop,Web 端不在此 PR 范围)
  • 已执行 pnpm changeset(纯文档 / CI 改动可跳过)
  • pnpm build 通过

- Add three-state theme mode (system / light / dark); nativeTheme resolves the OS appearance and follows it live
- Persist the theme mode in desktop-prefs.json so the choice survives restarts
- Extend the theme IPC contract to { mode, resolved } so the main window and tray popover stay in sync
- Keep the tray popover background in sync with the resolved theme
- Add changeset and CONTEXT.md domain terms
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