Add dark mode with OS preference detection and manual toggle

- CSS token overrides (--ink, --rule, --bg-off, etc.) on html.dark - Explicit fixes for hardcoded values: nav blur bg, btn-dark inverts to light button, industry cells, kit icons, footer link colour - Sun/moon toggle button in every page's nav - Tiny inline FOUC-prevention script in <head> reads localStorage then falls back to prefers-color-scheme; toggle persists choice Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-13 18:50:20 +01:00
parent e1271a8b30
commit 60600886ec
6 changed files with 157 additions and 0 deletions
--- a/style.css
+++ b/style.css
@@ -1011,3 +1011,95 @@ footer {
  .hero-ctas .btn { justify-content: center; }
  .price-block { flex-direction: column; align-items: flex-start; }
 }
+
+/* ── Dark mode toggle button ─────────────────── */
+.theme-toggle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid var(--rule);
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-3);
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+  padding: 0;
+}
+.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
+.theme-toggle .icon-sun  { display: none; }
+.theme-toggle .icon-moon { display: block; }
+
+/* ── Dark mode ───────────────────────────────── */
+html.dark {
+  color-scheme: dark;
+  --ink:    #F0F0ED;
+  --ink-2:  #A8A8A2;
+  --ink-3:  #686864;
+  --ink-4:  #4E4E4A;
+  --ink-5:  #9A9A94;
+  --rule:   #2C2C2A;
+  --rule-2: #232321;
+  --bg-off: #161615;
+  --dark-bg: #050504;
+}
+
+html.dark ::selection { background: #F0F0ED; color: #0A0A0A; }
+
+html.dark body {
+  background: #0F0F0E;
+  color: #F0F0ED;
+}
+
+html.dark .nav {
+  background: rgba(15,15,14,0.88);
+}
+
+html.dark .theme-toggle .icon-sun  { display: block; }
+html.dark .theme-toggle .icon-moon { display: none; }
+
+html.dark .btn-dark {
+  background: #F0F0ED;
+  color: #0A0A0A;
+}
+
+html.dark .btn-outline {
+  background: transparent;
+  border-color: #3A3A38;
+  color: #F0F0ED;
+}
+
+html.dark .btn-outline:hover { border-color: #F0F0ED; }
+
+html.dark .industry-cell { background: #0F0F0E; }
+html.dark .section-off .industry-cell { background: #161615; }
+
+html.dark .kit-item-icon {
+  background: #2C2C2A;
+  box-shadow: none;
+}
+
+html.dark .footer-col-links { color: #9A9A94; }
+
+html.dark .hero-links a { border-bottom-color: #3A3A38; }
+
+html.dark .img-slot {
+  background: #161615;
+  border-color: #2C2C2A;
+}
+
+html.dark .product-card.featured {
+  background: #F0F0ED;
+  color: #0A0A0A;
+  border-color: transparent;
+}
+html.dark .product-card.featured .product-card-tag { color: rgba(10,10,10,0.5); }
+html.dark .product-card.featured .product-desc     { color: rgba(10,10,10,0.7); }
+html.dark .product-card.featured .product-features { color: rgba(10,10,10,0.85); }
+html.dark .product-card.featured .product-price    { color: #0A0A0A; }
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]):not(.dark) { /* auto-apply if JS hasn't run yet */ }
+}