Add toggleable dark theme + reduced-motion guard to CommunityMech site

Additive dark-mode sweep across all reviewed pages (landing, browser,
UMAP/graph, and 265 per-community pages) plus the shared style.css.

- Vendor theme-toggle.js at web root (docs/); OS prefers-color-scheme
  default + persisted data-theme toggle. Included on every reviewed page
  (root: theme-toggle.js; communities/*: ../theme-toggle.js).
- Per-page dark blocks redefine each page's own tokens by role using the
  CommunityMech slate palette (bg #101420, surface #1a1f2e, ink #e8ecf4,
  muted #99a2b5, line #2a3142, accent #6ea6f0, hero #1d2740; brightened
  status colors). Both @media (prefers-color-scheme: dark) and
  :root[data-theme="dark"] variants; OS default yields to explicit light.
- Landing: map --pastel-b->bg, --pastel-a->hero; dark translucent stat/
  footer surfaces; accent buttons get dark text.
- Browser (token-less): targeted dark overrides for the specific selectors.
- UMAP/graph: plot bg -> --surface, .point stroke -> --surface, legend
  symbol stroke driven from --point-stroke var.
- Community network: label fills driven from --net-label var; plot bg
  follows --card; dark chip/box tints.
- Reduced-motion guard added to every page and style.css.

Edited templates AND every generated output identically (no re-render),
so template and docs stay in sync. Light appearance unchanged.

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

Author: realmarcin

docs/browser.html

@@ -413,7 +413,83 @@
             color: #64748b;
             font-size: 0.875rem;
         }
-    </style>
+    /* ---- Dark theme (OS default; superseded by the toggle) ---- */
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){--card:#1a1f2e; --ink:#e8ecf4; --line:#2a3142; --accent:#6ea6f0;}
+  :root:not([data-theme="light"]) body{background:#101420;color:#e8ecf4}
+  :root:not([data-theme="light"]) header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) header .home-link{color:#6ea6f0}
+  :root:not([data-theme="light"]) h1{color:#e8ecf4}
+  :root:not([data-theme="light"]) .subtitle{color:#99a2b5}
+  :root:not([data-theme="light"]) .filter-panel{background:#1a1f2e;border-color:#2a3142}
+  :root:not([data-theme="light"]) .filter-panel h3{color:#e8ecf4}
+  :root:not([data-theme="light"]) .search-container input{background:#101420;border-color:#2a3142;color:#e8ecf4}
+  :root:not([data-theme="light"]) .clear-btn{color:#99a2b5}
+  :root:not([data-theme="light"]) .clear-btn:hover{color:#e8ecf4}
+  :root:not([data-theme="light"]) .search-results-count{color:#99a2b5;border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) .facet-section{border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) .facet-toggle{color:#99a2b5}
+  :root:not([data-theme="light"]) .facet-actions button{background:#101420;border-color:#2a3142;color:#e8ecf4}
+  :root:not([data-theme="light"]) .facet-actions button:hover{background:#232a3d}
+  :root:not([data-theme="light"]) .facet-checkbox:hover{background:rgba(255,255,255,.04)}
+  :root:not([data-theme="light"]) .facet-count{color:#99a2b5}
+  :root:not([data-theme="light"]) .active-filters{background:rgba(251,191,36,.12);border-color:#fbbf24}
+  :root:not([data-theme="light"]) .btn-reset{background:#101420;border-color:#fbbf24;color:#e8ecf4}
+  :root:not([data-theme="light"]) .btn-reset:hover{background:rgba(251,191,36,.15)}
+  :root:not([data-theme="light"]) .filter-tag{background:#101420;border-color:#2a3142;color:#e8ecf4}
+  :root:not([data-theme="light"]) .filter-tag-remove{color:#99a2b5}
+  :root:not([data-theme="light"]) .filter-tag-remove:hover{color:#f87171}
+  :root:not([data-theme="light"]) .umap-link{background:#1a1f2e;border-color:#6ea6f0}
+  :root:not([data-theme="light"]) .umap-link h2{color:#6ea6f0}
+  :root:not([data-theme="light"]) .umap-link p{color:#99a2b5}
+  :root:not([data-theme="light"]) .umap-link a{background:#6ea6f0;color:#101420}
+  :root:not([data-theme="light"]) .umap-link a:hover{background:#8fbcf5}
+  :root:not([data-theme="light"]) .community-card{background:#1a1f2e;border-color:#2a3142}
+  :root:not([data-theme="light"]) .community-card h2{color:#6ea6f0}
+  :root:not([data-theme="light"]) .community-card .description{color:#99a2b5}
+  :root:not([data-theme="light"]) .badge-category{background:#232a3d;color:#cbd5e1}
+  :root:not([data-theme="light"]) .badge-member-count{background:#232a3d;color:#cbd5e1}
+  :root:not([data-theme="light"]) footer{border-top-color:#2a3142;color:#99a2b5}
+}
+:root[data-theme="dark"]{--card:#1a1f2e; --ink:#e8ecf4; --line:#2a3142; --accent:#6ea6f0;}
+:root[data-theme="dark"] body{background:#101420;color:#e8ecf4}
+:root[data-theme="dark"] header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+:root[data-theme="dark"] header .home-link{color:#6ea6f0}
+:root[data-theme="dark"] h1{color:#e8ecf4}
+:root[data-theme="dark"] .subtitle{color:#99a2b5}
+:root[data-theme="dark"] .filter-panel{background:#1a1f2e;border-color:#2a3142}
+:root[data-theme="dark"] .filter-panel h3{color:#e8ecf4}
+:root[data-theme="dark"] .search-container input{background:#101420;border-color:#2a3142;color:#e8ecf4}
+:root[data-theme="dark"] .clear-btn{color:#99a2b5}
+:root[data-theme="dark"] .clear-btn:hover{color:#e8ecf4}
+:root[data-theme="dark"] .search-results-count{color:#99a2b5;border-bottom-color:#2a3142}
+:root[data-theme="dark"] .facet-section{border-bottom-color:#2a3142}
+:root[data-theme="dark"] .facet-toggle{color:#99a2b5}
+:root[data-theme="dark"] .facet-actions button{background:#101420;border-color:#2a3142;color:#e8ecf4}
+:root[data-theme="dark"] .facet-actions button:hover{background:#232a3d}
+:root[data-theme="dark"] .facet-checkbox:hover{background:rgba(255,255,255,.04)}
+:root[data-theme="dark"] .facet-count{color:#99a2b5}
+:root[data-theme="dark"] .active-filters{background:rgba(251,191,36,.12);border-color:#fbbf24}
+:root[data-theme="dark"] .btn-reset{background:#101420;border-color:#fbbf24;color:#e8ecf4}
+:root[data-theme="dark"] .btn-reset:hover{background:rgba(251,191,36,.15)}
+:root[data-theme="dark"] .filter-tag{background:#101420;border-color:#2a3142;color:#e8ecf4}
+:root[data-theme="dark"] .filter-tag-remove{color:#99a2b5}
+:root[data-theme="dark"] .filter-tag-remove:hover{color:#f87171}
+:root[data-theme="dark"] .umap-link{background:#1a1f2e;border-color:#6ea6f0}
+:root[data-theme="dark"] .umap-link h2{color:#6ea6f0}
+:root[data-theme="dark"] .umap-link p{color:#99a2b5}
+:root[data-theme="dark"] .umap-link a{background:#6ea6f0;color:#101420}
+:root[data-theme="dark"] .umap-link a:hover{background:#8fbcf5}
+:root[data-theme="dark"] .community-card{background:#1a1f2e;border-color:#2a3142}
+:root[data-theme="dark"] .community-card h2{color:#6ea6f0}
+:root[data-theme="dark"] .community-card .description{color:#99a2b5}
+:root[data-theme="dark"] .badge-category{background:#232a3d;color:#cbd5e1}
+:root[data-theme="dark"] .badge-member-count{background:#232a3d;color:#cbd5e1}
+:root[data-theme="dark"] footer{border-top-color:#2a3142;color:#99a2b5}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
+}
+</style>
 </head>
 <body>
     <header>
@@ -9155,5 +9231,6 @@ <h2>m-CAFEs Brachypodium Reduced Complexity Consortia</h2>
         // Initialize facets when page loads
         initializeFacets();
     </script>
+    <script src="theme-toggle.js"></script>
 </body>
 </html>

docs/communities/AMD_Acidophile_Heterotroph_Network.html

@@ -342,7 +342,29 @@
         .network-tooltip strong {
             color: #93c5fd;
         }
-    </style>
+    /* ---- Dark theme (OS default; superseded by the toggle) ---- */
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+  :root:not([data-theme="light"]) header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) th{background:#232a3d}
+  :root:not([data-theme="light"]) .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+  :root:not([data-theme="light"]) .interaction-flow{background:rgba(255,255,255,.04)}
+  :root:not([data-theme="light"]) .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+  :root:not([data-theme="light"]) .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+  :root:not([data-theme="light"]) .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+}
+:root[data-theme="dark"]{--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+:root[data-theme="dark"] header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+:root[data-theme="dark"] th{background:#232a3d}
+:root[data-theme="dark"] .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+:root[data-theme="dark"] .interaction-flow{background:rgba(255,255,255,.04)}
+:root[data-theme="dark"] .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+:root[data-theme="dark"] .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+:root[data-theme="dark"] .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
+}
+</style>
 </head>
 <body>
     <header>
@@ -2014,15 +2036,15 @@ <h2>Environmental Factors</h2>
             .attr("text-anchor", "middle")
             .attr("dy", function(d) { return d.abundance === "DOMINANT" ? 30 : 24; })
             .attr("font-size", "10px")
-            .attr("fill", "#475569");
+            .style("fill", "var(--net-label, #475569)");
 
         // Labels for interactions (multi-line, centered in rectangle)
         node.filter(function(d) { return d.type === "interaction"; })
             .each(function(d) {
                 var textElem = d3.select(this).append("text")
                     .attr("text-anchor", "middle")
                     .attr("font-size", "9px")
-                    .attr("fill", "#475569")
+                    .style("fill", "var(--net-label, #475569)")
                     .style("pointer-events", "none");
 
                 // Word-wrap text to fit in rectangle (max ~24 chars per line)
@@ -2140,5 +2162,6 @@ <h2>Environmental Factors</h2>
     })();
     </script>
 
+    <script src="../theme-toggle.js"></script>
 </body>
 </html>

docs/communities/AMD_Nitrososphaerota_Archaeal.html

@@ -342,7 +342,29 @@
         .network-tooltip strong {
             color: #93c5fd;
         }
-    </style>
+    /* ---- Dark theme (OS default; superseded by the toggle) ---- */
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+  :root:not([data-theme="light"]) header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) th{background:#232a3d}
+  :root:not([data-theme="light"]) .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+  :root:not([data-theme="light"]) .interaction-flow{background:rgba(255,255,255,.04)}
+  :root:not([data-theme="light"]) .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+  :root:not([data-theme="light"]) .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+  :root:not([data-theme="light"]) .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+}
+:root[data-theme="dark"]{--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+:root[data-theme="dark"] header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+:root[data-theme="dark"] th{background:#232a3d}
+:root[data-theme="dark"] .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+:root[data-theme="dark"] .interaction-flow{background:rgba(255,255,255,.04)}
+:root[data-theme="dark"] .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+:root[data-theme="dark"] .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+:root[data-theme="dark"] .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
+}
+</style>
 </head>
 <body>
     <header>
@@ -1768,15 +1790,15 @@ <h2>Environmental Factors</h2>
             .attr("text-anchor", "middle")
             .attr("dy", function(d) { return d.abundance === "DOMINANT" ? 30 : 24; })
             .attr("font-size", "10px")
-            .attr("fill", "#475569");
+            .style("fill", "var(--net-label, #475569)");
 
         // Labels for interactions (multi-line, centered in rectangle)
         node.filter(function(d) { return d.type === "interaction"; })
             .each(function(d) {
                 var textElem = d3.select(this).append("text")
                     .attr("text-anchor", "middle")
                     .attr("font-size", "9px")
-                    .attr("fill", "#475569")
+                    .style("fill", "var(--net-label, #475569)")
                     .style("pointer-events", "none");
 
                 // Word-wrap text to fit in rectangle (max ~24 chars per line)
@@ -1894,5 +1916,6 @@ <h2>Environmental Factors</h2>
     })();
     </script>
 
+    <script src="../theme-toggle.js"></script>
 </body>
 </html>

docs/communities/ANME_SRB_Marine_Methane_Seep_Consortium.html

@@ -342,7 +342,29 @@
         .network-tooltip strong {
             color: #93c5fd;
         }
-    </style>
+    /* ---- Dark theme (OS default; superseded by the toggle) ---- */
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+  :root:not([data-theme="light"]) header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) th{background:#232a3d}
+  :root:not([data-theme="light"]) .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+  :root:not([data-theme="light"]) .interaction-flow{background:rgba(255,255,255,.04)}
+  :root:not([data-theme="light"]) .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+  :root:not([data-theme="light"]) .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+  :root:not([data-theme="light"]) .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+}
+:root[data-theme="dark"]{--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+:root[data-theme="dark"] header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+:root[data-theme="dark"] th{background:#232a3d}
+:root[data-theme="dark"] .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+:root[data-theme="dark"] .interaction-flow{background:rgba(255,255,255,.04)}
+:root[data-theme="dark"] .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+:root[data-theme="dark"] .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+:root[data-theme="dark"] .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
+}
+</style>
 </head>
 <body>
     <header>
@@ -1045,15 +1067,15 @@ <h2>Environmental Factors</h2>
             .attr("text-anchor", "middle")
             .attr("dy", function(d) { return d.abundance === "DOMINANT" ? 30 : 24; })
             .attr("font-size", "10px")
-            .attr("fill", "#475569");
+            .style("fill", "var(--net-label, #475569)");
 
         // Labels for interactions (multi-line, centered in rectangle)
         node.filter(function(d) { return d.type === "interaction"; })
             .each(function(d) {
                 var textElem = d3.select(this).append("text")
                     .attr("text-anchor", "middle")
                     .attr("font-size", "9px")
-                    .attr("fill", "#475569")
+                    .style("fill", "var(--net-label, #475569)")
                     .style("pointer-events", "none");
 
                 // Word-wrap text to fit in rectangle (max ~24 chars per line)
@@ -1171,5 +1193,6 @@ <h2>Environmental Factors</h2>
     })();
     </script>
 
+    <script src="../theme-toggle.js"></script>
 </body>
 </html>

docs/communities/Aalborg_East_Full_Scale_EBPR_Community.html

@@ -342,7 +342,29 @@
         .network-tooltip strong {
             color: #93c5fd;
         }
-    </style>
+    /* ---- Dark theme (OS default; superseded by the toggle) ---- */
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+  :root:not([data-theme="light"]) header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+  :root:not([data-theme="light"]) th{background:#232a3d}
+  :root:not([data-theme="light"]) .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+  :root:not([data-theme="light"]) .interaction-flow{background:rgba(255,255,255,.04)}
+  :root:not([data-theme="light"]) .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+  :root:not([data-theme="light"]) .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+  :root:not([data-theme="light"]) .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+}
+:root[data-theme="dark"]{--primary:#6ea6f0; --secondary:#99a2b5; --background:#101420; --card:#1a1f2e; --border:#2a3142; --text:#e8ecf4; --text-muted:#99a2b5; --success:#34d399; --warning:#fbbf24; --net-label:#cbd5e1;}
+:root[data-theme="dark"] header{background:linear-gradient(135deg,#1d2740,#101420);border-bottom-color:#2a3142}
+:root[data-theme="dark"] th{background:#232a3d}
+:root[data-theme="dark"] .interaction-type{background:rgba(52,211,153,.14);color:#34d399}
+:root[data-theme="dark"] .interaction-flow{background:rgba(255,255,255,.04)}
+:root[data-theme="dark"] .evidence-item{background:rgba(251,191,36,.10);border-left-color:#fbbf24}
+:root[data-theme="dark"] .empty-state{background:rgba(255,255,255,.03);border-color:#2a3142;color:#99a2b5}
+:root[data-theme="dark"] .role-badge{background:rgba(180,153,240,.16);color:#c4b5fd}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
+}
+</style>
 </head>
 <body>
     <header>
@@ -1240,15 +1262,15 @@ <h2>Environmental Factors</h2>
             .attr("text-anchor", "middle")
             .attr("dy", function(d) { return d.abundance === "DOMINANT" ? 30 : 24; })
             .attr("font-size", "10px")
-            .attr("fill", "#475569");
+            .style("fill", "var(--net-label, #475569)");
 
         // Labels for interactions (multi-line, centered in rectangle)
         node.filter(function(d) { return d.type === "interaction"; })
             .each(function(d) {
                 var textElem = d3.select(this).append("text")
                     .attr("text-anchor", "middle")
                     .attr("font-size", "9px")
-                    .attr("fill", "#475569")
+                    .style("fill", "var(--net-label, #475569)")
                     .style("pointer-events", "none");
 
                 // Word-wrap text to fit in rectangle (max ~24 chars per line)
@@ -1366,5 +1388,6 @@ <h2>Environmental Factors</h2>
     })();
     </script>
 
+    <script src="../theme-toggle.js"></script>
 </body>
 </html>