From 4605a22f2a62c436c6363abe7f8f013089d631d5 Mon Sep 17 00:00:00 2001
From: mchittineni <manideep.chittineni@hotmail.com>
Date: Tue, 11 Aug 2026 19:40:48 +0100
Subject: [PATCH 1/2] fix(theme-mode): update theme mode toggle functionality

---
 docs/index.html                  | 554 ++++++++++++++++++++++++++-----
 scripts/build_knowledge_graph.py | 547 +++++++++++++++++++++++++-----
 2 files changed, 928 insertions(+), 173 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index c68098d..40a32ac 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,18 +4,148 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DevOps & Cloud Engineering Knowledge Graph</title>
+
+  <!-- Resolve the theme before first paint so the page never flashes the
+       wrong palette. Must stay inline and ahead of the stylesheet. -->
+  <script>
+    (function () {
+      var mode;
+      try { mode = localStorage.getItem('devops-graph-theme'); } catch (e) { /* private mode */ }
+      if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
+      var effective = mode === 'system'
+        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        : mode;
+      var root = document.documentElement;
+      root.setAttribute('data-theme-mode', mode);
+      root.setAttribute('data-theme', effective);
+    })();
+  </script>
+
   <script src="https://unpkg.com/3d-force-graph@1.73.3/dist/3d-force-graph.min.js" integrity="sha384-SIcVySj+Cd1g+cwoLNCdr/osXU15HLXCxfaSzFNkZICYeKS7I2YxhyggCijT8JHA" crossorigin="anonymous"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');
 
+    /* ---------------------------------------------------------------
+       Theme tokens. Light is the bare :root default; dark is layered on
+       twice so both the "system" default and an explicit toggle win:
+         - @media (prefers-color-scheme: dark) for mode=system
+         - [data-theme="dark"] for an explicit choice
+       Every colour below is a token so the toggle needs no JS per rule.
+       --------------------------------------------------------------- */
+    :root {
+      --bg: #eef2f7;
+      --panel-bg: rgba(255, 255, 255, 0.92);
+      --panel-border: #cbd5e1;
+      --panel-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.18), 0 0 15px rgba(8, 145, 178, 0.10);
+      --text-strong: #0f172a;
+      --text-body: #1e293b;
+      --text-muted: #475569;
+      --text-dim: #475569;
+      --text-legend: #334155;
+      --accent: #0891b2;
+      --accent-fg: #0e7490;
+      --accent-soft-bg: rgba(8, 145, 178, 0.12);
+      --accent-soft-border: rgba(8, 145, 178, 0.35);
+      --accent-hover-bg: rgba(8, 145, 178, 0.14);
+      --accent-ring: rgba(8, 145, 178, 0.25);
+      --input-bg: #ffffff;
+      --input-border: #cbd5e1;
+      --result-bg: #f8fafc;
+      --divider: rgba(100, 116, 139, 0.35);
+      --btn-bg: #0369a1;
+      --btn-bg-hover: #075985;
+      --btn-fg: #ffffff;
+      --ghost-hover-bg: #e2e8f0;
+      --tag-alpha: 0.10;
+      --tag-topic-fg: #0e7490;
+      --tag-question-fg: #1d4ed8;
+      --tag-beginner-fg: #047857;
+      --tag-intermediate-fg: #92400e;
+      --tag-advanced-fg: #b91c1c;
+      --tag-domain-fg: #6d28d9;
+      --tag-general-fg: #475569;
+    }
+
+    /* mode=system, OS is dark */
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --bg: #0b0f19;
+        --panel-bg: rgba(15, 23, 42, 0.90);
+        --panel-border: #334155;
+        --panel-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.65), 0 0 18px rgba(6, 182, 212, 0.12);
+        --text-strong: #f8fafc;
+        --text-body: #e2e8f0;
+        --text-muted: #94a3b8;
+        --text-dim: #94a3b8;
+        --text-legend: #cbd5e1;
+        --accent: #06b6d4;
+        --accent-fg: #22d3ee;
+        --accent-soft-bg: rgba(6, 182, 212, 0.12);
+        --accent-soft-border: rgba(6, 182, 212, 0.3);
+        --accent-hover-bg: rgba(6, 182, 212, 0.2);
+        --accent-ring: rgba(6, 182, 212, 0.2);
+        --input-bg: rgba(30, 41, 59, 0.8);
+        --input-border: #334155;
+        --result-bg: rgba(30, 41, 59, 0.6);
+        --divider: rgba(51, 65, 85, 0.5);
+        --btn-bg: #0284c7;
+        --btn-bg-hover: #0369a1;
+        --btn-fg: #ffffff;
+        --ghost-hover-bg: #1e293b;
+        --tag-alpha: 0.15;
+        --tag-topic-fg: #22d3ee;
+        --tag-question-fg: #60a5fa;
+        --tag-beginner-fg: #34d399;
+        --tag-intermediate-fg: #fbbf24;
+        --tag-advanced-fg: #f87171;
+        --tag-domain-fg: #c084fc;
+        --tag-general-fg: #cbd5e1;
+      }
+    }
+
+    /* explicit dark choice — must also win when the OS is light */
+    :root[data-theme="dark"] {
+      --bg: #0b0f19;
+      --panel-bg: rgba(15, 23, 42, 0.90);
+      --panel-border: #334155;
+      --panel-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.65), 0 0 18px rgba(6, 182, 212, 0.12);
+      --text-strong: #f8fafc;
+      --text-body: #e2e8f0;
+      --text-muted: #94a3b8;
+      --text-dim: #94a3b8;
+      --text-legend: #cbd5e1;
+      --accent: #06b6d4;
+      --accent-fg: #22d3ee;
+      --accent-soft-bg: rgba(6, 182, 212, 0.12);
+      --accent-soft-border: rgba(6, 182, 212, 0.3);
+      --accent-hover-bg: rgba(6, 182, 212, 0.2);
+      --accent-ring: rgba(6, 182, 212, 0.2);
+      --input-bg: rgba(30, 41, 59, 0.8);
+      --input-border: #334155;
+      --result-bg: rgba(30, 41, 59, 0.6);
+      --divider: rgba(51, 65, 85, 0.5);
+      --btn-bg: #0284c7;
+      --btn-bg-hover: #0369a1;
+      --btn-fg: #ffffff;
+      --ghost-hover-bg: #1e293b;
+      --tag-alpha: 0.15;
+      --tag-topic-fg: #22d3ee;
+      --tag-question-fg: #60a5fa;
+      --tag-beginner-fg: #34d399;
+      --tag-intermediate-fg: #fbbf24;
+      --tag-advanced-fg: #f87171;
+      --tag-domain-fg: #c084fc;
+      --tag-general-fg: #cbd5e1;
+    }
+
     * {
       box-sizing: border-box;
     }
     body {
       margin: 0;
       padding: 0;
-      background-color: #0b0f19;
-      color: #e2e8f0;
+      background-color: var(--bg);
+      color: var(--text-body);
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       overflow: hidden;
       -webkit-text-size-adjust: 100%;
@@ -27,13 +157,20 @@
       top: 20px;
       left: 20px;
       z-index: 20;
-      background: rgba(15, 23, 42, 0.88);
+      background: var(--panel-bg);
       padding: 18px 22px;
       border-radius: 12px;
-      border: 1px solid #1e293b;
+      border: 1px solid var(--panel-border);
       backdrop-filter: blur(12px);
       max-width: 380px;
-      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(6, 182, 212, 0.15);
+      box-shadow: var(--panel-shadow);
+    }
+    .header-top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 10px;
+      margin-bottom: 8px;
     }
     .badge {
       display: inline-flex;
@@ -41,28 +178,27 @@
       gap: 6px;
       padding: 3px 8px;
       border-radius: 6px;
-      background: rgba(6, 182, 212, 0.12);
-      color: #22d3ee;
+      background: var(--accent-soft-bg);
+      color: var(--accent-fg);
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.72rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 8px;
-      border: 1px solid rgba(6, 182, 212, 0.3);
+      border: 1px solid var(--accent-soft-border);
     }
     .badge-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background: #22d3ee;
-      box-shadow: 0 0 8px #22d3ee;
+      background: var(--accent);
+      box-shadow: 0 0 8px var(--accent);
     }
     h1 {
       margin: 0 0 8px 0;
       font-size: 1.25rem;
       font-weight: 700;
-      color: #f8fafc;
+      color: var(--text-strong);
       letter-spacing: -0.3px;
       display: flex;
       align-items: center;
@@ -71,10 +207,50 @@
     p {
       margin: 0 0 12px 0;
       font-size: 0.84rem;
-      color: #94a3b8;
+      color: var(--text-muted);
       line-height: 1.45;
     }
 
+    /* Theme switcher (segmented radiogroup: light / dark / system) */
+    #theme-switch {
+      display: flex;
+      gap: 2px;
+      padding: 2px;
+      border-radius: 8px;
+      background: var(--result-bg);
+      border: 1px solid var(--input-border);
+      flex-shrink: 0;
+    }
+    .theme-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 26px;
+      padding: 0;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      line-height: 1;
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+    .theme-btn:hover {
+      background: var(--accent-hover-bg);
+      color: var(--text-strong);
+    }
+    .theme-btn[aria-checked="true"] {
+      background: var(--accent-soft-bg);
+      color: var(--accent-fg);
+      box-shadow: inset 0 0 0 1px var(--accent-soft-border);
+    }
+    .theme-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 1px;
+    }
+
     /* Search Bar */
     .search-box {
       position: relative;
@@ -83,25 +259,28 @@
     .search-box input {
       width: 100%;
       padding: 8px 12px 8px 34px;
-      background: rgba(30, 41, 59, 0.8);
-      border: 1px solid #334155;
+      background: var(--input-bg);
+      border: 1px solid var(--input-border);
       border-radius: 8px;
-      color: #f8fafc;
+      color: var(--text-strong);
       font-family: 'Inter', sans-serif;
       font-size: 0.82rem;
       outline: none;
       transition: all 0.2s ease;
     }
+    .search-box input::placeholder {
+      color: var(--text-dim);
+    }
     .search-box input:focus {
-      border-color: #06b6d4;
-      box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px var(--accent-ring);
     }
     .search-icon {
       position: absolute;
       left: 10px;
       top: 50%;
       transform: translateY(-50%);
-      color: #64748b;
+      color: var(--text-dim);
       font-size: 0.85rem;
     }
 
@@ -127,9 +306,9 @@
     #search-results button {
       width: 100%;
       text-align: left;
-      background: rgba(30, 41, 59, 0.6);
-      border: 1px solid #334155;
-      color: #e2e8f0;
+      background: var(--result-bg);
+      border: 1px solid var(--input-border);
+      color: var(--text-body);
       padding: 6px 10px;
       margin-bottom: 3px;
       border-radius: 6px;
@@ -139,11 +318,11 @@
       transition: all 0.15s ease;
     }
     #search-results button:hover {
-      background: rgba(6, 182, 212, 0.2);
-      border-color: #06b6d4;
+      background: var(--accent-hover-bg);
+      border-color: var(--accent);
     }
     #search-results button:focus {
-      outline: 2px solid #06b6d4;
+      outline: 2px solid var(--accent);
       outline-offset: -1px;
     }
 
@@ -154,13 +333,13 @@
       font-size: 0.78rem;
       flex-wrap: wrap;
       padding-top: 8px;
-      border-top: 1px solid rgba(51, 65, 85, 0.5);
+      border-top: 1px solid var(--divider);
     }
     .legend-item {
       display: flex;
       align-items: center;
       gap: 6px;
-      color: #cbd5e1;
+      color: var(--text-legend);
     }
     .dot {
       width: 9px;
@@ -177,8 +356,8 @@
       padding-top: 8px;
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.75rem;
-      color: #64748b;
-      border-top: 1px dashed rgba(51, 65, 85, 0.5);
+      color: var(--text-dim);
+      border-top: 1px dashed var(--divider);
     }
 
     #graph {
@@ -188,19 +367,73 @@
       height: 100dvh;
     }
 
-    /* Floating Inspector Card */
-    #info-card {
+    /* ---------------------------------------------------------------
+       Bottom-right stack: inspector card above the zoom controls.
+       Both used to want the same corner, so they are flex siblings in
+       one positioned wrapper — flow guarantees they cannot overlap.
+       The wrapper is pointer-transparent so its empty area (the gap and
+       the strip beside the buttons) still rotates the graph.
+       --------------------------------------------------------------- */
+    #bottom-right {
       position: absolute;
       bottom: 24px;
       right: 24px;
       z-index: 20;
-      background: rgba(15, 23, 42, 0.92);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 12px;
+      pointer-events: none;
+    }
+    #bottom-right > * {
+      pointer-events: auto;
+    }
+
+    /* Zoom controls */
+    #zoom-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex-shrink: 0;
+    }
+    .zoom-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* 44px meets the iOS touch target and WCAG 2.2 (2.5.8) minimum. */
+      width: 44px;
+      height: 44px;
+      padding: 0;
+      border-radius: 10px;
+      border: 1px solid var(--panel-border);
+      background: var(--panel-bg);
+      color: var(--text-strong);
+      backdrop-filter: blur(12px);
+      box-shadow: var(--panel-shadow);
+      font-size: 1.35rem;
+      font-weight: 500;
+      line-height: 1;
+      cursor: pointer;
+      transition: background 0.15s ease, border-color 0.15s ease;
+    }
+    .zoom-btn:hover {
+      background: var(--accent-hover-bg);
+      border-color: var(--accent);
+    }
+    .zoom-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    /* Floating Inspector Card */
+    #info-card {
+      background: var(--panel-bg);
       padding: 18px 22px;
       border-radius: 14px;
-      border: 1px solid #334155;
+      border: 1px solid var(--panel-border);
       display: none;
       width: 360px;
-      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(6, 182, 212, 0.1);
+      box-shadow: var(--panel-shadow);
       backdrop-filter: blur(12px);
       animation: slideUp 0.25s ease-out;
     }
@@ -213,6 +446,8 @@
       gap: 6px;
       margin-bottom: 10px;
     }
+    /* Tag colours are driven by data attributes rather than inline styles
+       so each theme can set its own accessible foreground. */
     .card-tag {
       padding: 2px 8px;
       border-radius: 4px;
@@ -220,17 +455,31 @@
       font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
+      color: var(--tag-general-fg);
+      /* Fallback first for engines without color-mix (pre-2023). */
+      background: var(--result-bg);
+      /* Tint derives from the variant's own colour, so each data-attribute
+         below only needs to set `color`. */
+      background: color-mix(in srgb, currentColor calc(var(--tag-alpha) * 100%), transparent);
     }
+    .card-tag[data-kind="topic"] { color: var(--tag-topic-fg); }
+    .card-tag[data-kind="question"] { color: var(--tag-question-fg); }
+    .card-tag[data-level="beginner"] { color: var(--tag-beginner-fg); }
+    .card-tag[data-level="intermediate"] { color: var(--tag-intermediate-fg); }
+    .card-tag[data-level="advanced"] { color: var(--tag-advanced-fg); }
+    .card-tag[data-level="domain"] { color: var(--tag-domain-fg); }
+    .card-tag[data-level="general"] { color: var(--tag-general-fg); }
+
     #info-card h3 {
       margin: 0 0 8px 0;
       font-size: 1.05rem;
       font-weight: 600;
-      color: #f8fafc;
+      color: var(--text-strong);
       line-height: 1.35;
     }
     #info-card p {
       margin: 0 0 14px 0;
-      color: #cbd5e1;
+      color: var(--text-legend);
       font-size: 0.82rem;
       line-height: 1.45;
     }
@@ -242,32 +491,36 @@
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      background: #0284c7;
-      color: #ffffff;
+      background: var(--btn-bg);
+      color: var(--btn-fg);
       padding: 8px 14px;
       border-radius: 8px;
       text-decoration: none;
       font-size: 0.8rem;
       font-weight: 600;
       transition: all 0.2s ease;
-      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
+      box-shadow: 0 4px 12px var(--accent-ring);
     }
     #card-link:hover {
-      background: #0369a1;
+      background: var(--btn-bg-hover);
       transform: translateY(-1px);
     }
+    #card-link:focus-visible, .close-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
     .close-btn {
       background: transparent;
-      border: 1px solid #334155;
-      color: #94a3b8;
+      border: 1px solid var(--input-border);
+      color: var(--text-muted);
       border-radius: 8px;
       padding: 8px 12px;
       cursor: pointer;
       font-size: 0.8rem;
     }
     .close-btn:hover {
-      background: #1e293b;
-      color: #f1f5f9;
+      background: var(--ghost-hover-bg);
+      color: var(--text-strong);
     }
 
     /* ---------------------------------------------------------------
@@ -313,12 +566,17 @@
         font-size: 0.85rem;
       }
 
-      #info-card {
+      #bottom-right {
         bottom: 10px;
         left: 10px;
         right: 10px;
-        width: auto;
         max-height: 45dvh;
+      }
+      #info-card {
+        width: 100%;
+        /* min-height:0 lets this flex child actually shrink and scroll
+           instead of pushing the zoom buttons off-screen. */
+        min-height: 0;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain;
@@ -345,9 +603,11 @@
       #header > p, .legend, .stats-bar {
         display: none;
       }
-      #info-card {
-        max-height: 60dvh;
+      #bottom-right {
+        max-height: 62dvh;
         left: auto;
+      }
+      #info-card {
         width: 320px;
       }
     }
@@ -373,7 +633,17 @@
 </head>
 <body>
   <div id="header">
-    <div class="badge"><span class="badge-dot"></span> Live Telemetry Topology</div>
+    <div class="header-top">
+      <div class="badge"><span class="badge-dot"></span> Live Telemetry Topology</div>
+      <div id="theme-switch" role="radiogroup" aria-label="Colour theme">
+        <button type="button" class="theme-btn" role="radio" aria-checked="false"
+                data-theme-choice="light" aria-label="Light theme" title="Light theme">☀</button>
+        <button type="button" class="theme-btn" role="radio" aria-checked="false"
+                data-theme-choice="dark" aria-label="Dark theme" title="Dark theme">☾</button>
+        <button type="button" class="theme-btn" role="radio" aria-checked="false"
+                data-theme-choice="system" aria-label="Match system theme" title="Match system theme">◐</button>
+      </div>
+    </div>
     <h1>⚡ DevOps Knowledge Graph</h1>
     <p>Interactive 3D infrastructure map linking 500+ DevOps interview questions, platform topics, and architecture wikilinks.</p>
     
@@ -400,16 +670,23 @@ <h1>⚡ DevOps Knowledge Graph</h1>
     </div>
   </div>
 
-  <div id="info-card">
-    <div class="card-meta">
-      <span id="card-type" class="card-tag" style="background: rgba(6,182,212,0.2); color:#22d3ee">QUESTION</span>
-      <span id="card-difficulty" class="card-tag" style="background: rgba(16,185,129,0.2); color:#34d399">BEGINNER</span>
+  <div id="bottom-right">
+    <div id="info-card">
+      <div class="card-meta">
+        <span id="card-type" class="card-tag" data-kind="question">QUESTION</span>
+        <span id="card-difficulty" class="card-tag" data-level="beginner">BEGINNER</span>
+      </div>
+      <h3 id="card-title">Node Info</h3>
+      <p id="card-desc"></p>
+      <div class="card-actions">
+        <a id="card-link" href="#" target="_blank" rel="noopener">View Markdown Source ↗</a>
+        <button type="button" class="close-btn" id="card-dismiss">Dismiss</button>
+      </div>
     </div>
-    <h3 id="card-title">Node Info</h3>
-    <p id="card-desc"></p>
-    <div class="card-actions">
-      <a id="card-link" href="#" target="_blank">View Markdown Source ↗</a>
-      <button class="close-btn" onclick="document.getElementById('info-card').style.display='none'">Dismiss</button>
+
+    <div id="zoom-controls" role="group" aria-label="Zoom controls">
+      <button type="button" class="zoom-btn" id="zoom-in" aria-label="Zoom in">+</button>
+      <button type="button" class="zoom-btn" id="zoom-out" aria-label="Zoom out">−</button>
     </div>
   </div>
 
@@ -31040,27 +31317,19 @@ <h3 id="card-title">Node Info</h3>
         2000
       );
 
+      // Tag colours come from theme tokens keyed off these data attributes,
+      // so both light and dark get an accessible foreground automatically.
       if (node.type === 'topic') {
         cardType.innerText = 'TOPIC HUB';
-        cardType.style.background = 'rgba(6, 182, 212, 0.25)';
-        cardType.style.color = '#22d3ee';
+        cardType.dataset.kind = 'topic';
         cardDifficulty.innerText = node.section || 'DOMAIN';
-        cardDifficulty.style.background = 'rgba(139, 92, 246, 0.25)';
-        cardDifficulty.style.color = '#c084fc';
+        cardDifficulty.dataset.level = 'domain';
       } else {
         cardType.innerText = 'QUESTION';
-        cardType.style.background = 'rgba(59, 130, 246, 0.25)';
-        cardType.style.color = '#60a5fa';
+        cardType.dataset.kind = 'question';
         cardDifficulty.innerText = (node.difficulty || 'GENERAL').toUpperCase();
-
-        const diffColors = {
-          'Beginner': { bg: 'rgba(16,185,129,0.25)', fg: '#34d399' },
-          'Intermediate': { bg: 'rgba(245,158,11,0.25)', fg: '#fbbf24' },
-          'Advanced': { bg: 'rgba(239,68,68,0.25)', fg: '#f87171' }
-        };
-        const colors = diffColors[node.difficulty] || { bg: 'rgba(148,163,184,0.25)', fg: '#cbd5e1' };
-        cardDifficulty.style.background = colors.bg;
-        cardDifficulty.style.color = colors.fg;
+        const levels = { Beginner: 'beginner', Intermediate: 'intermediate', Advanced: 'advanced' };
+        cardDifficulty.dataset.level = levels[node.difficulty] || 'general';
       }
 
       cardTitle.innerText = node.label;
@@ -31070,6 +31339,30 @@ <h3 id="card-title">Node Info</h3>
       card.focus();
     }
 
+    // The WebGL scene cannot read CSS variables, so the graph keeps its own
+    // parallel palette. Light needs more link opacity because the data-supplied
+    // link tints were picked against a near-black background.
+    const GRAPH_THEME = {
+      dark: {
+        bg: '#0b0f19',
+        link: 'rgba(148, 163, 184, 0.25)',
+        linkOpacity: 0.35,
+        dim: 'rgba(51, 65, 85, 0.30)',
+        hit: '#38bdf8'
+      },
+      light: {
+        bg: '#eef2f7',
+        link: 'rgba(51, 65, 85, 0.45)',
+        // Only slightly above dark: with 3.3k edges, a heavier value turns the
+        // whole field into a blue mesh and the nodes stop reading.
+        linkOpacity: 0.4,
+        dim: 'rgba(148, 163, 184, 0.55)',
+        hit: '#0369a1'
+      }
+    };
+
+    let graphTheme = GRAPH_THEME[document.documentElement.getAttribute('data-theme')] || GRAPH_THEME.dark;
+
     const Graph = ForceGraph3D()
       (document.getElementById('graph'))
         .graphData(gData)
@@ -31078,9 +31371,10 @@ <h3 id="card-title">Node Info</h3>
         .nodeColor('color')
         .nodeLabel('label')
         .nodeResolution(16)
-        .linkOpacity(0.35)
+        .backgroundColor(graphTheme.bg)
+        .linkOpacity(graphTheme.linkOpacity)
         .linkWidth(link => link.type === 'topic-link' ? 1.8 : 0.8)
-        .linkColor(link => link.color || 'rgba(148, 163, 184, 0.25)')
+        .linkColor(link => link.color || graphTheme.link)
         .linkDirectionalParticles(link => link.type === 'cross-link' ? 3 : 0)
         .linkDirectionalParticleWidth(2.0)
         .linkDirectionalParticleSpeed(0.006)
@@ -31089,6 +31383,83 @@ <h3 id="card-title">Node Info</h3>
         })
         .onNodeClick(handleNodeActivation);
 
+    document.getElementById('card-dismiss').addEventListener('click', () => {
+      card.style.display = 'none';
+    });
+
+    /* ----------------------------- Theme ----------------------------- */
+    const THEME_KEY = 'devops-graph-theme';
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
+    const themeButtons = Array.from(document.querySelectorAll('.theme-btn'));
+    let themeMode = document.documentElement.getAttribute('data-theme-mode') || 'system';
+
+    function applyTheme(mode, persist) {
+      themeMode = mode;
+      const effective = mode === 'system' ? (systemDark.matches ? 'dark' : 'light') : mode;
+
+      document.documentElement.setAttribute('data-theme-mode', mode);
+      document.documentElement.setAttribute('data-theme', effective);
+
+      if (persist) {
+        try { localStorage.setItem(THEME_KEY, mode); } catch (e) { /* private mode */ }
+      }
+
+      themeButtons.forEach(btn => {
+        const on = btn.dataset.themeChoice === mode;
+        btn.setAttribute('aria-checked', String(on));
+        // Only the selected radio stays in the tab order.
+        btn.tabIndex = on ? 0 : -1;
+      });
+
+      graphTheme = GRAPH_THEME[effective];
+      Graph.backgroundColor(graphTheme.bg);
+      Graph.linkOpacity(graphTheme.linkOpacity);
+      Graph.linkColor(link => link.color || graphTheme.link);
+      paintNodes();
+    }
+
+    themeButtons.forEach((btn, i) => {
+      btn.addEventListener('click', () => applyTheme(btn.dataset.themeChoice, true));
+      // Arrow-key navigation, as expected of a radiogroup.
+      btn.addEventListener('keydown', (evt) => {
+        const back = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
+        const fwd = evt.key === 'ArrowRight' || evt.key === 'ArrowDown';
+        if (!back && !fwd) return;
+        evt.preventDefault();
+        const next = themeButtons[(i + (fwd ? 1 : -1) + themeButtons.length) % themeButtons.length];
+        next.focus();
+        applyTheme(next.dataset.themeChoice, true);
+      });
+    });
+
+    // Follow the OS only while the user has chosen "system".
+    systemDark.addEventListener('change', () => {
+      if (themeMode === 'system') applyTheme('system', false);
+    });
+
+    /* ----------------------------- Zoom ----------------------------- */
+    // Scale the camera's distance from the origin. Clamped so a long press
+    // cannot bury the camera inside the cluster or lose the graph entirely.
+    const ZOOM_STEP = 1.35;
+    const MIN_DIST = 40;
+    const MAX_DIST = 4000;
+
+    function zoomByFactor(factor) {
+      const pos = Graph.cameraPosition();
+      const dist = Math.hypot(pos.x, pos.y, pos.z);
+      if (!dist) return;
+      const target = Math.min(MAX_DIST, Math.max(MIN_DIST, dist * factor));
+      const ratio = target / dist;
+      Graph.cameraPosition(
+        { x: pos.x * ratio, y: pos.y * ratio, z: pos.z * ratio },
+        undefined,
+        220
+      );
+    }
+
+    document.getElementById('zoom-in').addEventListener('click', () => zoomByFactor(1 / ZOOM_STEP));
+    document.getElementById('zoom-out').addEventListener('click', () => zoomByFactor(ZOOM_STEP));
+
     // Helper function to check if node matches query
     function nodeMatchesQuery(node, query) {
       const label = (node.label || '').toLowerCase();
@@ -31107,29 +31478,36 @@ <h3 id="card-title">Node Info</h3>
       return label.includes(query) || cat.includes(query) || sec.includes(query) || diff.includes(query) || tagsMatch;
     }
 
+    // Single owner of node colouring, so a theme switch mid-search repaints
+    // the highlight/dim colours instead of stranding the old palette.
+    let activeQuery = '';
+
+    function paintNodes() {
+      if (!activeQuery) {
+        Graph.nodeColor(node => node.color);
+        return;
+      }
+      Graph.nodeColor(node => nodeMatchesQuery(node, activeQuery) ? graphTheme.hit : graphTheme.dim);
+    }
+
     // Live search filter
     document.getElementById('search-input').addEventListener('input', (e) => {
-      const query = e.target.value.strip ? e.target.value.strip().toLowerCase() : e.target.value.toLowerCase().trim();
+      const query = e.target.value.toLowerCase().trim();
+      activeQuery = query;
       if (!query) {
-        Graph.nodeColor(node => node.color);
+        paintNodes();
         searchResults.classList.remove('visible');
-        searchResultsList.innerHTML = '';
+        searchResultsList.replaceChildren();
         return;
       }
 
       // Filter matching nodes
       const matchingNodes = gData.nodes.filter(node => nodeMatchesQuery(node, query));
 
-      // Update graph colors
-      Graph.nodeColor(node => {
-        if (nodeMatchesQuery(node, query)) {
-          return '#38bdf8'; // Highlight cyan
-        }
-        return 'rgba(51, 65, 85, 0.25)'; // Dim unmatched
-      });
+      paintNodes();
 
       // Populate accessible search results list
-      searchResultsList.innerHTML = '';
+      searchResultsList.replaceChildren();
       if (matchingNodes.length > 0) {
         matchingNodes.slice(0, 20).forEach(node => {
           const li = document.createElement('li');
@@ -31154,6 +31532,10 @@ <h3 id="card-title">Node Info</h3>
 
     // Physics Tuning
     Graph.d3Force('charge').strength(-130);
+
+    // Sync the switcher's checked state and the scene palette with the mode
+    // the pre-paint script already resolved. Not persisted: nothing changed yet.
+    applyTheme(themeMode, false);
   </script>
 </body>
 </html>
diff --git a/scripts/build_knowledge_graph.py b/scripts/build_knowledge_graph.py
index 63fe09e..eb685a4 100644
--- a/scripts/build_knowledge_graph.py
+++ b/scripts/build_knowledge_graph.py
@@ -181,18 +181,148 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DevOps & Cloud Engineering Knowledge Graph</title>
+
+  <!-- Resolve the theme before first paint so the page never flashes the
+       wrong palette. Must stay inline and ahead of the stylesheet. -->
+  <script>
+    (function () {{
+      var mode;
+      try {{ mode = localStorage.getItem('devops-graph-theme'); }} catch (e) {{ /* private mode */ }}
+      if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
+      var effective = mode === 'system'
+        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        : mode;
+      var root = document.documentElement;
+      root.setAttribute('data-theme-mode', mode);
+      root.setAttribute('data-theme', effective);
+    }})();
+  </script>
+
   <script src="https://unpkg.com/3d-force-graph@1.73.3/dist/3d-force-graph.min.js" integrity="sha384-SIcVySj+Cd1g+cwoLNCdr/osXU15HLXCxfaSzFNkZICYeKS7I2YxhyggCijT8JHA" crossorigin="anonymous"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');
 
+    /* ---------------------------------------------------------------
+       Theme tokens. Light is the bare :root default; dark is layered on
+       twice so both the "system" default and an explicit toggle win:
+         - @media (prefers-color-scheme: dark) for mode=system
+         - [data-theme="dark"] for an explicit choice
+       Every colour below is a token so the toggle needs no JS per rule.
+       --------------------------------------------------------------- */
+    :root {{
+      --bg: #eef2f7;
+      --panel-bg: rgba(255, 255, 255, 0.92);
+      --panel-border: #cbd5e1;
+      --panel-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.18), 0 0 15px rgba(8, 145, 178, 0.10);
+      --text-strong: #0f172a;
+      --text-body: #1e293b;
+      --text-muted: #475569;
+      --text-dim: #475569;
+      --text-legend: #334155;
+      --accent: #0891b2;
+      --accent-fg: #0e7490;
+      --accent-soft-bg: rgba(8, 145, 178, 0.12);
+      --accent-soft-border: rgba(8, 145, 178, 0.35);
+      --accent-hover-bg: rgba(8, 145, 178, 0.14);
+      --accent-ring: rgba(8, 145, 178, 0.25);
+      --input-bg: #ffffff;
+      --input-border: #cbd5e1;
+      --result-bg: #f8fafc;
+      --divider: rgba(100, 116, 139, 0.35);
+      --btn-bg: #0369a1;
+      --btn-bg-hover: #075985;
+      --btn-fg: #ffffff;
+      --ghost-hover-bg: #e2e8f0;
+      --tag-alpha: 0.10;
+      --tag-topic-fg: #0e7490;
+      --tag-question-fg: #1d4ed8;
+      --tag-beginner-fg: #047857;
+      --tag-intermediate-fg: #92400e;
+      --tag-advanced-fg: #b91c1c;
+      --tag-domain-fg: #6d28d9;
+      --tag-general-fg: #475569;
+    }}
+
+    /* mode=system, OS is dark */
+    @media (prefers-color-scheme: dark) {{
+      :root:not([data-theme="light"]) {{
+        --bg: #0b0f19;
+        --panel-bg: rgba(15, 23, 42, 0.90);
+        --panel-border: #334155;
+        --panel-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.65), 0 0 18px rgba(6, 182, 212, 0.12);
+        --text-strong: #f8fafc;
+        --text-body: #e2e8f0;
+        --text-muted: #94a3b8;
+        --text-dim: #94a3b8;
+        --text-legend: #cbd5e1;
+        --accent: #06b6d4;
+        --accent-fg: #22d3ee;
+        --accent-soft-bg: rgba(6, 182, 212, 0.12);
+        --accent-soft-border: rgba(6, 182, 212, 0.3);
+        --accent-hover-bg: rgba(6, 182, 212, 0.2);
+        --accent-ring: rgba(6, 182, 212, 0.2);
+        --input-bg: rgba(30, 41, 59, 0.8);
+        --input-border: #334155;
+        --result-bg: rgba(30, 41, 59, 0.6);
+        --divider: rgba(51, 65, 85, 0.5);
+        --btn-bg: #0284c7;
+        --btn-bg-hover: #0369a1;
+        --btn-fg: #ffffff;
+        --ghost-hover-bg: #1e293b;
+        --tag-alpha: 0.15;
+        --tag-topic-fg: #22d3ee;
+        --tag-question-fg: #60a5fa;
+        --tag-beginner-fg: #34d399;
+        --tag-intermediate-fg: #fbbf24;
+        --tag-advanced-fg: #f87171;
+        --tag-domain-fg: #c084fc;
+        --tag-general-fg: #cbd5e1;
+      }}
+    }}
+
+    /* explicit dark choice — must also win when the OS is light */
+    :root[data-theme="dark"] {{
+      --bg: #0b0f19;
+      --panel-bg: rgba(15, 23, 42, 0.90);
+      --panel-border: #334155;
+      --panel-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.65), 0 0 18px rgba(6, 182, 212, 0.12);
+      --text-strong: #f8fafc;
+      --text-body: #e2e8f0;
+      --text-muted: #94a3b8;
+      --text-dim: #94a3b8;
+      --text-legend: #cbd5e1;
+      --accent: #06b6d4;
+      --accent-fg: #22d3ee;
+      --accent-soft-bg: rgba(6, 182, 212, 0.12);
+      --accent-soft-border: rgba(6, 182, 212, 0.3);
+      --accent-hover-bg: rgba(6, 182, 212, 0.2);
+      --accent-ring: rgba(6, 182, 212, 0.2);
+      --input-bg: rgba(30, 41, 59, 0.8);
+      --input-border: #334155;
+      --result-bg: rgba(30, 41, 59, 0.6);
+      --divider: rgba(51, 65, 85, 0.5);
+      --btn-bg: #0284c7;
+      --btn-bg-hover: #0369a1;
+      --btn-fg: #ffffff;
+      --ghost-hover-bg: #1e293b;
+      --tag-alpha: 0.15;
+      --tag-topic-fg: #22d3ee;
+      --tag-question-fg: #60a5fa;
+      --tag-beginner-fg: #34d399;
+      --tag-intermediate-fg: #fbbf24;
+      --tag-advanced-fg: #f87171;
+      --tag-domain-fg: #c084fc;
+      --tag-general-fg: #cbd5e1;
+    }}
+
     * {{
       box-sizing: border-box;
     }}
     body {{
       margin: 0;
       padding: 0;
-      background-color: #0b0f19;
-      color: #e2e8f0;
+      background-color: var(--bg);
+      color: var(--text-body);
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       overflow: hidden;
       -webkit-text-size-adjust: 100%;
@@ -204,13 +334,20 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       top: 20px;
       left: 20px;
       z-index: 20;
-      background: rgba(15, 23, 42, 0.88);
+      background: var(--panel-bg);
       padding: 18px 22px;
       border-radius: 12px;
-      border: 1px solid #1e293b;
+      border: 1px solid var(--panel-border);
       backdrop-filter: blur(12px);
       max-width: 380px;
-      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(6, 182, 212, 0.15);
+      box-shadow: var(--panel-shadow);
+    }}
+    .header-top {{
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 10px;
+      margin-bottom: 8px;
     }}
     .badge {{
       display: inline-flex;
@@ -218,28 +355,27 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       gap: 6px;
       padding: 3px 8px;
       border-radius: 6px;
-      background: rgba(6, 182, 212, 0.12);
-      color: #22d3ee;
+      background: var(--accent-soft-bg);
+      color: var(--accent-fg);
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.72rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 8px;
-      border: 1px solid rgba(6, 182, 212, 0.3);
+      border: 1px solid var(--accent-soft-border);
     }}
     .badge-dot {{
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background: #22d3ee;
-      box-shadow: 0 0 8px #22d3ee;
+      background: var(--accent);
+      box-shadow: 0 0 8px var(--accent);
     }}
     h1 {{
       margin: 0 0 8px 0;
       font-size: 1.25rem;
       font-weight: 700;
-      color: #f8fafc;
+      color: var(--text-strong);
       letter-spacing: -0.3px;
       display: flex;
       align-items: center;
@@ -248,10 +384,50 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
     p {{
       margin: 0 0 12px 0;
       font-size: 0.84rem;
-      color: #94a3b8;
+      color: var(--text-muted);
       line-height: 1.45;
     }}
 
+    /* Theme switcher (segmented radiogroup: light / dark / system) */
+    #theme-switch {{
+      display: flex;
+      gap: 2px;
+      padding: 2px;
+      border-radius: 8px;
+      background: var(--result-bg);
+      border: 1px solid var(--input-border);
+      flex-shrink: 0;
+    }}
+    .theme-btn {{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 26px;
+      padding: 0;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      line-height: 1;
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+    }}
+    .theme-btn:hover {{
+      background: var(--accent-hover-bg);
+      color: var(--text-strong);
+    }}
+    .theme-btn[aria-checked="true"] {{
+      background: var(--accent-soft-bg);
+      color: var(--accent-fg);
+      box-shadow: inset 0 0 0 1px var(--accent-soft-border);
+    }}
+    .theme-btn:focus-visible {{
+      outline: 2px solid var(--accent);
+      outline-offset: 1px;
+    }}
+
     /* Search Bar */
     .search-box {{
       position: relative;
@@ -260,25 +436,28 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
     .search-box input {{
       width: 100%;
       padding: 8px 12px 8px 34px;
-      background: rgba(30, 41, 59, 0.8);
-      border: 1px solid #334155;
+      background: var(--input-bg);
+      border: 1px solid var(--input-border);
       border-radius: 8px;
-      color: #f8fafc;
+      color: var(--text-strong);
       font-family: 'Inter', sans-serif;
       font-size: 0.82rem;
       outline: none;
       transition: all 0.2s ease;
     }}
+    .search-box input::placeholder {{
+      color: var(--text-dim);
+    }}
     .search-box input:focus {{
-      border-color: #06b6d4;
-      box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px var(--accent-ring);
     }}
     .search-icon {{
       position: absolute;
       left: 10px;
       top: 50%;
       transform: translateY(-50%);
-      color: #64748b;
+      color: var(--text-dim);
       font-size: 0.85rem;
     }}
 
@@ -304,9 +483,9 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
     #search-results button {{
       width: 100%;
       text-align: left;
-      background: rgba(30, 41, 59, 0.6);
-      border: 1px solid #334155;
-      color: #e2e8f0;
+      background: var(--result-bg);
+      border: 1px solid var(--input-border);
+      color: var(--text-body);
       padding: 6px 10px;
       margin-bottom: 3px;
       border-radius: 6px;
@@ -316,11 +495,11 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       transition: all 0.15s ease;
     }}
     #search-results button:hover {{
-      background: rgba(6, 182, 212, 0.2);
-      border-color: #06b6d4;
+      background: var(--accent-hover-bg);
+      border-color: var(--accent);
     }}
     #search-results button:focus {{
-      outline: 2px solid #06b6d4;
+      outline: 2px solid var(--accent);
       outline-offset: -1px;
     }}
 
@@ -331,13 +510,13 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       font-size: 0.78rem;
       flex-wrap: wrap;
       padding-top: 8px;
-      border-top: 1px solid rgba(51, 65, 85, 0.5);
+      border-top: 1px solid var(--divider);
     }}
     .legend-item {{
       display: flex;
       align-items: center;
       gap: 6px;
-      color: #cbd5e1;
+      color: var(--text-legend);
     }}
     .dot {{
       width: 9px;
@@ -354,30 +533,82 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       padding-top: 8px;
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.75rem;
-      color: #64748b;
-      border-top: 1px dashed rgba(51, 65, 85, 0.5);
+      color: var(--text-dim);
+      border-top: 1px dashed var(--divider);
     }}
 
     #graph {{
       width: 100%;
       height: 100vh;
-      /* dvh tracks the collapsing mobile URL bar; vh above is the fallback. */
       height: 100dvh;
     }}
 
-    /* Floating Inspector Card */
-    #info-card {{
+    /* ---------------------------------------------------------------
+       Bottom-right stack: inspector card above the zoom controls.
+       Both used to want the same corner, so they are flex siblings in
+       one positioned wrapper — flow guarantees they cannot overlap.
+       The wrapper is pointer-transparent so its empty area (the gap and
+       the strip beside the buttons) still rotates the graph.
+       --------------------------------------------------------------- */
+    #bottom-right {{
       position: absolute;
       bottom: 24px;
       right: 24px;
       z-index: 20;
-      background: rgba(15, 23, 42, 0.92);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 12px;
+      pointer-events: none;
+    }}
+    #bottom-right > * {{
+      pointer-events: auto;
+    }}
+
+    /* Zoom controls */
+    #zoom-controls {{
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex-shrink: 0;
+    }}
+    .zoom-btn {{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      padding: 0;
+      border-radius: 10px;
+      border: 1px solid var(--panel-border);
+      background: var(--panel-bg);
+      color: var(--text-strong);
+      backdrop-filter: blur(12px);
+      box-shadow: var(--panel-shadow);
+      font-size: 1.35rem;
+      font-weight: 500;
+      line-height: 1;
+      cursor: pointer;
+      transition: background 0.15s ease, border-color 0.15s ease;
+    }}
+    .zoom-btn:hover {{
+      background: var(--accent-hover-bg);
+      border-color: var(--accent);
+    }}
+    .zoom-btn:focus-visible {{
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }}
+
+    /* Floating Inspector Card */
+    #info-card {{
+      background: var(--panel-bg);
       padding: 18px 22px;
       border-radius: 14px;
-      border: 1px solid #334155;
+      border: 1px solid var(--panel-border);
       display: none;
       width: 360px;
-      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(6, 182, 212, 0.1);
+      box-shadow: var(--panel-shadow);
       backdrop-filter: blur(12px);
       animation: slideUp 0.25s ease-out;
     }}
@@ -390,6 +621,8 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       gap: 6px;
       margin-bottom: 10px;
     }}
+    /* Tag colours are driven by data attributes rather than inline styles
+       so each theme can set its own accessible foreground. */
     .card-tag {{
       padding: 2px 8px;
       border-radius: 4px;
@@ -397,17 +630,28 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
+      color: var(--tag-general-fg);
+      background: var(--result-bg);
+      background: color-mix(in srgb, currentColor calc(var(--tag-alpha) * 100%), transparent);
     }}
+    .card-tag[data-kind="topic"] {{ color: var(--tag-topic-fg); }}
+    .card-tag[data-kind="question"] {{ color: var(--tag-question-fg); }}
+    .card-tag[data-level="beginner"] {{ color: var(--tag-beginner-fg); }}
+    .card-tag[data-level="intermediate"] {{ color: var(--tag-intermediate-fg); }}
+    .card-tag[data-level="advanced"] {{ color: var(--tag-advanced-fg); }}
+    .card-tag[data-level="domain"] {{ color: var(--tag-domain-fg); }}
+    .card-tag[data-level="general"] {{ color: var(--tag-general-fg); }}
+
     #info-card h3 {{
       margin: 0 0 8px 0;
       font-size: 1.05rem;
       font-weight: 600;
-      color: #f8fafc;
+      color: var(--text-strong);
       line-height: 1.35;
     }}
     #info-card p {{
       margin: 0 0 14px 0;
-      color: #cbd5e1;
+      color: var(--text-legend);
       font-size: 0.82rem;
       line-height: 1.45;
     }}
@@ -419,32 +663,36 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      background: #0284c7;
-      color: #ffffff;
+      background: var(--btn-bg);
+      color: var(--btn-fg);
       padding: 8px 14px;
       border-radius: 8px;
       text-decoration: none;
       font-size: 0.8rem;
       font-weight: 600;
       transition: all 0.2s ease;
-      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
+      box-shadow: 0 4px 12px var(--accent-ring);
     }}
     #card-link:hover {{
-      background: #0369a1;
+      background: var(--btn-bg-hover);
       transform: translateY(-1px);
     }}
+    #card-link:focus-visible, .close-btn:focus-visible {{
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }}
     .close-btn {{
       background: transparent;
-      border: 1px solid #334155;
-      color: #94a3b8;
+      border: 1px solid var(--input-border);
+      color: var(--text-muted);
       border-radius: 8px;
       padding: 8px 12px;
       cursor: pointer;
       font-size: 0.8rem;
     }}
     .close-btn:hover {{
-      background: #1e293b;
-      color: #f1f5f9;
+      background: var(--ghost-hover-bg);
+      color: var(--text-strong);
     }}
 
     /* ---------------------------------------------------------------
@@ -490,12 +738,15 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
         font-size: 0.85rem;
       }}
 
-      #info-card {{
+      #bottom-right {{
         bottom: 10px;
         left: 10px;
         right: 10px;
-        width: auto;
         max-height: 45dvh;
+      }}
+      #info-card {{
+        width: 100%;
+        min-height: 0;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain;
@@ -522,9 +773,11 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       #header > p, .legend, .stats-bar {{
         display: none;
       }}
-      #info-card {{
-        max-height: 60dvh;
+      #bottom-right {{
+        max-height: 62dvh;
         left: auto;
+      }}
+      #info-card {{
         width: 320px;
       }}
     }}
@@ -550,7 +803,17 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
 </head>
 <body>
   <div id="header">
-    <div class="badge"><span class="badge-dot"></span> Live Telemetry Topology</div>
+    <div class="header-top">
+      <div class="badge"><span class="badge-dot"></span> Live Telemetry Topology</div>
+      <div id="theme-switch" role="radiogroup" aria-label="Colour theme">
+        <button type="button" class="theme-btn" role="radio" aria-checked="false"
+                data-theme-choice="light" aria-label="Light theme" title="Light theme">☀</button>
+        <button type="button" class="theme-btn" role="radio" aria-checked="false"
+                data-theme-choice="dark" aria-label="Dark theme" title="Dark theme">☾</button>
+        <button type="button" class="theme-btn" role="radio" aria-checked="false"
+                data-theme-choice="system" aria-label="Match system theme" title="Match system theme">◐</button>
+      </div>
+    </div>
     <h1>⚡ DevOps Knowledge Graph</h1>
     <p>Interactive 3D infrastructure map linking 500+ DevOps interview questions, platform topics, and architecture wikilinks.</p>
     
@@ -577,16 +840,23 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
     </div>
   </div>
 
-  <div id="info-card">
-    <div class="card-meta">
-      <span id="card-type" class="card-tag" style="background: rgba(6,182,212,0.2); color:#22d3ee">QUESTION</span>
-      <span id="card-difficulty" class="card-tag" style="background: rgba(16,185,129,0.2); color:#34d399">BEGINNER</span>
+  <div id="bottom-right">
+    <div id="info-card">
+      <div class="card-meta">
+        <span id="card-type" class="card-tag" data-kind="question">QUESTION</span>
+        <span id="card-difficulty" class="card-tag" data-level="beginner">BEGINNER</span>
+      </div>
+      <h3 id="card-title">Node Info</h3>
+      <p id="card-desc"></p>
+      <div class="card-actions">
+        <a id="card-link" href="#" target="_blank" rel="noopener">View Markdown Source ↗</a>
+        <button type="button" class="close-btn" id="card-dismiss">Dismiss</button>
+      </div>
     </div>
-    <h3 id="card-title">Node Info</h3>
-    <p id="card-desc"></p>
-    <div class="card-actions">
-      <a id="card-link" href="#" target="_blank">View Markdown Source ↗</a>
-      <button class="close-btn" onclick="document.getElementById('info-card').style.display='none'">Dismiss</button>
+
+    <div id="zoom-controls" role="group" aria-label="Zoom controls">
+      <button type="button" class="zoom-btn" id="zoom-in" aria-label="Zoom in">+</button>
+      <button type="button" class="zoom-btn" id="zoom-out" aria-label="Zoom out">−</button>
     </div>
   </div>
 
@@ -619,27 +889,19 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
         2000
       );
 
+      // Tag colours come from theme tokens keyed off these data attributes,
+      // so both light and dark get an accessible foreground automatically.
       if (node.type === 'topic') {{
         cardType.innerText = 'TOPIC HUB';
-        cardType.style.background = 'rgba(6, 182, 212, 0.25)';
-        cardType.style.color = '#22d3ee';
+        cardType.dataset.kind = 'topic';
         cardDifficulty.innerText = node.section || 'DOMAIN';
-        cardDifficulty.style.background = 'rgba(139, 92, 246, 0.25)';
-        cardDifficulty.style.color = '#c084fc';
+        cardDifficulty.dataset.level = 'domain';
       }} else {{
         cardType.innerText = 'QUESTION';
-        cardType.style.background = 'rgba(59, 130, 246, 0.25)';
-        cardType.style.color = '#60a5fa';
+        cardType.dataset.kind = 'question';
         cardDifficulty.innerText = (node.difficulty || 'GENERAL').toUpperCase();
-
-        const diffColors = {{
-          'Beginner': {{ bg: 'rgba(16,185,129,0.25)', fg: '#34d399' }},
-          'Intermediate': {{ bg: 'rgba(245,158,11,0.25)', fg: '#fbbf24' }},
-          'Advanced': {{ bg: 'rgba(239,68,68,0.25)', fg: '#f87171' }}
-        }};
-        const colors = diffColors[node.difficulty] || {{ bg: 'rgba(148,163,184,0.25)', fg: '#cbd5e1' }};
-        cardDifficulty.style.background = colors.bg;
-        cardDifficulty.style.color = colors.fg;
+        const levels = {{ Beginner: 'beginner', Intermediate: 'intermediate', Advanced: 'advanced' }};
+        cardDifficulty.dataset.level = levels[node.difficulty] || 'general';
       }}
 
       cardTitle.innerText = node.label;
@@ -649,6 +911,28 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       card.focus();
     }}
 
+    // The WebGL scene cannot read CSS variables, so the graph keeps its own
+    // parallel palette. Light needs more link opacity because the data-supplied
+    // link tints were picked against a near-black background.
+    const GRAPH_THEME = {{
+      dark: {{
+        bg: '#0b0f19',
+        link: 'rgba(148, 163, 184, 0.25)',
+        linkOpacity: 0.35,
+        dim: 'rgba(51, 65, 85, 0.30)',
+        hit: '#38bdf8'
+      }},
+      light: {{
+        bg: '#eef2f7',
+        link: 'rgba(51, 65, 85, 0.45)',
+        linkOpacity: 0.4,
+        dim: 'rgba(148, 163, 184, 0.55)',
+        hit: '#0369a1'
+      }}
+    }};
+
+    let graphTheme = GRAPH_THEME[document.documentElement.getAttribute('data-theme')] || GRAPH_THEME.dark;
+
     const Graph = ForceGraph3D()
       (document.getElementById('graph'))
         .graphData(gData)
@@ -657,9 +941,10 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
         .nodeColor('color')
         .nodeLabel('label')
         .nodeResolution(16)
-        .linkOpacity(0.35)
+        .backgroundColor(graphTheme.bg)
+        .linkOpacity(graphTheme.linkOpacity)
         .linkWidth(link => link.type === 'topic-link' ? 1.8 : 0.8)
-        .linkColor(link => link.color || 'rgba(148, 163, 184, 0.25)')
+        .linkColor(link => link.color || graphTheme.link)
         .linkDirectionalParticles(link => link.type === 'cross-link' ? 3 : 0)
         .linkDirectionalParticleWidth(2.0)
         .linkDirectionalParticleSpeed(0.006)
@@ -668,6 +953,83 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
         }})
         .onNodeClick(handleNodeActivation);
 
+    document.getElementById('card-dismiss').addEventListener('click', () => {{
+      card.style.display = 'none';
+    }});
+
+    /* ----------------------------- Theme ----------------------------- */
+    const THEME_KEY = 'devops-graph-theme';
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
+    const themeButtons = Array.from(document.querySelectorAll('.theme-btn'));
+    let themeMode = document.documentElement.getAttribute('data-theme-mode') || 'system';
+
+    function applyTheme(mode, persist) {{
+      themeMode = mode;
+      const effective = mode === 'system' ? (systemDark.matches ? 'dark' : 'light') : mode;
+
+      document.documentElement.setAttribute('data-theme-mode', mode);
+      document.documentElement.setAttribute('data-theme', effective);
+
+      if (persist) {{
+        try {{ localStorage.setItem(THEME_KEY, mode); }} catch (e) {{ /* private mode */ }}
+      }}
+
+      themeButtons.forEach(btn => {{
+        const on = btn.dataset.themeChoice === mode;
+        btn.setAttribute('aria-checked', String(on));
+        // Only the selected radio stays in the tab order.
+        btn.tabIndex = on ? 0 : -1;
+      }});
+
+      graphTheme = GRAPH_THEME[effective];
+      Graph.backgroundColor(graphTheme.bg);
+      Graph.linkOpacity(graphTheme.linkOpacity);
+      Graph.linkColor(link => link.color || graphTheme.link);
+      paintNodes();
+    }}
+
+    themeButtons.forEach((btn, i) => {{
+      btn.addEventListener('click', () => applyTheme(btn.dataset.themeChoice, true));
+      // Arrow-key navigation, as expected of a radiogroup.
+      btn.addEventListener('keydown', (evt) => {{
+        const back = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
+        const fwd = evt.key === 'ArrowRight' || evt.key === 'ArrowDown';
+        if (!back && !fwd) return;
+        evt.preventDefault();
+        const next = themeButtons[(i + (fwd ? 1 : -1) + themeButtons.length) % themeButtons.length];
+        next.focus();
+        applyTheme(next.dataset.themeChoice, true);
+      }});
+    }});
+
+    // Follow the OS only while the user has chosen "system".
+    systemDark.addEventListener('change', () => {{
+      if (themeMode === 'system') applyTheme('system', false);
+    }});
+
+    /* ----------------------------- Zoom ----------------------------- */
+    // Scale the camera's distance from the origin. Clamped so a long press
+    // cannot bury the camera inside the cluster or lose the graph entirely.
+    const ZOOM_STEP = 1.35;
+    const MIN_DIST = 40;
+    const MAX_DIST = 4000;
+
+    function zoomByFactor(factor) {{
+      const pos = Graph.cameraPosition();
+      const dist = Math.hypot(pos.x, pos.y, pos.z);
+      if (!dist) return;
+      const target = Math.min(MAX_DIST, Math.max(MIN_DIST, dist * factor));
+      const ratio = target / dist;
+      Graph.cameraPosition(
+        {{ x: pos.x * ratio, y: pos.y * ratio, z: pos.z * ratio }},
+        undefined,
+        220
+      );
+    }}
+
+    document.getElementById('zoom-in').addEventListener('click', () => zoomByFactor(1 / ZOOM_STEP));
+    document.getElementById('zoom-out').addEventListener('click', () => zoomByFactor(ZOOM_STEP));
+
     // Helper function to check if node matches query
     function nodeMatchesQuery(node, query) {{
       const label = (node.label || '').toLowerCase();
@@ -686,29 +1048,36 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
       return label.includes(query) || cat.includes(query) || sec.includes(query) || diff.includes(query) || tagsMatch;
     }}
 
+    // Single owner of node colouring, so a theme switch mid-search repaints
+    // the highlight/dim colours instead of stranding the old palette.
+    let activeQuery = '';
+
+    function paintNodes() {{
+      if (!activeQuery) {{
+        Graph.nodeColor(node => node.color);
+        return;
+      }}
+      Graph.nodeColor(node => nodeMatchesQuery(node, activeQuery) ? graphTheme.hit : graphTheme.dim);
+    }}
+
     // Live search filter
     document.getElementById('search-input').addEventListener('input', (e) => {{
-      const query = e.target.value.strip ? e.target.value.strip().toLowerCase() : e.target.value.toLowerCase().trim();
+      const query = e.target.value.toLowerCase().trim();
+      activeQuery = query;
       if (!query) {{
-        Graph.nodeColor(node => node.color);
+        paintNodes();
         searchResults.classList.remove('visible');
-        searchResultsList.innerHTML = '';
+        searchResultsList.replaceChildren();
         return;
       }}
 
       // Filter matching nodes
       const matchingNodes = gData.nodes.filter(node => nodeMatchesQuery(node, query));
 
-      // Update graph colors
-      Graph.nodeColor(node => {{
-        if (nodeMatchesQuery(node, query)) {{
-          return '#38bdf8'; // Highlight cyan
-        }}
-        return 'rgba(51, 65, 85, 0.25)'; // Dim unmatched
-      }});
+      paintNodes();
 
       // Populate accessible search results list
-      searchResultsList.innerHTML = '';
+      searchResultsList.replaceChildren();
       if (matchingNodes.length > 0) {{
         matchingNodes.slice(0, 20).forEach(node => {{
           const li = document.createElement('li');
@@ -733,6 +1102,10 @@ def build_graph_data(repo_root: Path = REPO_ROOT) -> dict:
 
     // Physics Tuning
     Graph.d3Force('charge').strength(-130);
+
+    // Sync the switcher's checked state and the scene palette with the mode
+    // the pre-paint script already resolved. Not persisted: nothing changed yet.
+    applyTheme(themeMode, false);
   </script>
 </body>
 </html>

From 68c9998c11119c945c6825d2587a0396c4bee53a Mon Sep 17 00:00:00 2001
From: mchittineni <manideep.chittineni@hotmail.com>
Date: Tue, 11 Aug 2026 19:43:17 +0100
Subject: [PATCH 2/2] chore(docs): regenerate knowledge graph to match the
 template

---
 docs/index.html | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 40a32ac..24ed791 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -363,7 +363,6 @@
     #graph {
       width: 100%;
       height: 100vh;
-      /* dvh tracks the collapsing mobile URL bar; vh above is the fallback. */
       height: 100dvh;
     }
 
@@ -400,7 +399,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      /* 44px meets the iOS touch target and WCAG 2.2 (2.5.8) minimum. */
       width: 44px;
       height: 44px;
       padding: 0;
@@ -456,10 +454,7 @@
       font-weight: 600;
       text-transform: uppercase;
       color: var(--tag-general-fg);
-      /* Fallback first for engines without color-mix (pre-2023). */
       background: var(--result-bg);
-      /* Tint derives from the variant's own colour, so each data-attribute
-         below only needs to set `color`. */
       background: color-mix(in srgb, currentColor calc(var(--tag-alpha) * 100%), transparent);
     }
     .card-tag[data-kind="topic"] { color: var(--tag-topic-fg); }
@@ -574,8 +569,6 @@
       }
       #info-card {
         width: 100%;
-        /* min-height:0 lets this flex child actually shrink and scroll
-           instead of pushing the zoom buttons off-screen. */
         min-height: 0;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
@@ -31353,8 +31346,6 @@ <h3 id="card-title">Node Info</h3>
       light: {
         bg: '#eef2f7',
         link: 'rgba(51, 65, 85, 0.45)',
-        // Only slightly above dark: with 3.3k edges, a heavier value turns the
-        // whole field into a blue mesh and the nodes stop reading.
         linkOpacity: 0.4,
         dim: 'rgba(148, 163, 184, 0.55)',
         hit: '#0369a1'