Skip to content

深浅色实时跟随系统 - #4

Merged
stqfdyr merged 2 commits into
mainfrom
fix/theme-follows-system
Sep 23, 2026
Merged

stqfdyr merged 2 commits into
mainfrom
fix/theme-follows-system

Conversation

@stqfdyr

@stqfdyr stqfdyr commented Sep 20, 2026

Copy link
Copy Markdown
Collaborator

深浅色此前只在首次访问跟随系统一次,之后不再跟随。

  • 首次访问时 effect 就把系统偏好写进 localStorage,于是「跟随系统」变成一次性快照:访客此后换了系统配色,页面纹丝不动。
  • 改为只有点击切换时才落盘;没落盘时读 prefers-color-scheme 并监听它的 change。

tsc -b、oxlint、npm test、npm run build 通过;浏览器实测:未点过切换时随系统实时变化,点过之后固定。同一处代码在 monitor-probe/monitor-theme-serverstatus#5 一并修了。

此前在首次访问就把系统偏好写进 localStorage,此后系统再切换不再跟随,等于把「跟随系统」
变成一次性快照。改为只有点击切换时才落盘,未落盘时实时跟随 prefers-color-scheme。
此前把 DARK_MEDIA.matches 拷进 state,监听器要等 effect 才挂上:落在首次渲染与挂载之间
的那次切换没有人听见,而按日夜计划切换的下一次在几小时之后。改用 useSyncExternalStore
直接订阅。面板在同源的 /admin/ 下共用 theme 这个 key,任何一个 app 在加载时写盘都会把
其余的钉死,这条约束写进了注释。
@stqfdyr
stqfdyr merged commit 78824d6 into main Sep 23, 2026
1 check passed
@stqfdyr
stqfdyr deleted the fix/theme-follows-system branch September 23, 2026 05:05
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