← back to Wallco Ai
feat(design page): theme1/theme2 toggle, default theme2 onload
4ad23bc0aae8e6f58b24a23038526e738c1eb9df · 2026-05-28 14:41:33 -0700 · Steve Abrams
Scoped to #detail-main only (does not touch global light/dark data-theme).
Theme 2 is a placeholder palette (white/black/brick) ready to be replaced
with the Figma mockup at JJuL0IPUZpUBrCdpubxzSU.
Files touched
Diff
commit 4ad23bc0aae8e6f58b24a23038526e738c1eb9df
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu May 28 14:41:33 2026 -0700
feat(design page): theme1/theme2 toggle, default theme2 onload
Scoped to #detail-main only (does not touch global light/dark data-theme).
Theme 2 is a placeholder palette (white/black/brick) ready to be replaced
with the Figma mockup at JJuL0IPUZpUBrCdpubxzSU.
---
server.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 73 insertions(+), 1 deletion(-)
diff --git a/server.js b/server.js
index 685cd95..fa54be6 100644
--- a/server.js
+++ b/server.js
@@ -10896,7 +10896,79 @@ app.get('/design/:id', (req, res) => {
})}
<body>
${htmlHeader('/designs')}
-<main class="detail-main">
+<main class="detail-main" id="detail-main" data-page-theme="theme2">
+<!-- Theme toggle (theme1 / theme2). Server-renders data-page-theme="theme2"
+ so theme2 is the default on first load (Steve 2026-05-28). The inline
+ script below upgrades to theme1 only when localStorage says so. Scope
+ is the product page only — does NOT touch global data-theme light/dark. -->
+<style id="page-theme-css">
+ #detail-main[data-page-theme="theme2"]{
+ --bg: #ffffff;
+ --ink: #0a0a0a;
+ --ink-soft: #4a4a4a;
+ --ink-faint: #8a8a8a;
+ --line: #e5e5e5;
+ --card-bg: #fafafa;
+ --accent: #c14a2e;
+ --accent-soft:#7a2a18;
+ background: var(--bg);
+ color: var(--ink);
+ }
+ #detail-main[data-page-theme="theme2"] h1,
+ #detail-main[data-page-theme="theme2"] h2,
+ #detail-main[data-page-theme="theme2"] h3{
+ letter-spacing:-0.01em; font-weight:500;
+ }
+ #detail-main[data-page-theme="theme2"] .card,
+ #detail-main[data-page-theme="theme2"] [class*="card"]{
+ background:var(--card-bg); border:1px solid var(--line); box-shadow:none;
+ }
+ #page-theme-toggle{
+ position:fixed; top:${_isAdmin ? '60px' : '14px'}; right:14px; z-index:90;
+ display:inline-flex; gap:0; align-items:center;
+ background:rgba(255,255,255,.92); border:1px solid #d8d2c5;
+ border-radius:999px; padding:3px; backdrop-filter:blur(6px);
+ box-shadow:0 2px 10px rgba(0,0,0,.08);
+ font:600 11px ui-sans-serif,system-ui; letter-spacing:.06em; text-transform:uppercase;
+ }
+ #page-theme-toggle button{
+ border:0; background:transparent; color:#5a5048; cursor:pointer;
+ padding:6px 14px; border-radius:999px; font:inherit; transition:all .15s;
+ }
+ #page-theme-toggle button[aria-pressed="true"]{ background:#1a1714; color:#faf7f2; }
+ #page-theme-toggle button:hover:not([aria-pressed="true"]){ color:#1a1714; }
+ @media (prefers-color-scheme: dark){
+ #page-theme-toggle{ background:rgba(20,18,16,.92); border-color:#3a3633; }
+ #page-theme-toggle button{ color:#c8beb2; }
+ #page-theme-toggle button:hover:not([aria-pressed="true"]){ color:#f0ebe3; }
+ }
+</style>
+<div id="page-theme-toggle" role="group" aria-label="Page theme">
+ <button type="button" data-theme="theme1" aria-pressed="false">Theme 1</button>
+ <button type="button" data-theme="theme2" aria-pressed="true">Theme 2</button>
+</div>
+<script>
+(function(){
+ var main = document.getElementById('detail-main');
+ var saved = null;
+ try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
+ var theme = saved === 'theme1' ? 'theme1' : 'theme2';
+ main.setAttribute('data-page-theme', theme);
+ var btns = document.querySelectorAll('#page-theme-toggle button');
+ function sync(t){
+ btns.forEach(function(b){ b.setAttribute('aria-pressed', b.dataset.theme === t ? 'true' : 'false'); });
+ }
+ sync(theme);
+ btns.forEach(function(b){
+ b.addEventListener('click', function(){
+ var t = b.dataset.theme;
+ main.setAttribute('data-page-theme', t);
+ try { localStorage.setItem('wallco-page-theme', t); } catch(e){}
+ sync(t);
+ });
+ });
+})();
+</script>
${_isAdmin ? `
<!-- Admin quick-action toolbar — Steve 2026-05-28: surface unpublish/fix/etsy
prominently on the front-end instead of buried in the Distribute drawer.
← 71a12b2 add botanical-wonders substitute generator + curator (12 des
·
back to Wallco Ai
·
mural categories never tile — helper + hard rule + fixed 12 8c14be1 →