fix(theme): 消除首帧主题闪动并柔化明暗过渡

- index.html 首帧按本机偏好设置 dark/light，避免先浅后深
- 实际 scheme 只写 dark/light（之前 auto 会覆盖成浅色）
- 切换时给所有表面加 240ms 颜色/边框/阴影过渡，结束后移除
- 背景图深色下淡出而不是 display:none
- 页头操作图标与分组导航等设置加载后再渲染，避免先显示后消失

stash-web/src/App.css

@@ -22,6 +22,7 @@
   height: 65vh;
   background: url('./assets/site-bg.jpg') center top / cover no-repeat;
   pointer-events: none;
+  transition: opacity 240ms var(--su-ease-in-out);
 }
 
 .site-background::after {
@@ -34,9 +35,9 @@
   background: linear-gradient(to bottom, transparent, var(--su-bg-page));
 }
 
-/* 这张背景图是浅色渐变图，深色下留着会糊成一层脏灰，直接不显示 */
+/* 这张背景图是浅色渐变图，深色下留着会糊成一层脏灰，淡出而不是直接消失 */
 [data-scheme='dark'] .site-background {
-  display: none;
+  opacity: 0;
 }
 
 /* ---------- 页头 ---------- */
@@ -1328,3 +1329,27 @@ a.entry-href:hover {
   color: var(--su-color-danger);
   background-color: color-mix(in srgb, var(--su-color-danger) 10%, transparent);
 }
+
+/* ---------- 明暗切换：短暂给所有表面补颜色过渡 ---------- */
+/* 只在切换的 260ms 内加 !important，避免覆盖组件平时的 hover/展开动画。 */
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *::before,
+html.theme-transition *::after {
+  transition:
+    background-color 240ms var(--su-ease-in-out),
+    border-color 240ms var(--su-ease-in-out),
+    color 240ms var(--su-ease-in-out),
+    fill 240ms var(--su-ease-in-out),
+    stroke 240ms var(--su-ease-in-out),
+    box-shadow 240ms var(--su-ease-in-out) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.theme-transition,
+  html.theme-transition *,
+  html.theme-transition *::before,
+  html.theme-transition *::after {
+    transition: none !important;
+  }
+}