frontend: FE-033 明暗主题三态切换并跟随系统,防闪白+全局过渡+Monaco同步
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
## 状态
|
||||
|
||||
todo
|
||||
done
|
||||
|
||||
## 优先级
|
||||
|
||||
@@ -64,9 +64,21 @@ cd mactfsui && pnpm typecheck && pnpm electron:dev
|
||||
|
||||
## 完成记录
|
||||
|
||||
待完成后填写:
|
||||
|
||||
- 实际修改文件:
|
||||
- 新增 `mactfsui/app/hooks/use-theme.ts`
|
||||
- `mactfsui/app/components/app/top-bar.tsx`(三态主题切换按钮)
|
||||
- `mactfsui/app/root.tsx`(首屏前同步主题,防暗色闪白)
|
||||
- `mactfsui/app/app.css`(theme-transition 全局颜色过渡)
|
||||
- `mactfsui/app/components/explorer/diff-dialog.tsx`(MutationObserver 同步 Monaco 主题)
|
||||
- 实际实现内容:
|
||||
- `useTheme`:「跟随系统 / 亮 / 暗」三态,持久化 `mactfs.theme`;跟随系统时监听 `prefers-color-scheme` 自动切换
|
||||
- 顶栏新增循环切换按钮(Monitor/Sun/Moon 图标 + tooltip),按 跟随系统→亮→暗 循环
|
||||
- 切换瞬间挂载 `.theme-transition` 实现 250ms 全局颜色过渡,320ms 后移除避免影响其它动画
|
||||
- root 头部内联脚本在首屏渲染前按持久化偏好/系统外观设置 `.dark`,配合 FE-027 的窗口背景色消除闪白
|
||||
- Diff 弹窗打开期间切换主题时,通过 MutationObserver 调用 `monaco.editor.setTheme` 即时跟随(明暗两套 mactfs 主题在 FE-018 已内置)
|
||||
- 测试结果:
|
||||
- `pnpm typecheck` 通过、`pnpm build` 通过
|
||||
- 产物 CSS 确认 theme-transition 已编译
|
||||
- dark 模式全页面对比度走查留待 FE-034 回归(token 在 FE-026 已按深灰体系成对定义)
|
||||
- 遗留问题:
|
||||
- 无
|
||||
|
||||
Reference in New Issue
Block a user