← back to Designer Wallcoverings
novasuede: add dark/light theme toggle in header upper-right (anti-flash + localStorage + CSS-var inversion)
658722c4280cecfd2762d07a5785af5cc338a9d2 · 2026-05-08 00:37:21 -0700 · Steve Abrams
Files touched
M DW-Websites/Novasuede/index.html
Diff
commit 658722c4280cecfd2762d07a5785af5cc338a9d2
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri May 8 00:37:21 2026 -0700
novasuede: add dark/light theme toggle in header upper-right (anti-flash + localStorage + CSS-var inversion)
---
DW-Websites/Novasuede/index.html | 65 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 65 insertions(+)
diff --git a/DW-Websites/Novasuede/index.html b/DW-Websites/Novasuede/index.html
index 13da13da..dc138498 100644
--- a/DW-Websites/Novasuede/index.html
+++ b/DW-Websites/Novasuede/index.html
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
+ <script>(function(){try{var t=localStorage.getItem('ns-theme');if(!t){t=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches)?'light':'dark';}document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Novasuede™ - Premium Microfiber Suede Fabric | 118 Colors</title>
@@ -1361,6 +1362,57 @@
}
</style>
+ <style id="ns-theme-toggle-styles">
+ /* Theme toggle button — upper-right of header, sun/moon */
+ .ns-theme-toggle {
+ position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
+ width: 38px; height: 38px; border-radius: 50%;
+ background: rgba(245,241,232,0.06); border: 1px solid rgba(245,241,232,0.18);
+ color: #f5f1e8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
+ font-size: 16px; line-height: 1; padding: 0; transition: background 200ms, transform 200ms, color 200ms, border-color 200ms;
+ z-index: 101;
+ }
+ .ns-theme-toggle:hover { background: rgba(245,241,232,0.14); transform: translateY(-50%) scale(1.06); }
+ .ns-theme-toggle:focus-visible { outline: 2px solid #DDAB1E; outline-offset: 2px; }
+ .ns-theme-toggle .ns-icon-sun { display: none; }
+ .ns-theme-toggle .ns-icon-moon { display: inline; }
+ @media (max-width: 820px) { .ns-theme-toggle { right: 64px; width: 34px; height: 34px; font-size: 14px; } }
+ @media (max-width: 600px) { .ns-theme-toggle { right: 56px; } }
+
+ /* LIGHT THEME — invert the GLOBAL DARK SWEEP */
+ html[data-theme="light"] body:not(.has-drapery),
+ html[data-theme="light"] body:not(.has-drapery) header,
+ html[data-theme="light"] body:not(.has-drapery) footer,
+ html[data-theme="light"] body:not(.has-drapery) section,
+ html[data-theme="light"] body:not(.has-drapery) .container,
+ html[data-theme="light"] body:not(.has-drapery) .colors-section,
+ html[data-theme="light"] body:not(.has-drapery) .new-arrivals-section,
+ html[data-theme="light"] body:not(.has-drapery) .features-section,
+ html[data-theme="light"] body:not(.has-drapery) .specs-section,
+ html[data-theme="light"] body:not(.has-drapery) .info-section,
+ html[data-theme="light"] body:not(.has-drapery) .testimonials-section,
+ html[data-theme="light"] body:not(.has-drapery) .gallery-section,
+ html[data-theme="light"] body:not(.has-drapery) .cta-section,
+ html[data-theme="light"] body:not(.has-drapery) .faq-section,
+ html[data-theme="light"] body:not(.has-drapery) .contact-section,
+ html[data-theme="light"] body:not(.has-drapery) main,
+ html[data-theme="light"] body:not(.has-drapery) article {
+ background: #f5f1e8 !important; background-color: #f5f1e8 !important; color: #0a0a0a !important;
+ }
+ html[data-theme="light"] .ns-header { background: rgba(245,241,232,0.92) !important; border-bottom-color: rgba(10,10,10,0.10) !important; }
+ html[data-theme="light"] .ns-nav a, html[data-theme="light"] .ns-nav button { color: #0a0a0a !important; }
+ html[data-theme="light"] .ns-nav a:hover, html[data-theme="light"] .ns-nav button:hover { color: #000 !important; }
+ html[data-theme="light"] .ns-theme-toggle { background: rgba(10,10,10,0.06); border-color: rgba(10,10,10,0.18); color: #0a0a0a; }
+ html[data-theme="light"] .ns-theme-toggle:hover { background: rgba(10,10,10,0.12); }
+ html[data-theme="light"] .ns-theme-toggle .ns-icon-sun { display: inline; }
+ html[data-theme="light"] .ns-theme-toggle .ns-icon-moon { display: none; }
+ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
+ html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] p,
+ html[data-theme="light"] li, html[data-theme="light"] span:not(.ns-dot):not(.ns-name) { color: #0a0a0a; }
+ html[data-theme="light"] .new-arrivals-section .new-arrivals-pill { background: #0a0a0a !important; color: #f5f1e8 !important; }
+ html[data-theme="light"] .color-filter-btn { color: #0a0a0a !important; border-color: rgba(10,10,10,0.18) !important; }
+ html[data-theme="light"] .color-filter-btn.active { background: #DDAB1E !important; color: #0a0a0a !important; }
+ </style>
</head>
<body>
<!-- Top contact-bar removed 2026-05-07 per Steve -->
@@ -1379,10 +1431,23 @@
<a href="about.html">About</a>
<button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
+ <button type="button" class="ns-theme-toggle" aria-label="Toggle dark/light theme" onclick="nsToggleTheme(this)" title="Toggle theme">
+ <span class="ns-icon-moon" aria-hidden="true">🌙</span>
+ <span class="ns-icon-sun" aria-hidden="true">☀️</span>
+ </button>
<button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
<span></span><span></span><span></span>
</button>
</header>
+ <script>
+ function nsToggleTheme(btn){
+ var cur = document.documentElement.getAttribute('data-theme') || 'dark';
+ var next = cur === 'dark' ? 'light' : 'dark';
+ document.documentElement.setAttribute('data-theme', next);
+ try { localStorage.setItem('ns-theme', next); } catch(e) {}
+ if (btn) btn.setAttribute('aria-label', 'Switch to ' + (next === 'dark' ? 'light' : 'dark') + ' theme');
+ }
+ </script>
<script>
function nsToggleNav(btn) {
var nav = document.getElementById('nsPrimaryNav');
← 1ef3bc10 fleet UX standardization: novasuede-style hamburger nav acro
·
back to Designer Wallcoverings
·
novasuede: REVERT theme-toggle change (broke layout) — resto 91d7a388 →