feat(desktop): follow OS theme with light/dark override - #53
Open
bd-dxg wants to merge 5 commits into
Open
Conversation
- 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
Collaborator
|
哈喽呀，桌面端本地测试没问题了，如果可以的话方便适配下 CLI web, 以及rank端的设备主题吗 🎉 |
Contributor
Author
好的, 新的适配是开新的PR 还是继续在当前的PR呢? |
Collaborator
|
就当前pr 就行 |
Collaborator
直接在当前PR进行吧，实现的是同一个需求 |
Collaborator
3个按钮看要不要合成1个按钮
或者手动切换UI不变 + 一个内置跟随系统变换的逻辑就行 系统发生变换这里跟着变就行 |
Collaborator
|
emm 和一些合入代码冲突了 辛苦 顺手处理一下，应该是配置相关的定义 |
# Conflicts: # apps/desktop/src/main/autostart.ts # apps/desktop/src/preload/index.ts # apps/desktop/src/renderer/global.d.ts
- Replace the three-tab theme selector with one button that cycles system → light → dark; the icon and tooltip always show the active mode - Read the current mode from a ref in the theme provider so rapid consecutive clicks advance one step each - Sync the ActionRail theme button to the three-state mode instead of a resolved-theme guess - Load the persisted theme mode under the prefs write lock so a half-written file cannot surface
- Upgrade the web theme from two states to three (system / light / dark), persisted through HeroUI useTheme's localStorage intent; first-time visitors default to system - Follow live OS appearance changes while in system mode (HeroUI resolves and applies before first paint) - Replace the two-tab toggle with the same single cycling button in ThemeToggle and ActionRail, showing the current mode - Track the dashboard package in the theme changeset
Contributor
Author
1788346391890.mp4修改主题切换按钮为一个, web端也同步修改了, 现在一个按钮 从 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🏷️ 变动类型
🖥️ 影响范围
🔗 关联 Issue
无对应 issue。改动来源：用户需求——桌面版目前只有手动切换的浅色/深色主题，希望自动检测系统深浅色并跟随。
💡 改动说明
原来有什么问题
currentTheme只是主进程内存变量，重启后永远回到亮色。这版怎么改的
system模式下用 ElectronnativeTheme解析系统外观，并通过updated事件实时跟随系统深浅色切换，无需重启。desktop-prefs.json（themeMode字段），重启后保持；默认system（升级后即自动跟随）。{ mode, resolved }：mode是用户选择（驱动三态高亮），resolved是实际生效主题（驱动渲染），主窗口与 macOS 托盘弹窗保持一致，弹窗原生背景色也随主题更新。备选方案（被否）
setThemeMode('system')时渲染进程本地用matchMedia立即解析：固定模式下prefers-color-scheme反映的是 themeSource 而非真实系统外观，会短暂渲染错误主题，改为由主进程解析后广播。UI 变化：主窗口筛选栏与托盘弹窗的主题切换控件从 2 选项变 3 选项（新增「跟随系统」），DashboardHeader 同样。无法贴对比图，可运行
pnpm dev:desktop验证。📝 Changelog
@juejin-opensource/jusage（CLI）@juejin-opensource/jusage-core@juejin-opensource/jusage-desktop@juejin-opensource/jusage-dashboard☑️ 自查清单
<type>/<end>/<short-desc>（见 CONTRIBUTING.md）pnpm dev:desktop验证：切换系统深浅色、三态切换、重启保持）packages/dashboard/src与apps/desktop/src/renderer这两份同构但独立的代码是否都需要改（本次按需求只改 Desktop，Web 端不在此 PR 范围）pnpm changeset（纯文档 / CI 改动可跳过）pnpm build通过