Squashed commit of the following:

commit 2374942
Author: Peter Parente <[email protected]>
Date:   Sat Jan 4 15:15:43 2025 -0500

    Fix mdash, typo in observability post

commit 5767d33
Author: Peter Parente <[email protected]>
Date:   Sat Jan 4 15:15:25 2025 -0500

    Support system light/dark mode

Author: parente

pages/20250101-software-observability-roundup/index.md

@@ -118,8 +118,8 @@ should head. Shared terminology and goals are works in progress.
         at correlating and summarizing[^burmistrov2024], perhaps continually in the
         background.[^tane2024dec]
 
--   Adopt tooling that lets you explore quickly and cheaply--to discover emergent behaviors, answer
-    new questions, prepare for unknown unknowns.
+-   Adopt tooling that lets you explore quickly and cheaply—to discover emergent behaviors,
+    answer new questions, prepare for unknown unknowns.
 
     -   Proper tooling allows engineers to investigate any system, regardless of their experience
         with it or its complexity, in a methodical and objective manner.[^majors2022]
@@ -128,7 +128,7 @@ should head. Shared terminology and goals are works in progress.
     -   You will never ask the same question twice. Something is different since you last asked
         it.[^weakly2024mar]
     -   There is a natural tension between a system’s scalability and its feature set. You can
-        afford much powerful observability features at scales orders of magnitude smaller than
+        afford more powerful observability features at scales orders of magnitude smaller than
         Google.[^sigelman2021a]
 
 # Looking Forward

static/css/notebook.css

@@ -1,3 +1,4 @@
+/* Light mode theme default */
 .anchor-link {
     display: none;
 }
@@ -64,4 +65,25 @@
 
 .output_html {
     overflow-x: auto;
+}
+
+/* Dark mode theme alternative */
+@media (prefers-color-scheme: dark) {
+    .input_prompt {
+        color: #7f9fff;
+    }
+
+    .output_prompt {
+        color: #ff7f7f;
+    }
+
+    .input_area pre {
+        background-color: #2a2e2c;
+    }
+
+    .output_subarea td,
+    .output_subarea th,
+    .output_subarea table {
+        border-color: #444;
+    }
 }

static/css/pygments.css

@@ -1,3 +1,4 @@
+/* Light mode theme default */
 .hll { background-color: #ffffcc }
 .c { color: #408080; font-style: italic } /* Comment */
 .err { border: 1px solid #FF0000 } /* Error */
@@ -59,3 +60,50 @@
 .vg { color: #19177C } /* Name.Variable.Global */
 .vi { color: #19177C } /* Name.Variable.Instance */
 .il { color: #666666 } /* Literal.Number.Integer.Long */
+
+/* Dark mode theme alternative */
+@media (prefers-color-scheme: dark) {
+    .hll { background-color: #3f3f2c }
+    .c { color: #8ec2c2; font-style: italic }
+    .err { border: 1px solid #ff5555 }
+    .k { color: #7fbf7f; font-weight: bold }
+    .o { color: #999999 }
+    .cm, .cp, .c1, .cs { color: #8ec2c2; font-style: italic }
+    .gd { color: #ff7f7f }
+    .gh { color: #7f9fff; font-weight: bold }
+    .gi { color: #7fbf7f }
+    .go { color: #888888 }
+    .gp { color: #7f9fff; font-weight: bold }
+    .gu { color: #bf7fbf; font-weight: bold }
+    .gt { color: #7f9fff }
+    .kc, .kd, .kn, .kr { color: #7fbf7f; font-weight: bold }
+    .kp { color: #7fbf7f }
+    .kt { color: #ff7f9f }
+    .m { color: #999999 }
+    .s { color: #ff9f9f }
+    .na { color: #bfbf7f }
+    .nb { color: #7fbf7f }
+    .nc { color: #7f9fff; font-weight: bold }
+    .no { color: #ff9f9f }
+    .nd { color: #bf7fff }
+    .ni { color: #cfcfcf; font-weight: bold }
+    .ne { color: #ff7f7f; font-weight: bold }
+    .nf { color: #7f9fff }
+    .nl { color: #bfbf7f }
+    .nn { color: #7f9fff; font-weight: bold }
+    .nt { color: #7fbf7f; font-weight: bold }
+    .nv { color: #9f9fff }
+    .w { color: #666666 }
+    .mf, .mh, .mi, .mo { color: #999999 }
+    .sb, .sc, .sd, .s2 { color: #ff9f9f }
+    .se { color: #ffaf7f; font-weight: bold }
+    .sh { color: #ff9f9f }
+    .si { color: #ff9fbf; font-weight: bold }
+    .sx { color: #7fbf7f }
+    .sr { color: #ff9fbf }
+    .s1 { color: #ff9f9f }
+    .ss { color: #9f9fff }
+    .bp { color: #7fbf7f }
+    .vc, .vg, .vi { color: #9f9fff }
+    .il { color: #999999 }
+}

static/css/site.css

@@ -1,3 +1,4 @@
+/* Light mode theme default */
 :root {
     --bs-code-color: #338866;
 }
@@ -228,12 +229,63 @@ body .gist {
     margin-bottom: 30px;
 }
 
-.container{
+.container {
     max-width:980px !important;
 }
 
 img {
     max-width: 100%;
     height: auto;
     border: 1px solid #ccc;
+}
+
+/* Dark mode theme alternative */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1a1d1b;
+        color: #e0e0e0;
+    }
+
+    h1,h2,h3,h4,h5,h6 {
+        color: #e0e0e0;
+    }
+
+    a, a:visited, a:hover {
+        color: #6ba5bf;
+    }
+
+    .archiveList .yearBreak .year {
+        color: #e0e0e0;
+    }
+
+    pre {
+        background-color: #2a2e2c;
+        border-color: #444;
+    }
+
+    .footerSection {
+        border-color: #444;
+    }
+
+    .footnote li:target {
+        background-color: #2d4d41;
+    }
+
+    img, .profilePic, .bordered {
+        border-color: #444;
+    }
+
+    .pageTitle {
+        border-color: #444;
+        color: #5fcfa3;
+    }
+
+    .pageDate, .archiveList .date, .commentary {
+        color: #888;
+    }
+
+    .embedFilename {
+        color: #5fcfa3;
+        border-color: #444;
+    }
 }

static/js/comments.js

@@ -0,0 +1,34 @@
+(function() {
+    // Configure script dynamically so the theme can be set based on user system preference
+    const utterancesScript = document.createElement('script');
+    utterancesScript.src = 'https://utteranc.es/client.js';
+    utterancesScript.setAttribute('repo', 'parente/blog');
+    utterancesScript.setAttribute('issue-term', "[${page['slug']}]");
+    utterancesScript.setAttribute('crossorigin', 'anonymous');
+    utterancesScript.setAttribute('async', '');
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        utterancesScript.setAttribute('theme', 'github-dark');
+    } else {
+        utterancesScript.setAttribute('theme', 'github-light');
+    }
+    // Insert the configured script into the DOM
+    document.getElementById('userComments').appendChild(utterancesScript);
+
+    // Listen for color scheme preference changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        const theme = e.matches ? 'github-dark' : 'github-light';
+        const iframe = document.querySelector('.utterances-frame');
+        // Reload the iframe to change the theme to match. Utterances supports a 'set-theme' 
+        // postMessage. However, tracking if the iframe has been added to the page by the initial
+        // script in order to listen for whether the iframe has loaded lazily or not yet to decide
+        // whether to postMessage or to update src involves more JS than I care to maintain for
+        // this edge case. I accept the brief flicker of the iframe reloading.
+        if(iframe) {
+            const url = new URL(iframe.src);
+            const searchParams = new URLSearchParams(url.search);
+            searchParams.set('theme', theme);
+            url.search = searchParams.toString();
+            iframe.src = url.toString();
+        }
+    });
+})();

templates/page.mako

@@ -23,14 +23,7 @@
 <%block name="pageMeta">
   % if page['allow_comments']:
   <div class="footerSection" id="userComments">
-    <script src="https://utteranc.es/client.js"
-          repo="parente/blog"
-          issue-term="[${page['slug']}]"
-          label="thread"
-          theme="github-light"
-          crossorigin="anonymous"
-          async>
-    </script>
+    <script src="${site_root}/static/js/comments.js" async></script>
   </div>
   % endif 
   % if 'next' in page: