Spaces:

nanotron
/

ultrascale-playbook

Running

App Files Files Community

119

tfrere commited on 2 days ago

Commit

e55fad0

1 Parent(s): 7e35f67

ui: add dark mode

Browse files

Files changed (10) hide show

assets/images/moon.svg +4 -0
assets/images/sun.svg +12 -0
dist/assets/images/memorycoalescing.png +2 -2
dist/assets/images/moon.svg +1 -0
dist/assets/images/sun.svg +1 -0
dist/index.html +0 -0
dist/main.bundle.js +187 -0
dist/main.bundle.js.map +0 -0
src/index.html +11 -6
src/index.js +225 -0

assets/images/moon.svg ADDED Viewed

assets/images/sun.svg ADDED Viewed

dist/assets/images/memorycoalescing.png CHANGED Viewed

Git LFS Details

SHA256: 088cd848100ab26abbffdcc7c0e8f18a83facd0a8637c460e3ac88d483b04b46
Pointer size: 130 Bytes
Size of remote file: 94.1 kB

Git LFS Details

SHA256: 1094fe9aeb953c743791445ee6d7e73a5a89fa85fe60f4312266d1265e7c591a
Pointer size: 130 Bytes
Size of remote file: 94.1 kB

dist/assets/images/moon.svg ADDED Viewed

dist/assets/images/sun.svg ADDED Viewed

dist/index.html CHANGED Viewed

The diff for this file is too large to render. See raw diff

dist/main.bundle.js CHANGED Viewed

@@ -5662,12 +5662,199 @@ function postMessageToHFSpaces(elementId) {
 }
 ;// ./src/index.js
 // import { plotClusters } from './clusters'
 document.addEventListener("DOMContentLoaded", function () {
   console.log("DOMContentLoaded");
   loadFragments();
   init_memory_plot();
   syncHFSpacesURLHash();

 }
 ;// ./src/index.js
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = src_unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function src_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return src_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? src_arrayLikeToArray(r, a) : void 0; } }
+function src_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 // import { plotClusters } from './clusters'
+// Dark mode is now handled manually via a CSS class on <html> and injected styles
 document.addEventListener("DOMContentLoaded", function () {
   console.log("DOMContentLoaded");
+  // Inject minimal styles for the theme toggle button
+  var styleEl = document.createElement('style');
+  styleEl.textContent = "\n    .theme-toggle-btn{position:absolute;top:16px;left:16px;z-index:10000;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,0.9);backdrop-filter:saturate(150%) blur(6px);cursor:pointer;border:1px solid transparent;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}\n    .theme-toggle-btn:hover{border-color:transparent;box-shadow:none}\n    .theme-toggle-btn:focus,.theme-toggle-btn:focus-visible{outline:none;border-color:transparent;box-shadow:none}\n    .theme-toggle-btn img{width:22px;height:22px;transition:filter .15s ease}\n    .theme-toggle-btn.dark img{filter: brightness(0) invert(1)}\n    @media (prefers-color-scheme: dark){.theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent;box-shadow:none}}\n    ";
+  document.head.appendChild(styleEl);
+  // Inject dark mode CSS (scoped via html.dark)
+  var darkCSS = "\n    html.dark{color-scheme:dark}\n    html.dark body{background:#242525;color:#e5e7eb}\n    html.dark a{color:#93c5fd}\n    html.dark .figure-legend{color:#9ca3af}\n    html.dark d-article,html.dark d-article *{color:white!important;}\n    html.dark d-contents{background:#242525}\n    html.dark d-contents nav a{color:#cbd5e1}\n    html.dark d-contents nav a:hover{text-decoration:underline solid rgba(255,255,255,0.6)}\n    html.dark .note-box{background:#111;border-left-color:#888}\n    html.dark .note-box-title{color:#d1d5db}\n    html.dark .note-box-content{color:#e5e7eb}\n    html.dark .large-image-background{background:#242525}\n    html.dark .boxed-image{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6)}\n    html.dark #graph-all,html.dark #controls,html.dark .memory-block,html.dark .activation-memory,html.dark .gradient-memory{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6);color:#e5e7eb}\n    html.dark label,html.dark .memory-title{color:#e5e7eb}\n    html.dark .memory-value{color:#93c5fd}\n    html.dark input,html.dark select,html.dark textarea{background:#0f0f0f;color:#e5e7eb;border:1px solid #333}\n    html.dark input:hover,html.dark select:hover,html.dark textarea:hover{border-color:#60a5fa}\n    html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.35)}\n    html.dark input[type=range]{background:#333}\n    html.dark input[type=range]::-webkit-slider-thumb{background:#3b82f6}\n    html.dark .plotly_caption{color:#9ca3af}\n    html.dark .theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent}\n    html.dark d-article img{background:white}\n    html.dark summary {color:black !important;}\n    html.dark .katex-container {color:white !important;}\n    html.dark d-code {background: white!important;}\n    /* Table borders in dark mode */\n    html.dark table{border-color:#262626}\n    html.dark th,html.dark td{border-color:#262626}\n    html.dark thead tr,html.dark tbody tr{border-color:#262626}\n    html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}\n    html.dark d-byline h3{color:white;}\n    html.dark d-math *, html.dark span.katex{color:white !important;}\n    html.dark d-appendix { color: white}\n    html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}\n    html.dark .l-body { background: white;}\n    \n    \n    ";
+  var darkStyleEl = document.createElement('style');
+  darkStyleEl.id = 'darkmode-css';
+  darkStyleEl.textContent = darkCSS;
+  document.head.appendChild(darkStyleEl);
+  // Inject equivalent dark CSS into all ShadowRoots using :host-context(.dark)
+  // This ensures styles also apply inside web components with Shadow DOM
+  var shadowDarkCSS = darkCSS.replace(/html\.dark/g, ':host-context(.dark)');
+  var injectDarkStylesIntoRoot = function injectDarkStylesIntoRoot(root) {
+    // Only target ShadowRoots here
+    if (!root || !(root instanceof ShadowRoot)) return;
+    if (root.querySelector('style#darkmode-css-shadow')) return;
+    var style = document.createElement('style');
+    style.id = 'darkmode-css-shadow';
+    style.textContent = shadowDarkCSS;
+    root.appendChild(style);
+  };
+  // Normalize inline SVGs: ensure viewBox and preserveAspectRatio for responsiveness
+  var normalizeSvgElement = function normalizeSvgElement(svgEl) {
+    try {
+      if (!svgEl || svgEl.hasAttribute('viewBox')) return;
+      var widthAttr = svgEl.getAttribute('width');
+      var heightAttr = svgEl.getAttribute('height');
+      if (!widthAttr || !heightAttr) return;
+      var width = parseFloat(widthAttr);
+      var height = parseFloat(heightAttr);
+      if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
+      svgEl.setAttribute('viewBox', "0 0 ".concat(width, " ").concat(height));
+      if (!svgEl.hasAttribute('preserveAspectRatio')) {
+        svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      }
+    } catch (_) {
+      // no-op
+    }
+  };
+  var processRootForSVGs = function processRootForSVGs(root) {
+    if (!root || typeof root.querySelectorAll !== 'function') return;
+    var svgs = root.querySelectorAll('svg:not([viewBox])');
+    svgs.forEach(function (svg) {
+      return normalizeSvgElement(svg);
+    });
+  };
+  var _scanNodeForShadowRoots = function scanNodeForShadowRoots(node) {
+    if (!node) return;
+    if (node.shadowRoot) {
+      injectDarkStylesIntoRoot(node.shadowRoot);
+      processRootForSVGs(node.shadowRoot);
+    }
+    // Traverse children
+    if (node.childNodes && node.childNodes.length) {
+      node.childNodes.forEach(function (child) {
+        // Process SVGs in this subtree as well
+        processRootForSVGs(child);
+        _scanNodeForShadowRoots(child);
+      });
+    }
+  };
+  // Intercept future shadow roots
+  var originalAttachShadow = Element.prototype.attachShadow;
+  Element.prototype.attachShadow = function (init) {
+    var shadow = originalAttachShadow.call(this, init);
+    try {
+      injectDarkStylesIntoRoot(shadow);
+      processRootForSVGs(shadow);
+    } catch (e) {}
+    return shadow;
+  };
+  // Initial sweep for any existing shadow roots
+  _scanNodeForShadowRoots(document.documentElement);
+  // Initial pass for regular DOM SVGs
+  processRootForSVGs(document);
+  // Observe DOM mutations to catch dynamically added components
+  var mo = new MutationObserver(function (mutations) {
+    var _iterator = _createForOfIteratorHelper(mutations),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var m = _step.value;
+        m.addedNodes && m.addedNodes.forEach(function (n) {
+          _scanNodeForShadowRoots(n);
+          processRootForSVGs(n);
+        });
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  mo.observe(document.documentElement, {
+    childList: true,
+    subtree: true
+  });
+  // Create the toggle button
+  var btn = document.createElement('button');
+  btn.className = 'theme-toggle-btn';
+  btn.setAttribute('type', 'button');
+  btn.setAttribute('aria-label', 'Basculer le mode sombre');
+  // Reuse icons declared in HTML and move them into the button
+  var sunIcon = document.getElementById('sunIcon');
+  var moonIcon = document.getElementById('moonIcon');
+  if (sunIcon && moonIcon) {
+    // Make sure they adopt button sizing
+    sunIcon.style.display = 'none';
+    sunIcon.style.width = '22px';
+    sunIcon.style.height = '22px';
+    moonIcon.style.display = 'none';
+    moonIcon.style.width = '22px';
+    moonIcon.style.height = '22px';
+    btn.appendChild(sunIcon);
+    btn.appendChild(moonIcon);
+  }
+  document.body.appendChild(btn);
+  var setIcon = function setIcon(enabled) {
+    // enabled = dark mode enabled -> show sun (to indicate turning off), hide moon
+    sunIcon.style.display = enabled ? '' : 'none';
+    moonIcon.style.display = enabled ? 'none' : '';
+    btn.setAttribute('title', enabled ? 'Désactiver le mode sombre' : 'Activer le mode sombre');
+    btn.setAttribute('aria-pressed', String(enabled));
+    btn.classList.toggle('dark', enabled);
+  };
+  var setDark = function setDark(enabled) {
+    document.documentElement.classList.toggle('dark', enabled);
+    setIcon(enabled);
+  };
+  var THEME_KEY = 'theme';
+  var savedTheme = null;
+  try {
+    savedTheme = localStorage.getItem(THEME_KEY);
+  } catch (e) {}
+  var media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+  var prefersDark = media ? media.matches : false;
+  // Initialisation: priorité à la préférence sauvegardée, sinon préférence système
+  if (savedTheme === 'dark') {
+    setDark(true);
+  } else if (savedTheme === 'light') {
+    setDark(false);
+  } else {
+    setDark(prefersDark);
+  }
+  // Si l'utilisateur a déjà choisi manuellement, on ne suit plus la préférence système
+  var manualOverride = savedTheme === 'dark' || savedTheme === 'light';
+  // React to system preference changes dynamically (no persistence)
+  if (media && typeof media.addEventListener === 'function') {
+    media.addEventListener('change', function (e) {
+      if (!manualOverride) {
+        setDark(e.matches);
+      }
+    });
+  } else if (media && typeof media.addListener === 'function') {
+    // Fallback for older browsers
+    media.addListener(function (e) {
+      if (!manualOverride) {
+        setDark(e.matches);
+      }
+    });
+  }
+  // Toggle handler — for réduire les glitches, attendre le next frame avant d'ajuster l'icône
+  btn.addEventListener('click', function () {
+    manualOverride = true;
+    var next = !document.documentElement.classList.contains('dark');
+    setDark(next);
+    try {
+      localStorage.setItem(THEME_KEY, next ? 'dark' : 'light');
+    } catch (e) {}
+  });
   loadFragments();
   init_memory_plot();
   syncHFSpacesURLHash();

dist/main.bundle.js.map CHANGED Viewed

The diff for this file is too large to render. See raw diff

src/index.html CHANGED Viewed

@@ -58,6 +58,9 @@
     </script>
     </d-front-matter>
     <d-title>
         <h1 class="l-page" style="text-align: center;">The Ultra-Scale Playbook:<br>Training LLMs on GPU Clusters</h1>
         <div id="title-plot" class="main-plot-container l-screen" style="overflow-x: hidden; width: 100%; text-align: center;">
             <div style="display: flex; justify-content: center; position: relative;">
@@ -65,12 +68,14 @@
             </div>
             <p style="text-align: cekter; font-style: italic; margin-top: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">We ran over 4,000 scaling experiments on up to 512 GPUs and measured throughput (size of markers) and GPU utilization (color of markers). Note that both are normalized per model size in this visualization.</p>
-            <div class="order-button-container">
-                <button class="order-button" style="margin: 0 8px;" onclick="window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')">Order Book</button>
-                <button class="order-button" style="margin: 0 8px;" onclick="window.open('https://huggingface.co/nanotron', '_blank')">Get PDF</button>
-            </div>
         </div>
     </d-title>
     <d-byline></d-byline>
       <d-article>
         <d-contents>
@@ -101,7 +106,7 @@
         <aside>Note that we're still missing pipeline parallelism in this widget. To be added as an exercise for the reader.</aside>
         <div class="large-image-background-transparent">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
                 <div id="graph-all">
                     <div class="figure-legend">Memory usage breakdown</div>
                 <div id="graph"></div>
@@ -837,7 +842,7 @@
                 frame.style.width = frame.contentWindow.document.documentElement.scrollWidth + 'px';
             });
         </script> -->
-        <!-- <p><img alt="dp_ourjourney_memoryusage.svg" src="/assets/images/dp_ourjourney_memoryusage.svg" /></p> -->
         <p>We've also seen that data parallelism starts to have some limiting communication overhead above a certain level of scaling. Do we have other options for these larger models or large batch sizes? We do have some solutions, thankfully - they involve either moving some tensors to the CPU or splitting the weights/gradients/optimizer states tensors across GPU devices.</p>

     </script>
     </d-front-matter>
     <d-title>
+        <!-- Theme toggle icons (declared once in DOM for clarity; visibility controlled via JS) -->
+        <img id="sunIcon" src="assets/images/sun.svg" alt="Sun icon" style="display:none;width:22px;height:22px;color:inherit"/>
+        <img id="moonIcon" src="assets/images/moon.svg" alt="Moon icon" style="display:none;width:22px;height:22px;color:inherit"/>
         <h1 class="l-page" style="text-align: center;">The Ultra-Scale Playbook:<br>Training LLMs on GPU Clusters</h1>
         <div id="title-plot" class="main-plot-container l-screen" style="overflow-x: hidden; width: 100%; text-align: center;">
             <div style="display: flex; justify-content: center; position: relative;">
             </div>
             <p style="text-align: cekter; font-style: italic; margin-top: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">We ran over 4,000 scaling experiments on up to 512 GPUs and measured throughput (size of markers) and GPU utilization (color of markers). Note that both are normalized per model size in this visualization.</p>
         </div>
     </d-title>
+    <div class="order-button-container">
+        <button class="order-button" style="margin: 0 8px;" onclick="window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')">Order Book</button>
+        <button class="order-button" style="margin: 0 8px;" onclick="window.open('https://huggingface.co/nanotron', '_blank')">Get PDF</button>
+    </div>
     <d-byline></d-byline>
       <d-article>
         <d-contents>
         <aside>Note that we're still missing pipeline parallelism in this widget. To be added as an exercise for the reader.</aside>
         <div class="large-image-background-transparent">
+            <div id="graph-container">
                 <div id="graph-all">
                     <div class="figure-legend">Memory usage breakdown</div>
                 <div id="graph"></div>
                 frame.style.width = frame.contentWindow.document.documentElement.scrollWidth + 'px';
             });
         </script> -->
+        <p><img alt="dp_ourjourney_memoryusage.svg" src="/assets/images/dp_ourjourney_memoryusage.svg" /></p>
         <p>We've also seen that data parallelism starts to have some limiting communication overhead above a certain level of scaling. Do we have other options for these larger models or large batch sizes? We do have some solutions, thankfully - they involve either moving some tensors to the CPU or splitting the weights/gradients/optimizer states tensors across GPU devices.</p>

src/index.js CHANGED Viewed

@@ -2,9 +2,234 @@
 import { init_memory_plot } from './memory'
 import { loadFragments } from './fragmentLoader'
 import { syncHFSpacesURLHash } from './syncHFSpacesURLHash'
 document.addEventListener("DOMContentLoaded", () => {
     console.log("DOMContentLoaded");
     loadFragments();
     init_memory_plot();
     syncHFSpacesURLHash();

 import { init_memory_plot } from './memory'
 import { loadFragments } from './fragmentLoader'
 import { syncHFSpacesURLHash } from './syncHFSpacesURLHash'
+// Dark mode is now handled manually via a CSS class on <html> and injected styles
 document.addEventListener("DOMContentLoaded", () => {
     console.log("DOMContentLoaded");
+    // Inject minimal styles for the theme toggle button
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `
+    .theme-toggle-btn{position:absolute;top:16px;left:16px;z-index:10000;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,0.9);backdrop-filter:saturate(150%) blur(6px);cursor:pointer;border:1px solid transparent;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
+    .theme-toggle-btn:hover{border-color:transparent;box-shadow:none}
+    .theme-toggle-btn:focus,.theme-toggle-btn:focus-visible{outline:none;border-color:transparent;box-shadow:none}
+    .theme-toggle-btn img{width:22px;height:22px;transition:filter .15s ease}
+    .theme-toggle-btn.dark img{filter: brightness(0) invert(1)}
+    @media (prefers-color-scheme: dark){.theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent;box-shadow:none}}
+    `;
+    document.head.appendChild(styleEl);
+    // Inject dark mode CSS (scoped via html.dark)
+    const darkCSS = `
+    html.dark{color-scheme:dark}
+    html.dark body{background:#242525;color:#e5e7eb}
+    html.dark a{color:#93c5fd}
+    html.dark .figure-legend{color:#9ca3af}
+    html.dark d-article,html.dark d-article *{color:white!important;}
+    html.dark d-contents{background:#242525}
+    html.dark d-contents nav a{color:#cbd5e1}
+    html.dark d-contents nav a:hover{text-decoration:underline solid rgba(255,255,255,0.6)}
+    html.dark .note-box{background:#111;border-left-color:#888}
+    html.dark .note-box-title{color:#d1d5db}
+    html.dark .note-box-content{color:#e5e7eb}
+    html.dark .large-image-background{background:#242525}
+    html.dark .boxed-image{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6)}
+    html.dark #graph-all,html.dark #controls,html.dark .memory-block,html.dark .activation-memory,html.dark .gradient-memory{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6);color:#e5e7eb}
+    html.dark label,html.dark .memory-title{color:#e5e7eb}
+    html.dark .memory-value{color:#93c5fd}
+    html.dark input,html.dark select,html.dark textarea{background:#0f0f0f;color:#e5e7eb;border:1px solid #333}
+    html.dark input:hover,html.dark select:hover,html.dark textarea:hover{border-color:#60a5fa}
+    html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.35)}
+    html.dark input[type=range]{background:#333}
+    html.dark input[type=range]::-webkit-slider-thumb{background:#3b82f6}
+    html.dark .plotly_caption{color:#9ca3af}
+    html.dark .theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent}
+    html.dark d-article img{background:white}
+    html.dark summary {color:black !important;}
+    html.dark .katex-container {color:white !important;}
+    html.dark d-code {background: white!important;}
+    /* Table borders in dark mode */
+    html.dark table{border-color:#262626}
+    html.dark th,html.dark td{border-color:#262626}
+    html.dark thead tr,html.dark tbody tr{border-color:#262626}
+    html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}
+    html.dark d-byline h3{color:white;}
+    html.dark d-math *, html.dark span.katex{color:white !important;}
+    html.dark d-appendix { color: white}
+    html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}
+    html.dark .l-body { background: white;}
+    `;
+    const darkStyleEl = document.createElement('style');
+    darkStyleEl.id = 'darkmode-css';
+    darkStyleEl.textContent = darkCSS;
+    document.head.appendChild(darkStyleEl);
+	// Inject equivalent dark CSS into all ShadowRoots using :host-context(.dark)
+	// This ensures styles also apply inside web components with Shadow DOM
+	const shadowDarkCSS = darkCSS.replace(/html\.dark/g, ':host-context(.dark)');
+	const injectDarkStylesIntoRoot = (root) => {
+		// Only target ShadowRoots here
+		if (!root || !(root instanceof ShadowRoot)) return;
+		if (root.querySelector('style#darkmode-css-shadow')) return;
+		const style = document.createElement('style');
+		style.id = 'darkmode-css-shadow';
+		style.textContent = shadowDarkCSS;
+		root.appendChild(style);
+	};
+	// Normalize inline SVGs: ensure viewBox and preserveAspectRatio for responsiveness
+	const normalizeSvgElement = (svgEl) => {
+		try {
+			if (!svgEl || svgEl.hasAttribute('viewBox')) return;
+			const widthAttr = svgEl.getAttribute('width');
+			const heightAttr = svgEl.getAttribute('height');
+			if (!widthAttr || !heightAttr) return;
+			const width = parseFloat(widthAttr);
+			const height = parseFloat(heightAttr);
+			if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
+			svgEl.setAttribute('viewBox', `0 0 ${width} ${height}`);
+			if (!svgEl.hasAttribute('preserveAspectRatio')) {
+				svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+			}
+		} catch (_) {
+			// no-op
+		}
+	};
+	const processRootForSVGs = (root) => {
+		if (!root || typeof root.querySelectorAll !== 'function') return;
+		const svgs = root.querySelectorAll('svg:not([viewBox])');
+		svgs.forEach((svg) => normalizeSvgElement(svg));
+	};
+	const scanNodeForShadowRoots = (node) => {
+		if (!node) return;
+		if (node.shadowRoot) {
+			injectDarkStylesIntoRoot(node.shadowRoot);
+			processRootForSVGs(node.shadowRoot);
+		}
+		// Traverse children
+		if (node.childNodes && node.childNodes.length) {
+			node.childNodes.forEach((child) => {
+				// Process SVGs in this subtree as well
+				processRootForSVGs(child);
+				scanNodeForShadowRoots(child);
+			});
+		}
+	};
+	// Intercept future shadow roots
+	const originalAttachShadow = Element.prototype.attachShadow;
+	Element.prototype.attachShadow = function(init) {
+		const shadow = originalAttachShadow.call(this, init);
+		try {
+			injectDarkStylesIntoRoot(shadow);
+			processRootForSVGs(shadow);
+		} catch (e) {}
+		return shadow;
+	};
+	// Initial sweep for any existing shadow roots
+	scanNodeForShadowRoots(document.documentElement);
+	// Initial pass for regular DOM SVGs
+	processRootForSVGs(document);
+	// Observe DOM mutations to catch dynamically added components
+	const mo = new MutationObserver((mutations) => {
+		for (const m of mutations) {
+			m.addedNodes && m.addedNodes.forEach((n) => {
+				scanNodeForShadowRoots(n);
+				processRootForSVGs(n);
+			});
+		}
+	});
+	mo.observe(document.documentElement, { childList: true, subtree: true });
+    // Create the toggle button
+    const btn = document.createElement('button');
+    btn.className = 'theme-toggle-btn';
+    btn.setAttribute('type', 'button');
+    btn.setAttribute('aria-label', 'Basculer le mode sombre');
+    // Reuse icons declared in HTML and move them into the button
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    if (sunIcon && moonIcon) {
+        // Make sure they adopt button sizing
+        sunIcon.style.display = 'none';
+        sunIcon.style.width = '22px';
+        sunIcon.style.height = '22px';
+        moonIcon.style.display = 'none';
+        moonIcon.style.width = '22px';
+        moonIcon.style.height = '22px';
+        btn.appendChild(sunIcon);
+        btn.appendChild(moonIcon);
+    }
+    document.body.appendChild(btn);
+    const setIcon = (enabled) => {
+        // enabled = dark mode enabled -> show sun (to indicate turning off), hide moon
+        sunIcon.style.display = enabled ? '' : 'none';
+        moonIcon.style.display = enabled ? 'none' : '';
+        btn.setAttribute('title', enabled ? 'Désactiver le mode sombre' : 'Activer le mode sombre');
+        btn.setAttribute('aria-pressed', String(enabled));
+        btn.classList.toggle('dark', enabled);
+    };
+    const setDark = (enabled) => {
+        document.documentElement.classList.toggle('dark', enabled);
+        setIcon(enabled);
+    };
+    const THEME_KEY = 'theme';
+    let savedTheme = null;
+    try {
+        savedTheme = localStorage.getItem(THEME_KEY);
+    } catch (e) {}
+    const media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+    const prefersDark = media ? media.matches : false;
+    // Initialisation: priorité à la préférence sauvegardée, sinon préférence système
+    if (savedTheme === 'dark') {
+        setDark(true);
+    } else if (savedTheme === 'light') {
+        setDark(false);
+    } else {
+        setDark(prefersDark);
+    }
+    // Si l'utilisateur a déjà choisi manuellement, on ne suit plus la préférence système
+    let manualOverride = savedTheme === 'dark' || savedTheme === 'light';
+    // React to system preference changes dynamically (no persistence)
+    if (media && typeof media.addEventListener === 'function') {
+        media.addEventListener('change', (e) => {
+            if (!manualOverride) {
+                setDark(e.matches);
+            }
+        });
+    } else if (media && typeof media.addListener === 'function') {
+        // Fallback for older browsers
+        media.addListener((e) => {
+            if (!manualOverride) {
+                setDark(e.matches);
+            }
+        });
+    }
+    // Toggle handler — for réduire les glitches, attendre le next frame avant d'ajuster l'icône
+    btn.addEventListener('click', () => {
+        manualOverride = true;
+        const next = !document.documentElement.classList.contains('dark');
+        setDark(next);
+        try {
+            localStorage.setItem(THEME_KEY, next ? 'dark' : 'light');
+        } catch (e) {}
+    });
     loadFragments();
     init_memory_plot();
     syncHFSpacesURLHash();