fix(theme): carry theme1/theme2 across editorial pages so theme2 no longer drops on navigation

0ec5a9e9a28ebefd71d2a3b5d5175a7717703ab1 · 2026-06-01 13:07:18 -0700 · SteveStudio2

care/history/sourcing/trade/vocabulary now include the same FOUC-guard bootstrap
+ shared /page-theme.css + /page-theme.js, so a visitor in theme2 keeps it when
navigating from the catalog into editorial content.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public/care.html
M public/history.html
M public/sourcing.html
M public/trade.html
M public/vocabulary.html

Diff

commit 0ec5a9e9a28ebefd71d2a3b5d5175a7717703ab1
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Mon Jun 1 13:07:18 2026 -0700

    fix(theme): carry theme1/theme2 across editorial pages so theme2 no longer drops on navigation
    
    care/history/sourcing/trade/vocabulary now include the same FOUC-guard bootstrap
    + shared /page-theme.css + /page-theme.js, so a visitor in theme2 keeps it when
    navigating from the catalog into editorial content.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/care.html       | 19 +++++++++++++++++++
 public/history.html    | 19 +++++++++++++++++++
 public/sourcing.html   | 19 +++++++++++++++++++
 public/trade.html      | 19 +++++++++++++++++++
 public/vocabulary.html | 19 +++++++++++++++++++
 5 files changed, 95 insertions(+)

diff --git a/public/care.html b/public/care.html
index 4cee22e..282937b 100644
--- a/public/care.html
+++ b/public/care.html
@@ -20,6 +20,25 @@ a{color:#7CC288;text-decoration:underline;text-underline-offset:3px}
 nav.foot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.10);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
 nav.foot a{margin-right:22px;text-decoration:none}
 </style>
+<!-- Page-theme preview: carry the theme1/theme2 choice across navigation (Steve 2026-06-01) -->
+<script>
+(function(){
+  var qs = new URLSearchParams(location.search);
+  var fromUrl = qs.get('theme');
+  var urlTheme = (fromUrl === '2' || fromUrl === 'theme2') ? 'theme2'
+               : (fromUrl === '1' || fromUrl === 'theme1') ? 'theme1' : null;
+  var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
+  var theme = urlTheme || ((saved === 'theme2' || saved === 'theme1') ? saved : null);
+  if (theme) {
+    var de = document.documentElement;
+    de.setAttribute('data-page-theme', theme);
+    de.setAttribute('data-theme-preview', 'on');
+    if (urlTheme) { try { localStorage.setItem('wallco-page-theme', urlTheme); } catch(e){} }
+  }
+})();
+</script>
+<link rel="stylesheet" href="/page-theme.css">
+<script src="/page-theme.js" defer></script>
 </head><body>
 <div class="wrap">
 <div class="eyebrow">Editorial · care · Tread Studio</div>
diff --git a/public/history.html b/public/history.html
index 375332f..c06fd09 100644
--- a/public/history.html
+++ b/public/history.html
@@ -20,6 +20,25 @@ a{color:#7CC288;text-decoration:underline;text-underline-offset:3px}
 nav.foot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.10);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
 nav.foot a{margin-right:22px;text-decoration:none}
 </style>
+<!-- Page-theme preview: carry the theme1/theme2 choice across navigation (Steve 2026-06-01) -->
+<script>
+(function(){
+  var qs = new URLSearchParams(location.search);
+  var fromUrl = qs.get('theme');
+  var urlTheme = (fromUrl === '2' || fromUrl === 'theme2') ? 'theme2'
+               : (fromUrl === '1' || fromUrl === 'theme1') ? 'theme1' : null;
+  var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
+  var theme = urlTheme || ((saved === 'theme2' || saved === 'theme1') ? saved : null);
+  if (theme) {
+    var de = document.documentElement;
+    de.setAttribute('data-page-theme', theme);
+    de.setAttribute('data-theme-preview', 'on');
+    if (urlTheme) { try { localStorage.setItem('wallco-page-theme', urlTheme); } catch(e){} }
+  }
+})();
+</script>
+<link rel="stylesheet" href="/page-theme.css">
+<script src="/page-theme.js" defer></script>
 </head><body>
 <div class="wrap">
 <div class="eyebrow">Editorial · history · Tread Studio</div>
diff --git a/public/sourcing.html b/public/sourcing.html
index 5dbac51..506c82d 100644
--- a/public/sourcing.html
+++ b/public/sourcing.html
@@ -20,6 +20,25 @@ a{color:#7CC288;text-decoration:underline;text-underline-offset:3px}
 nav.foot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.10);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
 nav.foot a{margin-right:22px;text-decoration:none}
 </style>
+<!-- Page-theme preview: carry the theme1/theme2 choice across navigation (Steve 2026-06-01) -->
+<script>
+(function(){
+  var qs = new URLSearchParams(location.search);
+  var fromUrl = qs.get('theme');
+  var urlTheme = (fromUrl === '2' || fromUrl === 'theme2') ? 'theme2'
+               : (fromUrl === '1' || fromUrl === 'theme1') ? 'theme1' : null;
+  var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
+  var theme = urlTheme || ((saved === 'theme2' || saved === 'theme1') ? saved : null);
+  if (theme) {
+    var de = document.documentElement;
+    de.setAttribute('data-page-theme', theme);
+    de.setAttribute('data-theme-preview', 'on');
+    if (urlTheme) { try { localStorage.setItem('wallco-page-theme', urlTheme); } catch(e){} }
+  }
+})();
+</script>
+<link rel="stylesheet" href="/page-theme.css">
+<script src="/page-theme.js" defer></script>
 </head><body>
 <div class="wrap">
 <div class="eyebrow">Editorial · sourcing · Tread Studio</div>
diff --git a/public/trade.html b/public/trade.html
index 34062d2..f2ff45d 100644
--- a/public/trade.html
+++ b/public/trade.html
@@ -20,6 +20,25 @@ a{color:#7CC288;text-decoration:underline;text-underline-offset:3px}
 nav.foot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.10);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
 nav.foot a{margin-right:22px;text-decoration:none}
 </style>
+<!-- Page-theme preview: carry the theme1/theme2 choice across navigation (Steve 2026-06-01) -->
+<script>
+(function(){
+  var qs = new URLSearchParams(location.search);
+  var fromUrl = qs.get('theme');
+  var urlTheme = (fromUrl === '2' || fromUrl === 'theme2') ? 'theme2'
+               : (fromUrl === '1' || fromUrl === 'theme1') ? 'theme1' : null;
+  var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
+  var theme = urlTheme || ((saved === 'theme2' || saved === 'theme1') ? saved : null);
+  if (theme) {
+    var de = document.documentElement;
+    de.setAttribute('data-page-theme', theme);
+    de.setAttribute('data-theme-preview', 'on');
+    if (urlTheme) { try { localStorage.setItem('wallco-page-theme', urlTheme); } catch(e){} }
+  }
+})();
+</script>
+<link rel="stylesheet" href="/page-theme.css">
+<script src="/page-theme.js" defer></script>
 </head><body>
 <div class="wrap">
 <div class="eyebrow">Editorial · trade · Tread Studio</div>
diff --git a/public/vocabulary.html b/public/vocabulary.html
index 4f9a818..d72edfc 100644
--- a/public/vocabulary.html
+++ b/public/vocabulary.html
@@ -20,6 +20,25 @@ a{color:#7CC288;text-decoration:underline;text-underline-offset:3px}
 nav.foot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.10);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
 nav.foot a{margin-right:22px;text-decoration:none}
 </style>
+<!-- Page-theme preview: carry the theme1/theme2 choice across navigation (Steve 2026-06-01) -->
+<script>
+(function(){
+  var qs = new URLSearchParams(location.search);
+  var fromUrl = qs.get('theme');
+  var urlTheme = (fromUrl === '2' || fromUrl === 'theme2') ? 'theme2'
+               : (fromUrl === '1' || fromUrl === 'theme1') ? 'theme1' : null;
+  var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
+  var theme = urlTheme || ((saved === 'theme2' || saved === 'theme1') ? saved : null);
+  if (theme) {
+    var de = document.documentElement;
+    de.setAttribute('data-page-theme', theme);
+    de.setAttribute('data-theme-preview', 'on');
+    if (urlTheme) { try { localStorage.setItem('wallco-page-theme', urlTheme); } catch(e){} }
+  }
+})();
+</script>
+<link rel="stylesheet" href="/page-theme.css">
+<script src="/page-theme.js" defer></script>
 </head><body>
 <div class="wrap">
 <div class="eyebrow">Editorial · vocabulary · Tread Studio</div>

← 8f5a5fa refactor(theme): extract page-theme to shared css/js; replac · back to Apartmentwallpaper · Remove Big Red widget — never UX-worked, collided with Help 9d32773 →