From 7ba60943604ad37df7bbab3d6c8b9a11401bf2bc Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Wed, 26 Aug 2026 13:01:42 +0000
Subject: [PATCH] Proper cube transition background colors via base CSS mixing
 in theme bg.

---
 frontend/src/assets/pagerite.css    | 4 ++--
 pagerite/themes/corporate/theme.css | 4 ----
 pagerite/themes/nitro/theme.css     | 4 ----
 pagerite/themes/purple/theme.css    | 4 ----
 pagerite/themes/summer/theme.css    | 6 +++---
 5 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index 7d2f741..9bb81fe 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -1026,11 +1026,11 @@ footer {
   padding: 0;
 }
 
-/* Rotating-cube page transition, adapted from termotohtori.fi.
-   FRAGILE: do not tweak; the view-transition pseudo-tree is picky. */
+/* Rotating-cube page transition. */
 ::view-transition {
   perspective: 1000px;
   inset: 0;
+  background: color-mix(var(--bg) 50%, black 50%);
 }
 
 ::view-transition-group(root),
diff --git a/pagerite/themes/corporate/theme.css b/pagerite/themes/corporate/theme.css
index 3bc887a..ff060ae 100644
--- a/pagerite/themes/corporate/theme.css
+++ b/pagerite/themes/corporate/theme.css
@@ -140,7 +140,3 @@ pre {
 img {
   border-radius: 4px;
 }
-
-::view-transition {
-  background: var(--bg);
-}
diff --git a/pagerite/themes/nitro/theme.css b/pagerite/themes/nitro/theme.css
index 50239c8..c7a402f 100644
--- a/pagerite/themes/nitro/theme.css
+++ b/pagerite/themes/nitro/theme.css
@@ -206,7 +206,3 @@ pre {
 img {
   border-radius: 3px;
 }
-
-::view-transition {
-  background: var(--bg);
-}
diff --git a/pagerite/themes/purple/theme.css b/pagerite/themes/purple/theme.css
index 8a27143..2bcf3e6 100644
--- a/pagerite/themes/purple/theme.css
+++ b/pagerite/themes/purple/theme.css
@@ -91,7 +91,3 @@ blockquote {
 pre {
   --code-bg: var(--surface);
 }
-
-::view-transition {
-  background: #000;
-}
diff --git a/pagerite/themes/summer/theme.css b/pagerite/themes/summer/theme.css
index 87442e1..ee071c0 100644
--- a/pagerite/themes/summer/theme.css
+++ b/pagerite/themes/summer/theme.css
@@ -8,6 +8,7 @@
 
   /* Every color is sampled (or text-darkened) from banner.svg. */
   --bg: #e6f4cf;
+  --sky: #d9f1ff;
   /* pale meadow — the banner fades into this */
   --surface: #f8fbf0;
   --text: #2c4a2f;
@@ -260,8 +261,7 @@ figcaption,
   background: linear-gradient(160deg, #eef7dd, #d9eec5);
 }
 
-/* The page transition exposes summer color around the rotating
-   snapshots. */
 ::view-transition {
-  background: var(--bg);
+  /* Override to mid sky shade instead of the darker --bg we otherwise get */
+  background: var(--sky);
 }