From 065302544d2687bd0fe74bdd518414157b4e8632 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Fri, 26 Jun 2026 18:17:13 +0800
Subject: [PATCH] fix(theme): always expand NEW layer and explicitly set html
 background

When turning Dark off (Dark -> Light transition), the NEW layer is Light.
Previously we tried shrinking the OLD layer (Dark) over it, but if the
root snapshot captured a transparent html, revealing the transparent layer
produced no visual change.

Now we:
1. Always keep the NEW layer on top (z-index: 2).
2. Always animate the NEW layer expanding from 0 to max radius.
3. Explicitly set background-color on html in input.css to ensure the
   VT root snapshots are fully opaque, avoiding transparent captures that
   make expansions invisible.
4. Add background: var(--color-paper-theme) directly to ::view-transition-new
   just to be absolutely certain it's painted opaque.
---
 input.css                         |  1 +
 libs/yggdrasil-core/src/style.css | 32 ++++---------------------------
 2 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/input.css b/input.css
index 69e5d36..d4d4ac3 100644
--- a/input.css
+++ b/input.css
@@ -29,6 +29,7 @@
 @layer base {
   html {
     scroll-behavior: smooth;
+    background-color: var(--color-paper-theme);
   }
 
   body {
diff --git a/libs/yggdrasil-core/src/style.css b/libs/yggdrasil-core/src/style.css
index 52d6bbf..db09b74 100644
--- a/libs/yggdrasil-core/src/style.css
+++ b/libs/yggdrasil-core/src/style.css
@@ -8,35 +8,16 @@
   display: block;
 }
 
-/* =========================================================================
-   设计策略：
-   无论方向，我们始终让“暗色层”在上面，并对其使用 clip-path。
-   - 亮->暗：NEW 是暗色，放在上层，从小圆扩展。
-   - 暗->亮：OLD 是暗色，放在上层，从大圆收缩。
-   这样就能保证无论哪个方向，都是“暗色吞噬亮色”或“亮色穿透暗色”。
-   ========================================================================= */
-
-/* 默认情况：从暗到亮 (Dark -> Light)
-   此时 DOM 上的 .dark 已经被移除，目标是亮色(NEW)。
-   策略：把暗色旧图(OLD)放在上层，缩小它的 clip-path，揭开底部的亮色新图(NEW)。 */
+/* 无论什么方向,始终让 new (新状态) 在上方,并从小圆扩展覆盖 old */
 ::view-transition-old(root) {
-  z-index: 2;
-  animation: tt-shrink 0.4s ease-out forwards;
-}
-::view-transition-new(root) {
   z-index: 1;
 }
 
-/* 切换到暗色情况：从亮到暗 (Light -> Dark)
-   此时 DOM 上已加上 .dark，目标是暗色(NEW)。
-   策略：把暗色新图(NEW)放在上层，放大它的 clip-path，覆盖底部的亮色旧图(OLD)。 */
-.dark::view-transition-old(root) {
-  z-index: 1;
-  animation: none;
-}
-.dark::view-transition-new(root) {
+::view-transition-new(root) {
   z-index: 2;
   animation: tt-expand 0.4s ease-out forwards;
+  /* 显式给伪元素加上不透明背景,防止截图透明导致看不到覆盖效果 */
+  background: var(--color-paper-theme);
 }
 
 /* CSS 变量由 JS 注入到 html style 中 */
@@ -45,11 +26,6 @@
   to   { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); }
 }
 
-@keyframes tt-shrink {
-  from { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); }
-  to   { clip-path: circle(0px at var(--tt-x) var(--tt-y)); }
-}
-
 /* 在 View Transition 期间强制禁用所有 CSS 过渡,
    确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色。 */
 html.is-theme-transitioning,