fix(ui): 修复主题切换按钮的水合不一致（夜读模式刷新报错）

- 首帧 mode 用默认值（与服务端一致）→ 消除 SSR/客户端 aria-label/图标不一致 - 图标改由 CSS 按 <html data-theme> 显隐（两个图标始终在 DOM）→ 无首帧闪烁、无结构差异 - 挂载后 useEffect 以 localStorage 校正 mode → label 恢复正确文案 - 去掉会锁死服务端陈旧 label 的 suppressHydrationWarning
2026-07-12 19:02:27 +02:00
parent 40cc3fc9e3
commit 9bc0e1f2e6
2 changed files with 22 additions and 11 deletions
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -134,6 +134,21 @@ body {
  }
 }

+/* 主题切换图标：显隐由 data-theme 决定（而非 JS 状态），两个图标始终在 DOM 里，
+   服务端/客户端首帧结构一致——既避免水合不一致，又无首帧闪烁。 */
+.theme-icon-moon {
+  display: inline-block;
+}
+.theme-icon-sun {
+  display: none;
+}
+[data-theme="night"] .theme-icon-moon {
+  display: none;
+}
+[data-theme="night"] .theme-icon-sun {
+  display: inline-block;
+}
+
 /* Toast 入场：淡入 + 轻微上移（尊重 prefers-reduced-motion，见下）。 */
 .toast-enter {
  animation: toast-in var(--dur-base) var(--ease-standard);