Make theme toggle unobtrusive

Codex · Codex · commit 4da72eed9eb9 · 2026-05-11T17:45:38.000-05:00
diff --git a/404.html b/404.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/about.html b/about.html
@@ -61,7 +61,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/adoption-metrics.html b/adoption-metrics.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/analyze-any-coin.html b/analyze-any-coin.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/application-layer.html b/application-layer.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/builder-evidence.html b/builder-evidence.html
@@ -62,7 +62,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/builder-guide.html b/builder-guide.html
@@ -62,7 +62,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/coin-atlas.html b/coin-atlas.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/crypto-from-zero.html b/crypto-from-zero.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/crypto-history.html b/crypto-history.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/faq.html b/faq.html
@@ -114,7 +114,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/glossary.html b/glossary.html
@@ -70,7 +70,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/index.html b/index.html
@@ -77,7 +77,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/kaspa-in-one-screen.html b/kaspa-in-one-screen.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/knowledge-map.html b/knowledge-map.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/nav.js b/nav.js
@@ -15,8 +15,9 @@
 
   const renderThemeToggle = () => {
     const isLight = document.documentElement.dataset.theme === "light";
-    themeToggle.textContent = `Theme: ${isLight ? "Dark" : "Light"}`;
+    themeToggle.textContent = isLight ? "Dark" : "Light";
     themeToggle.setAttribute("aria-label", `Switch to ${isLight ? "dark" : "light"} mode`);
+    themeToggle.title = `Switch to ${isLight ? "dark" : "light"} mode`;
   };
 
   themeToggle.addEventListener("click", () => {
diff --git a/overview.html b/overview.html
@@ -66,7 +66,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/search.html b/search.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/sources.html b/sources.html
@@ -61,7 +61,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/start-here.html b/start-here.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/status.html b/status.html
@@ -62,7 +62,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/styles.css b/styles.css
@@ -264,26 +264,30 @@ main:focus {
 
 .theme-toggle {
   position: fixed;
-  right: 18px;
-  bottom: 18px;
+  right: 14px;
+  bottom: 14px;
   z-index: 80;
-  min-height: 38px;
+  min-width: 42px;
+  min-height: 30px;
   border: 1px solid var(--line-bright);
   border-radius: 999px;
-  padding: 8px 14px;
-  color: var(--text);
-  background: linear-gradient(135deg, var(--accent-soft), var(--surface-soft));
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(14px);
+  padding: 5px 9px;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--bg) 76%, transparent);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
+  backdrop-filter: blur(10px);
   font: inherit;
-  font-size: 13px;
-  font-weight: 800;
+  font-size: 11px;
+  font-weight: 750;
   cursor: pointer;
   white-space: nowrap;
+  opacity: .78;
 }
 
 .theme-toggle:hover {
   background: var(--accent-soft);
+  color: var(--text);
+  opacity: 1;
 }
 
 :root[data-theme="light"] .site-header,
@@ -2718,11 +2722,11 @@ blockquote {
   }
 
   .theme-toggle {
-    min-height: 34px;
+    min-height: 30px;
     right: 12px;
     bottom: 12px;
-    padding: 6px 10px;
-    font-size: 12px;
+    padding: 5px 9px;
+    font-size: 11px;
   }
 
   .nav-links {
diff --git a/tradeoff-map.html b/tradeoff-map.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/what-crypto-is-good-for.html b/what-crypto-is-good-for.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/where-kaspa-fits.html b/where-kaspa-fits.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/why-are-there-so-many-coins.html b/why-are-there-so-many-coins.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/why-crypto-has-value.html b/why-crypto-has-value.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
diff --git a/why-kaspa-matters.html b/why-kaspa-matters.html
@@ -51,7 +51,7 @@
         <a href="/search.html">Search</a>
         <a href="/about.html">About</a>
       </div>
-      <button class="theme-toggle" type="button">Theme: Light</button>
+      <button class="theme-toggle" type="button" aria-label="Switch theme">Light</button>
       <a class="nav-cta" href="/status.html">Check Status</a>
     </nav>
   </header>
