Theme-aware GitHub code embeds (light/dark)

ctrueden · claude · ctrueden · commit 8354a9c39795 · 2026-03-31T12:14:46.000-05:00
Replace the static emgithub &lt;script&gt; tag with a &lt;div data-src-base&gt; placeholder.
code.js injects the &lt;script&gt; at runtime with &amp;style=github or &amp;style=github-dark
based on the active theme, and a MutationObserver on data-theme re-renders
embeds whenever the user toggles light/dark mode.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/_includes/code b/_includes/code
@@ -6,7 +6,6 @@
 {%- assign line-start = include.line-start | default: "1" -%}
 {%- assign line-end = include.line-end | default: "99999" -%}
 {%- assign label = include.label -%}
-{%- assign style = include.style | default: "github" -%}
 {%- assign show-border = include.show-border | default: true -%}
 {%- assign show-line-numbers = include.show-line-numbers | default: true -%}
 {%- assign show-file-meta = include.show-file-meta | default: true -%}
@@ -41,14 +40,14 @@
 {%- capture content -%}
   {%- case service -%}
     {%- when "github" -%}
-      <script src="https://emgithub.com/embed.js?target=
-        {{- url | replace: "/", "%2F" | replace: "#", "%23" | replace: ":", "%3A" -}}
-        &style={{style}}
+      {%- assign embed-target = url | strip | replace: "/", "%2F" | replace: "#", "%23" | replace: ":", "%3A" -%}
+      {%- capture embed-params -%}
         {%- if show-border -%}       &showBorder=on      {%- endif -%}
         {%- if show-line-numbers -%} &showLineNumbers=on {%- endif -%}
         {%- if show-file-meta -%}    &showFileMeta=on    {%- endif -%}
         {%- if show-copy -%}         &showCopy=on        {%- endif -%}
-      "></script>
+      {%- endcapture -%}
+      <div class="emgithub-embed" data-src-base="https://emgithub.com/embed-v2.js?target={{embed-target}}{{embed-params | strip}}"></div>
     {%- when "gitlab" -%}
 {% include notice icon="warning" content="
 Embedding content from GitLab is not yet supported.
diff --git a/assets/js/code.js b/assets/js/code.js
@@ -18,6 +18,41 @@ function selectAndCopy(element) {
   document.execCommand("copy");
 }
 
+// Load emgithub embeds with the correct style for the current light/dark theme.
+// The _includes/code template emits a <div class="emgithub-embed" data-src-base="...">
+// placeholder (URL without &style=). We inject the <script> tag at runtime so the
+// style can match the active theme, and re-inject when the user toggles the theme.
+(function () {
+  function emgithubStyle() {
+    return document.documentElement.getAttribute('data-theme') === 'dark'
+      ? 'github-dark' : 'github';
+  }
+
+  function loadEmbed(div) {
+    div.innerHTML = '';
+    var script = document.createElement('script');
+    script.src = div.dataset.srcBase + '&style=' + emgithubStyle();
+    div.appendChild(script);
+  }
+
+  function loadAllEmbeds() {
+    document.querySelectorAll('.emgithub-embed').forEach(loadEmbed);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadAllEmbeds);
+  } else {
+    loadAllEmbeds();
+  }
+
+  // Re-render when the user toggles light/dark (theme.js sets data-theme on <html>).
+  new MutationObserver(function (mutations) {
+    for (var i = 0; i < mutations.length; i++) {
+      if (mutations[i].attributeName === 'data-theme') { loadAllEmbeds(); return; }
+    }
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+})();
+
 // Splice in a "Copy" button next to each code block.
 document.querySelectorAll("pre").forEach(function(pre) {
   if (pre.childElementCount != 1) return;
