From 8f2c7cf34c18e54cfbd25f5ed5d2339524002aeb Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Fri, 29 Aug 2025 16:21:14 +0100
Subject: [PATCH 1/8] Theme: Add dark-mode

---
 assets/css/v2/style.css      | 135 +++++++++++++++++++++++------------
 layouts/_default/baseof.html |  68 ++++++++++++++++++
 layouts/partials/header.html |   4 ++
 3 files changed, 161 insertions(+), 46 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 56dd0943..23d8f447 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -129,7 +129,31 @@ textarea:not([rows]) {
   font-display: swap;
 }
 
+/* Handle theme switching that can't be dont with the light-dark function */
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* card */
+:root[data-theme="light"] {
+  --card-border: 1px solid oklch(var(--color-codeblock-border));
+  --card-shadow: 3px 3px 0px oklch(var(--color-shadow));
+  --blockquote-border: 1px solid oklch(var(--color-codeblock-border));
+  --blockquote-shadow: 3px 3px 0px oklch(var(--color-shadow));
+}
+:root[data-theme="dark"] {
+  --card-border: 1px dashed oklch(var(--color-codeblock-border));
+  --card-shadow: 0;
+  --blockquote-border: 1px dashed oklch(var(--color-codeblock-border));
+  --blockquote-shadow: 0;
+}
+
 :root {
+  color-scheme: light dark;
+
   /* Coveo color overrides */
   /* More info: https://docs.coveo.com/en/atomic/latest/usage/themes-and-visual-customization/ */
 
@@ -171,11 +195,12 @@ textarea:not([rows]) {
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
-  --color-background: 1 0 0;
-  --color-foreground: 0 0 0;
+  --color-background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
+  --color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0));
   --color-shadow: 0.86 0 0;
+  --code-color: oklch(0 0 0);
 
-  --color-footer-text: 0 0 0 / 65%;
+  --color-footer-text: light-dark(oklch(0 0 0 / 65%), oklch(1 0 0 / 65%));
   --color-product-title: 0.64 0 0;
   --color-tabs-inactive-border: 0 0 0 / 20%;
   --color-brand-bay-blue: 0.5307 0.128959 243.2508;
@@ -195,8 +220,11 @@ textarea:not([rows]) {
   /* Codeblock */
 
   --margin-codeblock: 1.5rem var(--overflow-gutter-extension);
-  --color-inline_codeblock-border: 0.85 0 0;
-  --color-inline_codeblock-background: 0.98 0 0;
+  --color-inline_codeblock-border: light-dark(oklch(0.85 0 0), oklch(0.85 0 0));
+  --color-inline_codeblock-background: light-dark(
+    oklch(0.98 0 0),
+    oklch(0.02 0 0)
+  );
   --color-codeblock-border: 0.63 0 0;
   --color-codeblock-background: 1 0 0;
   --color-codeblock-highlight: 0.99 0.0479 105.97;
@@ -243,7 +271,7 @@ textarea:not([rows]) {
   --overflow-gutter-extension: -1rem;
 
   /* Product Selector */
-  --product-selector-background: 0.98 0 0;
+  --product-selector-background: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
 
   /* vars for the primary grid setup */
   --grid-content: minmax(34rem, 50rem);
@@ -312,6 +340,7 @@ textarea:not([rows]) {
   --sidebar-item-padding-lr: 0.75rem;
   --sidebar-item-padding-tb: 0.25rem;
   --content-max-width: 88rem;
+  --color-sidebar-link: light-dark(oklch(0 0 0 / 75%), oklch(1 0 0 / 95%));
 
   --main-col: minmax(34rem, 50rem);
   --side-col: minmax(18rem, 26rem);
@@ -417,6 +446,7 @@ ol li:last-child {
     "sidebar footer";
   min-height: 100vh;
   min-width: var(--grid-min-width);
+  background-color: var(--color-background);
 
   @media (max-width: 68rem) {
     grid-template-columns: 1fr;
@@ -506,7 +536,7 @@ ol li:last-child {
   display: flex;
   padding: 0 var(--space-s);
   border-bottom: 1px solid oklch(var(--color-divider));
-  background: oklch(var(--color-background));
+  background: var(--color-background);
   position: sticky;
   top: 0;
   z-index: 2;
@@ -547,7 +577,10 @@ ol li:last-child {
       width: 336px;
 
       .header__control--sidebar {
-        color: oklch(var(--color-foreground));
+        display: flex;
+        gap: 1rem;
+
+        color: var(--color-foreground);
 
         .header__control--sidebar--open {
           display: none;
@@ -557,6 +590,10 @@ ol li:last-child {
           display: unset;
           cursor: pointer;
         }
+
+        .header__control--theme {
+          cursor: pointer;
+        }
       }
     }
 
@@ -579,7 +616,7 @@ ol li:last-child {
         text-align: center;
         text-decoration: none;
         cursor: pointer;
-        background-color: oklch(var(--color-background));
+        background-color: var(--color-background);
         font-size: var(--font-step--1);
         color: oklch(var(--color-brand-bay-blue));
         font-weight: 500;
@@ -593,8 +630,8 @@ ol li:last-child {
 
       .dropdown-content {
         position: absolute;
-        background-color: oklch(var(--color-background));
-        border: oklch(var(--color-foreground)) 1px solid;
+        background-color: var(--color-background);
+        border: var(--color-foreground) 1px solid;
         box-shadow: 3px 3px 0px oklch(var(--color-shadow));
         z-index: 1;
         right: 0;
@@ -625,6 +662,7 @@ ol li:last-child {
 }
 
 .content {
+  background-color: var(--color-background);
   .last-modified {
     margin: 1rem 0 0 0;
     font-size: 0.875rem;
@@ -671,7 +709,7 @@ ol li:last-child {
 .header__sidebar__panel,
 .sidebar__panel {
   cursor: pointer;
-  color: oklch(var(--color-foreground));
+  color: var(--color-foreground);
   label {
     cursor: pointer;
   }
@@ -695,7 +733,7 @@ ol li:last-child {
   height: calc(110vh - var(--header-height));
   border-right: 1px solid oklch(var(--color-divider));
   overflow: hidden;
-  background: oklch(var(--color-background));
+  background: var(--color-background);
   box-sizing: border-box;
   transform: translateX(0);
   padding: 0 0 var(--space-s) var(--space-s);
@@ -714,7 +752,7 @@ ol li:last-child {
       height: fit-content;
       position: sticky;
       top: 0;
-      background: oklch(var(--color-background));
+      background: var(--color-background);
       z-index: 1;
 
       .sidebar__img {
@@ -730,7 +768,7 @@ ol li:last-child {
         width: 100%;
         padding-top: 1rem;
         padding-right: var(--sidebar-item-padding-lr);
-        color: oklch(var(--color-foreground));
+        color: var(--color-foreground);
         text-decoration-color: oklch(var(--color-brand) / 0.3);
         & button:hover * {
           color: oklch(var(--color-brand));
@@ -742,7 +780,7 @@ ol li:last-child {
         }
 
         .product-selector__section {
-          background: oklch(var(--product-selector-background));
+          background: var(--product-selector-background);
         }
 
         .product-selector__toggle {
@@ -778,7 +816,7 @@ ol li:last-child {
           padding-inline-start: 1rem;
           align-content: center;
           font-size: var(--font-step-0);
-          color: oklch(var(--color-background));
+          color: var(--color-background);
           background-color: oklch(var(--color-brand));
           height: 2.5rem;
 
@@ -835,7 +873,7 @@ ol li:last-child {
 
         .header__control {
           .header__control--sidebar {
-            color: oklch(var(--color-foreground));
+            color: var(--color-foreground);
 
             .header__control--sidebar--open {
               display: none;
@@ -941,7 +979,7 @@ ol li:last-child {
 
 .footer-f5-trademark p {
   margin: 0;
-  color: oklch(var(--color-footer-text));
+  color: var(--color-footer-text);
 }
 
 .footer-useful-links {
@@ -951,7 +989,7 @@ ol li:last-child {
 }
 
 .footer-useful-links a {
-  color: oklch(var(--color-footer-text));
+  color: var(--color-footer-text);
   text-decoration: none;
 }
 
@@ -1361,7 +1399,7 @@ atomic-search-interface#search-standalone-header {
   .header-search-box {
     &::part(wrapper) {
       border-radius: 0;
-      border-color: oklch(var(--color-foreground));
+      border-color: var(--color-foreground);
     }
 
     &::part(textarea) {
@@ -1371,7 +1409,7 @@ atomic-search-interface#search-standalone-header {
 
     &::part(suggestions-wrapper) {
       border-radius: 0;
-      border-color: oklch(var(--color-foreground));
+      border-color: var(--color-foreground);
       width: calc(100% + 2px);
       margin-inline-start: -1px;
     }
@@ -1477,7 +1515,7 @@ nav.sidebar.sidebar__mobile-open {
     padding: 0.25rem 0.5rem;
     border-radius: 5px 0 0 5px;
     font-weight: 500;
-    color: oklch(var(--color-foreground));
+    color: var(--color-foreground);
 
     &:hover {
       background-color: oklch(var(--color-brand) / 0.06);
@@ -1513,7 +1551,7 @@ nav.sidebar.sidebar__mobile-open {
     padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
     margin: 2px 0 2px 0;
     border-radius: 5px 0 0 5px;
-    color: oklch(0 0 0 / 0.75);
+    color: var(--color-sidebar-link);
     text-decoration: none;
     transition:
       background-color 0.2s ease,
@@ -1546,7 +1584,7 @@ nav.sidebar.sidebar__mobile-open {
       }
 
       a {
-        color: oklch(var(--color-foreground));
+        color: var(--color-foreground);
         text-decoration: none;
       }
 
@@ -1591,7 +1629,7 @@ p {
 
 .breadcrumb-layout {
   position: relative;
-  background-color: white;
+  background-color: var(--color-background);
 
   .sidebar__mobile__toggle {
     display: none;
@@ -1599,7 +1637,7 @@ p {
 }
 
 .breadcrumb {
-  color: oklch(var(--color-foreground));
+  color: var(--color-foreground);
   text-decoration: none;
   font-size: 0.875rem;
   margin: 0;
@@ -1707,14 +1745,14 @@ a:hover {
 
   .content__reading-time {
     font-size: var(--font-step--1);
-    color: oklch(var(--color-footer-text));
+    color: var(--color-footer-text);
   }
 }
 
 .headerlink {
   text-decoration: none;
 
-  color: oklch(var(--color-foreground));
+  color: var(--color-foreground);
 }
 
 .headerlink::before {
@@ -1762,15 +1800,15 @@ a:hover {
       }
 
       .card {
-        border: 1px solid oklch(var(--color-codeblock-border));
-        box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+        border: var(--card-border);
+        box-shadow: var(--card-shadow);
         padding: 1rem;
         order: 2;
       }
     }
 
     .card {
-      color: oklch(var(--color-foreground));
+      color: var(--color-foreground);
       text-decoration: none;
 
       .card-container {
@@ -1800,7 +1838,7 @@ a:hover {
 
       &:hover {
         box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
-        text-decoration-color: oklch(var(--color-background));
+        text-decoration-color: var(--color-background);
         border: 1px solid oklch(var(--color-brand) / 0.8);
       }
     }
@@ -1902,8 +1940,7 @@ table.table {
       border: var(--table-line-height) solid oklch(var(--table-color-divider));
       border-top: var(--table-line-height) dashed
         oklch(var(--table-color-divider));
-      border-bottom: var(--table-line-height) solid
-        oklch(var(--color-foreground));
+      border-bottom: var(--table-line-height) solid var(--color-foreground);
     }
 
     tr:nth-child(even) td {
@@ -1926,13 +1963,15 @@ table hr {
 /* MARK: Callouts
 */
 blockquote {
-  border: 1px solid oklch(var(--color-foreground));
+  /*1px solid var(--color-foreground)*/
+  border: var(--blockquote-border);
   padding: 1rem;
   height: fit-content;
   margin: var(--margin-callout); /* Expand into the gutter */
 
   /* solid 3px drop shadow */
-  box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+  /*3px 3px 0px oklch(var(--color-shadow))*/
+  box-shadow: var(--blockquote-shadow);
 
   &:has(.code-block) .code-block:not(:has(.single-line)) {
     /* Removes negative margins from multi-line codeblocks */
@@ -1959,7 +1998,7 @@ blockquote.note:before {
   margin: -1.625rem 0 0 -0.25rem;
   padding: 0 0.25rem;
   display: block;
-  background-color: oklch(var(--color-background));
+  background-color: var(--color-background);
   z-index: 999;
 }
 
@@ -2144,14 +2183,17 @@ li:has(> div > blockquote) {
 */
 code {
   font-family: "JetBrainsMono", monospace;
+  /* We want to use the same colour for codeblocks, regardless of theme*/
+  color: var(--code-color);
 }
 
 /* Inline Codeblock */
 code:not(pre code) {
-  border: solid 1px oklch(var(--color-inline_codeblock-border));
+  color: var(--color-foreground);
+  border: solid 1px var(--color-inline_codeblock-border);
   border-radius: 0.25rem;
   padding: 0 0.25rem;
-  background-color: oklch(var(--color-inline_codeblock-background));
+  background-color: var(--color-inline_codeblock-background);
   font-size: 0.875rem;
 }
 
@@ -2224,6 +2266,7 @@ a:has(code:not(pre code)) {
   .code-type {
     display: inline-block;
     height: 1.5rem;
+    color: var(--code-color);
     border-top: 1px solid oklch(var(--color-codeblock-border));
     border-left: 1px solid oklch(var(--color-codeblock-border));
     border-right: 1px solid oklch(var(--color-codeblock-border));
@@ -2244,12 +2287,12 @@ a:has(code:not(pre code)) {
     }
 
     .code-copy-button {
-      background-color: oklch(var(--color-background));
-      border: 1px solid oklch(var(--color-foreground));
+      background-color: var(--color-background);
+      border: 1px solid var(--color-foreground);
       padding: 4px 6px;
       cursor: pointer;
       font-size: 12px;
-      color: oklch(var(--color-foreground));
+      color: var(--color-foreground);
       display: none;
       position: absolute;
       margin-block-start: 8px;
@@ -2367,11 +2410,11 @@ hr {
   position: fixed;
   top: 0;
   left: 0;
-  background-color: oklch(var(--color-background));
-  color: oklch(var(--color-foreground));
+  background-color: var(--color-background);
+  color: var(--color-foreground);
   padding: 1rem 1rem;
   font-size: 1rem;
-  border: 2px solid oklch(var(--color-foreground));
+  border: 2px solid var(--color-foreground);
   z-index: 1000;
   text-decoration: none;
   border-radius: 0;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f5625a9e..1c593c77 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -35,6 +35,74 @@
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-K5HG9JT');</script>
 
+  <script>
+
+    let storedTheme = null;
+    try {
+      storedTheme = localStorage.getItem("theme");
+    } catch (e) {
+      // Some environments block storage (privacy mode, etc.)
+    }
+
+    const mql = window.matchMedia
+      ? window.matchMedia("(prefers-color-scheme: dark)")
+      : null;
+    const initialTheme = storedTheme || (mql && mql.matches ? "dark" : "light");
+    document.documentElement.setAttribute("data-theme", initialTheme);
+
+    document.addEventListener("DOMContentLoaded", () => {
+      const toggle = document.getElementById("theme-toggle");
+      if (!toggle) return;
+
+      toggle.checked =
+        document.documentElement.getAttribute("data-theme") === "dark";
+
+      toggle.addEventListener("change", () => {
+        const theme = toggle.checked ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", theme);
+        try {
+          localStorage.setItem("theme", theme);
+        } catch (e) {}
+      });
+
+      // Follow system preference only until the user picks a theme
+      let hasUserChoice = false;
+      try {
+        hasUserChoice = localStorage.getItem("theme") !== null;
+      } catch (e) {
+        hasUserChoice = false;
+      }
+
+      if (!hasUserChoice && mql) {
+        const onSystemChange = (e) => {
+          try {
+            if (localStorage.getItem("theme") !== null) return;
+          } catch (err) {
+            // continue following system if storage is blocked
+          }
+          const theme = e.matches ? "dark" : "light";
+          document.documentElement.setAttribute("data-theme", theme);
+          toggle.checked = theme === "dark";
+        };
+
+        if (typeof mql.addEventListener === "function") {
+          mql.addEventListener("change", onSystemChange);
+        } else if (typeof mql.addListener === "function") {
+          mql.addListener(onSystemChange);
+        }
+      }
+    });
+
+    // Keep multiple tabs in sync so a change in one reflects in others
+    window.addEventListener("storage", (e) => {
+      if (e.key !== "theme") return;
+      const theme = e.newValue || (mql && mql.matches ? "dark" : "light");
+      document.documentElement.setAttribute("data-theme", theme);
+      const toggle = document.getElementById("theme-toggle");
+      if (toggle) toggle.checked = theme === "dark";
+    });
+
+  </script>
   </head>
 
   <body id="body">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e48f4e71..c0ce0bee 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -8,6 +8,10 @@
             <label class="header__control--sidebar--open" for="sidebar-panel">
             {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
             </label>
+            <input type="checkbox" id="theme-toggle" hidden/>
+            <label class="header__control--theme" for="theme-toggle">
+            {{ partial "lucide" (dict "context" . "icon" "sun") }}
+            </label>
         </div>
         {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
         <div class="header__search">

From d34b3130c469e38e0c043317682344d9c84f90e2 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 1 Sep 2025 14:38:25 +0100
Subject: [PATCH 2/8] Theme: Chroma code dark mode

Use https://xyproto.github.io/splash/docs/github-dark.html as Theme
for dark mode
light-dark css merge handled by chad
---
 assets/css/v2/highlight.css | 379 +++++++++++++++++++++++++++---------
 assets/css/v2/style.css     |   2 +-
 2 files changed, 292 insertions(+), 89 deletions(-)

diff --git a/assets/css/v2/highlight.css b/assets/css/v2/highlight.css
index b9765f93..7a9bf5b5 100644
--- a/assets/css/v2/highlight.css
+++ b/assets/css/v2/highlight.css
@@ -1,88 +1,291 @@
-/* Generated using: hugo gen chromastyles --style=tango */
-
-/* Background */ .bg { background-color:#f8f8f8; }
-/* PreWrapper */ .chroma { background-color:#f8f8f8; }
-/* Other */ .chroma .x { color:#000 }
-/* Error */ .chroma .err { color:#a40000 }
-/* CodeLine */ .chroma .cl {  }
-/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
-/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
-/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
-/* LineHighlight */ .chroma .hl { background-color:#dfdfdf }
-/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
-/* Line */ .chroma .line { display:flex; }
-/* Keyword */ .chroma .k { color:#204a87;font-weight:bold }
-/* KeywordConstant */ .chroma .kc { color:#204a87;font-weight:bold }
-/* KeywordDeclaration */ .chroma .kd { color:#204a87;font-weight:bold }
-/* KeywordNamespace */ .chroma .kn { color:#204a87;font-weight:bold }
-/* KeywordPseudo */ .chroma .kp { color:#204a87;font-weight:bold }
-/* KeywordReserved */ .chroma .kr { color:#204a87;font-weight:bold }
-/* KeywordType */ .chroma .kt { color:#204a87;font-weight:bold }
-/* Name */ .chroma .n { color:#000 }
-/* NameAttribute */ .chroma .na { color:#c4a000 }
-/* NameBuiltin */ .chroma .nb { color:#204a87 }
-/* NameBuiltinPseudo */ .chroma .bp { color:#3465a4 }
-/* NameClass */ .chroma .nc { color:#000 }
-/* NameConstant */ .chroma .no { color:#000 }
-/* NameDecorator */ .chroma .nd { color:#5c35cc;font-weight:bold }
-/* NameEntity */ .chroma .ni { color:#ce5c00 }
-/* NameException */ .chroma .ne { color:#c00;font-weight:bold }
-/* NameFunction */ .chroma .nf { color:#000 }
-/* NameFunctionMagic */ .chroma .fm { color:#000 }
-/* NameLabel */ .chroma .nl { color:#f57900 }
-/* NameNamespace */ .chroma .nn { color:#000 }
-/* NameOther */ .chroma .nx { color:#000 }
-/* NameProperty */ .chroma .py { color:#000 }
-/* NameTag */ .chroma .nt { color:#204a87;font-weight:bold }
-/* NameVariable */ .chroma .nv { color:#000 }
-/* NameVariableClass */ .chroma .vc { color:#000 }
-/* NameVariableGlobal */ .chroma .vg { color:#000 }
-/* NameVariableInstance */ .chroma .vi { color:#000 }
-/* NameVariableMagic */ .chroma .vm { color:#000 }
-/* Literal */ .chroma .l { color:#000 }
-/* LiteralDate */ .chroma .ld { color:#000 }
-/* LiteralString */ .chroma .s { color:#4e9a06 }
-/* LiteralStringAffix */ .chroma .sa { color:#4e9a06 }
-/* LiteralStringBacktick */ .chroma .sb { color:#4e9a06 }
-/* LiteralStringChar */ .chroma .sc { color:#4e9a06 }
-/* LiteralStringDelimiter */ .chroma .dl { color:#4e9a06 }
-/* LiteralStringDoc */ .chroma .sd { color:#8f5902;font-style:italic }
-/* LiteralStringDouble */ .chroma .s2 { color:#4e9a06 }
-/* LiteralStringEscape */ .chroma .se { color:#4e9a06 }
-/* LiteralStringHeredoc */ .chroma .sh { color:#4e9a06 }
-/* LiteralStringInterpol */ .chroma .si { color:#4e9a06 }
-/* LiteralStringOther */ .chroma .sx { color:#4e9a06 }
-/* LiteralStringRegex */ .chroma .sr { color:#4e9a06 }
-/* LiteralStringSingle */ .chroma .s1 { color:#4e9a06 }
-/* LiteralStringSymbol */ .chroma .ss { color:#4e9a06 }
-/* LiteralNumber */ .chroma .m { color:#0000cf;font-weight:bold }
-/* LiteralNumberBin */ .chroma .mb { color:#0000cf;font-weight:bold }
-/* LiteralNumberFloat */ .chroma .mf { color:#0000cf;font-weight:bold }
-/* LiteralNumberHex */ .chroma .mh { color:#0000cf;font-weight:bold }
-/* LiteralNumberInteger */ .chroma .mi { color:#0000cf;font-weight:bold }
-/* LiteralNumberIntegerLong */ .chroma .il { color:#0000cf;font-weight:bold }
-/* LiteralNumberOct */ .chroma .mo { color:#0000cf;font-weight:bold }
-/* Operator */ .chroma .o { color:#ce5c00;font-weight:bold }
-/* OperatorWord */ .chroma .ow { color:#204a87;font-weight:bold }
-/* Punctuation */ .chroma .p { color:#000;font-weight:bold }
-/* Comment */ .chroma .c { color:#8f5902;font-style:italic }
-/* CommentHashbang */ .chroma .ch { color:#8f5902;font-style:italic }
-/* CommentMultiline */ .chroma .cm { color:#8f5902;font-style:italic }
-/* CommentSingle */ .chroma .c1 { color:#8f5902;font-style:italic }
-/* CommentSpecial */ .chroma .cs { color:#8f5902;font-style:italic }
-/* CommentPreproc */ .chroma .cp { color:#8f5902;font-style:italic }
-/* CommentPreprocFile */ .chroma .cpf { color:#8f5902;font-style:italic }
-/* Generic */ .chroma .g { color:#000 }
-/* GenericDeleted */ .chroma .gd { color:#a40000 }
-/* GenericEmph */ .chroma .ge { color:#000;font-style:italic }
-/* GenericError */ .chroma .gr { color:#ef2929 }
-/* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold }
-/* GenericInserted */ .chroma .gi { color:#00a000 }
-/* GenericOutput */ .chroma .go { color:#000;font-style:italic }
-/* GenericPrompt */ .chroma .gp { color:#8f5902 }
-/* GenericStrong */ .chroma .gs { color:#000;font-weight:bold }
-/* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold }
-/* GenericTraceback */ .chroma .gt { color:#a40000;font-weight:bold }
-/* GenericUnderline */ .chroma .gl { color:#000;text-decoration:underline }
-/* TextWhitespace */ .chroma .w { color:#f8f8f8;text-decoration:underline }
+/* Background */
+.bg {
+  background-color: light-dark(#f8f8f8, #0d1117);
+}
+
+/* PreWrapper */
+.chroma {
+  color: light-dark(#000, #e6edf3);
+  background-color: light-dark(#f8f8f8, #0d1117);
+}
+
+/* Other */
+.chroma .x {
+  color: light-dark(#000, inherit);
+}
+
+/* Error */
+.chroma .err {
+  color: light-dark(#a40000, #f85149);
+}
+
+/* CodeLine */
+.chroma .cl { }
+
+/* LineLink */
+.chroma .lnlinks {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  background-color: light-dark(#dfdfdf, #6e7681);
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: light-dark(#7f7f7f, #737679);
+}
+
+/* LineNumbers */
+.chroma .ln {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: light-dark(#7f7f7f, #6e7681);
+}
+
+/* Line */
+.chroma .line {
+  display: flex;
+}
+
+/* Keyword */
+.chroma .k,
+.chroma .kc,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr,
+.chroma .kt {
+  color: light-dark(#204a87, #ff7b72);
+  font-weight: bold;
+}
+
+/* Name */
+.chroma .n,
+.chroma .nc,
+.chroma .no,
+.chroma .nf,
+.chroma .fm,
+.chroma .nn,
+.chroma .nx,
+.chroma .py,
+.chroma .nv,
+.chroma .vc,
+.chroma .vg,
+.chroma .vi,
+.chroma .vm {
+  color: light-dark(#000, #79c0ff);
+}
+
+/* NameAttribute */
+.chroma .na {
+  color: light-dark(#c4a000, inherit);
+}
+
+/* NameBuiltin */
+.chroma .nb {
+  color: light-dark(#204a87, inherit);
+}
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+  color: light-dark(#3465a4, inherit);
+}
+
+/* NameClass */
+.chroma .nc {
+  font-weight: light-dark(normal, bold);
+}
+
+/* NameConstant */
+.chroma .no {
+  font-weight: light-dark(normal, bold);
+}
+
+/* NameDecorator */
+.chroma .nd {
+  color: light-dark(#5c35cc, #d2a8ff);
+  font-weight: bold;
+}
+
+/* NameEntity */
+.chroma .ni {
+  color: light-dark(#ce5c00, #ffa657);
+}
+
+/* NameException */
+.chroma .ne {
+  color: light-dark(#c00, #f0883e);
+  font-weight: bold;
+}
+
+/* NameLabel */
+.chroma .nl {
+  color: light-dark(#f57900, #79c0ff);
+  font-weight: light-dark(normal, bold);
+}
+
+/* NameTag */
+.chroma .nt {
+  color: light-dark(#204a87, #7ee787);
+  font-weight: bold;
+}
+
+/* LiteralString */
+.chroma .s,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .dl,
+.chroma .sd,
+.chroma .s2,
+.chroma .se,
+.chroma .sh,
+.chroma .si,
+.chroma .sx,
+.chroma .sr,
+.chroma .s1,
+.chroma .ss {
+  color: light-dark(#4e9a06, #a5d6ff);
+}
+
+/* LiteralNumber */
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .il,
+.chroma .mo {
+  color: light-dark(#0000cf, #a5d6ff);
+  font-weight: bold;
+}
+
+/* Operator */
+.chroma .o,
+.chroma .ow {
+  color: light-dark(#ce5c00, #ff7b72);
+  font-weight: bold;
+}
+
+/* Punctuation */
+.chroma .p {
+  color: light-dark(#000, inherit);
+  font-weight: bold;
+}
+
+/* Comment */
+.chroma .c,
+.chroma .ch,
+.chroma .cm,
+.chroma .c1,
+.chroma .cs,
+.chroma .cp,
+.chroma .cpf {
+  color: light-dark(#8f5902, #8b949e);
+  font-style: italic;
+}
+
+/* CommentSpecial */
+.chroma .cs,
+.chroma .cp,
+.chroma .cpf {
+  font-weight: light-dark(normal, bold);
+}
+
+/* GenericDeleted */
+.chroma .gd {
+  color: light-dark(#a40000, #ffa198);
+  background-color: light-dark(inherit, #490202);
+}
+
+/* GenericEmph */
+.chroma .ge {
+  color: light-dark(#000, inherit);
+  font-style: italic;
+}
+
+/* GenericError */
+.chroma .gr {
+  color: light-dark(#ef2929, #ffa198);
+}
+
+/* GenericHeading */
+.chroma .gh {
+  color: light-dark(#000080, #79c0ff);
+  font-weight: bold;
+}
+
+/* GenericInserted */
+.chroma .gi {
+  color: light-dark(#00a000, #56d364);
+  background-color: light-dark(inherit, #0f5323);
+}
+
+/* GenericOutput */
+.chroma .go {
+  color: light-dark(#000, #8b949e);
+  font-style: italic;
+}
+
+/* GenericPrompt */
+.chroma .gp {
+  color: light-dark(#8f5902, #8b949e);
+}
+
+/* GenericStrong */
+.chroma .gs {
+  color: light-dark(#000, inherit);
+  font-weight: bold;
+}
+
+/* GenericSubheading */
+.chroma .gu {
+  color: light-dark(#800080, #79c0ff);
+  font-weight: bold;
+}
+
+/* GenericTraceback */
+.chroma .gt {
+  color: light-dark(#a40000, #ff7b72);
+  font-weight: bold;
+}
+
+/* GenericUnderline */
+.chroma .gl {
+  color: light-dark(#000, inherit);
+  text-decoration: underline;
+}
+
+/* TextWhitespace */
+.chroma .w {
+  color: light-dark(#f8f8f8, #6e7681);
+  text-decoration: underline;
+}
diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 23d8f447..0049642a 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -198,7 +198,7 @@ textarea:not([rows]) {
   --color-background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
   --color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0));
   --color-shadow: 0.86 0 0;
-  --code-color: oklch(0 0 0);
+  --code-color: light-dark(oklch(0 0 0), oklch(1 0 0));
 
   --color-footer-text: light-dark(oklch(0 0 0 / 65%), oklch(1 0 0 / 65%));
   --color-product-title: 0.64 0 0;

From 66dd1e3091f7ed552b2ce76aec3b1ce9b0cd2221 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:49:24 +0100
Subject: [PATCH 3/8] Theme: Toggle icon on theme swap

---
 assets/css/v2/style.css      |  16 +++++-
 biome.json                   |   1 -
 layouts/_default/baseof.html | 100 ++++++++++++++---------------------
 layouts/partials/header.html |  12 +++--
 4 files changed, 64 insertions(+), 65 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 0049642a..19a0fff3 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -143,12 +143,16 @@ textarea:not([rows]) {
   --card-shadow: 3px 3px 0px oklch(var(--color-shadow));
   --blockquote-border: 1px solid oklch(var(--color-codeblock-border));
   --blockquote-shadow: 3px 3px 0px oklch(var(--color-shadow));
+  --icon-light: block;
+  --icon-dark: none;
 }
 :root[data-theme="dark"] {
   --card-border: 1px dashed oklch(var(--color-codeblock-border));
   --card-shadow: 0;
   --blockquote-border: 1px dashed oklch(var(--color-codeblock-border));
   --blockquote-shadow: 0;
+  --icon-dark: block;
+  --icon-light: none;
 }
 
 :root {
@@ -196,7 +200,7 @@ textarea:not([rows]) {
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
   --color-background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
-  --color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0));
+  --color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0 / 0.9));
   --color-shadow: 0.86 0 0;
   --code-color: light-dark(oklch(0 0 0), oklch(1 0 0));
 
@@ -592,7 +596,17 @@ ol li:last-child {
         }
 
         .header__control--theme {
+          background: none;
+          border: none;
           cursor: pointer;
+
+          .header__control--theme--light {
+            display: var(--icon-light);
+          }
+
+          .header__control--theme--dark {
+            display: var(--icon-dark);
+          }
         }
       }
     }
diff --git a/biome.json b/biome.json
index 263e8cbb..497355e2 100644
--- a/biome.json
+++ b/biome.json
@@ -1,6 +1,5 @@
 {
   "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
-  "root": false,
   "vcs": {
     "enabled": true,
     "clientKind": "git",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1c593c77..4ae8edf0 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -36,71 +36,53 @@
     })(window,document,'script','dataLayer','GTM-K5HG9JT');</script>
 
   <script>
-
-    let storedTheme = null;
-    try {
-      storedTheme = localStorage.getItem("theme");
-    } catch (e) {
-      // Some environments block storage (privacy mode, etc.)
-    }
-
-    const mql = window.matchMedia
-      ? window.matchMedia("(prefers-color-scheme: dark)")
-      : null;
-    const initialTheme = storedTheme || (mql && mql.matches ? "dark" : "light");
-    document.documentElement.setAttribute("data-theme", initialTheme);
-
-    document.addEventListener("DOMContentLoaded", () => {
-      const toggle = document.getElementById("theme-toggle");
-      if (!toggle) return;
-
-      toggle.checked =
-        document.documentElement.getAttribute("data-theme") === "dark";
-
-      toggle.addEventListener("change", () => {
-        const theme = toggle.checked ? "dark" : "light";
-        document.documentElement.setAttribute("data-theme", theme);
-        try {
-          localStorage.setItem("theme", theme);
-        } catch (e) {}
-      });
-
-      // Follow system preference only until the user picks a theme
-      let hasUserChoice = false;
+  let storedTheme = null;
+  try {
+    storedTheme = localStorage.getItem('theme');
+  } catch (e) {
+    console.warn('Unable to read theme from localStorage:', e);
+  }
+
+  const mql = window.matchMedia?.('(prefers-color-scheme: dark)');
+  const initialTheme = storedTheme || (mql?.matches ? 'dark' : 'light');
+  document.documentElement.setAttribute('data-theme', initialTheme);
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('theme-toggle');
+    if (!toggle) return;
+
+    toggle.addEventListener('click', () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme');
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', newTheme);
       try {
-        hasUserChoice = localStorage.getItem("theme") !== null;
+        localStorage.setItem('theme', newTheme);
       } catch (e) {
-        hasUserChoice = false;
+        console.warn('Failed to write theme to localStorage:', e);
       }
+    });
+
+    const hasUserChoice = storedTheme !== null;
 
-      if (!hasUserChoice && mql) {
-        const onSystemChange = (e) => {
-          try {
-            if (localStorage.getItem("theme") !== null) return;
-          } catch (err) {
-            // continue following system if storage is blocked
-          }
-          const theme = e.matches ? "dark" : "light";
-          document.documentElement.setAttribute("data-theme", theme);
-          toggle.checked = theme === "dark";
-        };
-
-        if (typeof mql.addEventListener === "function") {
-          mql.addEventListener("change", onSystemChange);
-        } else if (typeof mql.addListener === "function") {
-          mql.addListener(onSystemChange);
+    if (!hasUserChoice && mql) {
+      const onSystemChange = (e) => {
+        try {
+          if (localStorage.getItem('theme') !== null) return;
+        } catch (err) {
+          console.warn('Unable to read theme from localStorage:', err);
         }
-      }
-    });
+        const theme = e.matches ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', theme);
+      };
+      mql.addEventListener('change', onSystemChange);
+    }
+  });
 
-    // Keep multiple tabs in sync so a change in one reflects in others
-    window.addEventListener("storage", (e) => {
-      if (e.key !== "theme") return;
-      const theme = e.newValue || (mql && mql.matches ? "dark" : "light");
-      document.documentElement.setAttribute("data-theme", theme);
-      const toggle = document.getElementById("theme-toggle");
-      if (toggle) toggle.checked = theme === "dark";
-    });
+  window.addEventListener('storage', (e) => {
+    if (e.key !== 'theme') return;
+    const theme = e.newValue || (mql?.matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', theme);
+  });
 
   </script>
   </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c0ce0bee..d004a7cb 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -8,10 +8,14 @@
             <label class="header__control--sidebar--open" for="sidebar-panel">
             {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
             </label>
-            <input type="checkbox" id="theme-toggle" hidden/>
-            <label class="header__control--theme" for="theme-toggle">
-            {{ partial "lucide" (dict "context" . "icon" "sun") }}
-            </label>
+            <button id="theme-toggle" class="header__control--theme" role="button" aria-label="Toggle theme">
+                <span class="header__control--theme--light">
+                    {{ partial "lucide" (dict "context" . "icon" "sun") }}
+                </span>
+                <span class="header__control--theme--dark">
+                    {{ partial "lucide" (dict "context" . "icon" "moon") }}
+                </span>
+            </button>
         </div>
         {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
         <div class="header__search">

From 1bdfc3f9dd5accfe187f81a9ca00577c808cb7d1 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:58:06 +0100
Subject: [PATCH 4/8] Biome: Remove specific config path

---
 Makefile | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/Makefile b/Makefile
index 700ba6f1..045484a8 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,4 @@
 BIOME_BASE_CMD := $(if $(shell which biome),biome,npx @biomejs/biome@2.2.2)
-BIOME_CONFIG_PATH := --config-path="biome.json"
 WRITE_FLAG := --write
 
 .PHONY: list help
@@ -26,11 +25,11 @@ ifeq ($(BIOME_ARGS), write)
 endif
 
 biome-format:
-	$(BIOME_BASE_CMD) format $(BIOME_CONFIG_PATH) $(FLAG)
+	$(BIOME_BASE_CMD) format $(FLAG)
 biome-lint:
-	$(BIOME_BASE_CMD) lint $(BIOME_CONFIG_PATH) $(FLAG)
+	$(BIOME_BASE_CMD) lint $(FLAG)
 biome-all:
-	$(BIOME_BASE_CMD) check $(BIOME_CONFIG_PATH) $(FLAG)
+	$(BIOME_BASE_CMD) check $(FLAG)
 
 setup-pre-commit:
 	@if ! command -v pre-commit &> /dev/null; then \

From 20a8cc546e9155cbae2f23e6b89db4050cd1fb39 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 1 Sep 2025 16:47:18 +0100
Subject: [PATCH 5/8] Theme: Test very dark green

---
 assets/css/v2/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 19a0fff3..29d4dc0d 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -199,7 +199,7 @@ textarea:not([rows]) {
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
-  --color-background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
+  --color-background: light-dark(oklch(1 0 0), oklch(0.1 0.194 147.7));
   --color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0 / 0.9));
   --color-shadow: 0.86 0 0;
   --code-color: light-dark(oklch(0 0 0), oklch(1 0 0));

From e94e68fdf332a64ebc92224ee34d11ab3e4fc08b Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 2 Sep 2025 10:22:53 +0100
Subject: [PATCH 6/8] Theme: Remove / on image paths

---
 layouts/partials/favicon.html   | 2 +-
 layouts/partials/footer-v2.html | 2 +-
 layouts/partials/footer.html    | 4 ++--
 layouts/partials/header.html    | 2 +-
 layouts/partials/meta.html      | 4 ++--
 layouts/shortcodes/card.html    | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/favicon.html b/layouts/partials/favicon.html
index 9f807bb3..ea2b200f 100644
--- a/layouts/partials/favicon.html
+++ b/layouts/partials/favicon.html
@@ -1 +1 @@
-<link rel="shortcut icon" type="image/x-icon" href="{{ "/images/favicon-48x48.ico" | absURL }}">
+<link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon-48x48.ico" | absURL }}">
diff --git a/layouts/partials/footer-v2.html b/layouts/partials/footer-v2.html
index f695a939..b52cbb7e 100644
--- a/layouts/partials/footer-v2.html
+++ b/layouts/partials/footer-v2.html
@@ -1,6 +1,6 @@
 <div class="footer-layout">
     <div class="footer-f5-trademark">
-        <img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
+        <img class="f5-logo-footer" src="{{ "images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
         <p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
     </div>
     <div class="footer-useful-links">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 4e099998..b6cb6766 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -3,7 +3,7 @@
     <div class="row align-items-center">
       <div class="col-md-6 d-md-flex">
         <img class="nginx-logo-footer" src="{{
-        "/images/icons/NGINX-Part-of-F5-horiz-all-white-525x208@2x.png" | absURL
+        "images/icons/NGINX-Part-of-F5-horiz-all-white-525x208@2x.png" | absURL
         }}"/>
       </div>
     </div>
@@ -236,7 +236,7 @@
       <div class="text-center">
         <p>
           <a href="https://www.f5.com/"
-            ><img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" |
+            ><img class="f5-logo-footer" src="{{ "images/icons/Logo_F5.svg" |
             absURL }}" alt="F5 logo"></a
           >
           ©2025 F5, Inc. All rights reserved.
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d004a7cb..12276f6f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -27,7 +27,7 @@
 
     <div class="header__logo">
         <a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
-            <img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
+            <img class="header__img" src="{{ "images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
         </a>
     </div>
 
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index b98fd8ca..41ceac7c 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -24,14 +24,14 @@
 {{ end }}
 
 <meta property="article:publisher" content="https://www.facebook.com/nginxinc" />
-<meta property="og:image" content="{{ "/images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
+<meta property="og:image" content="{{ "images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
 <meta property="og:image:width" content="500" />
 <meta property="og:image:height" content="300" />
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:description" content="{{.Page.Description}}" />
 <meta name="twitter:title" content="{{.Page.Title}}" />
 <meta name="twitter:site" content="@nginx" />
-<meta name="twitter:image" content="{{ "/images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
+<meta name="twitter:image" content="{{ "images/icons/NGINX-Docs-new-docs-dark-1200x630.png" | absURL }}" />
 <meta name="twitter:creator" content="@nginx" />
 {{ if .Page.Lastmod }}
 <meta http-equiv="last-modified" content="{{ .Page.Lastmod.Format "02/01/2006" }}" />
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index aa7b07eb..aa8278ad 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -41,7 +41,7 @@
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
-          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}">
+          <img class="card-brand-icon" src="images/icons/{{ $brandIcon }}">
         {{- else if $icon -}}
           {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}

From dc08184db5fe14cc94dd087d7d98bf521f791ead Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Wed, 3 Sep 2025 14:37:56 +0100
Subject: [PATCH 7/8] Header: Add buttons post merge

---
 layouts/partials/header.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 18f95d68..640e8a58 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -9,6 +9,14 @@
               <label class="header__control--sidebar--open" for="sidebar-panel">
               {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
               </label>
+              <button id="theme-toggle" class="header__control--theme" role="button" aria-label="Toggle theme">
+                <span class="header__control--theme--light">
+                    {{ partial "lucide" (dict "context" . "icon" "sun") }}
+                </span>
+                <span class="header__control--theme--dark">
+                    {{ partial "lucide" (dict "context" . "icon" "moon") }}
+                </span>
+            </button>
           </div>
           {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
           <!-- Mobile button -->

From 90b360f71e7e895dc0b086d60891bf7b9cdc3669 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Wed, 3 Sep 2025 17:12:17 +0100
Subject: [PATCH 8/8] Callout: Add dark mode dash border

---
 assets/css/v2/style.css | 57 ++++++++++++++++++++++++++++-------------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index dd926c62..fc782c51 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -139,20 +139,42 @@ textarea:not([rows]) {
 
 /* card */
 :root[data-theme="light"] {
-  --card-border: 1px solid oklch(var(--color-codeblock-border));
+  --card-border: 1px solid var(--color-codeblock-border);
   --card-shadow: 3px 3px 0px oklch(var(--color-shadow));
-  --blockquote-border: 1px solid oklch(var(--color-codeblock-border));
+
+  --blockquote-border: 1px solid var(--color-codeblock-border);
   --blockquote-shadow: 3px 3px 0px oklch(var(--color-shadow));
+
   --icon-light: block;
   --icon-dark: none;
 }
 :root[data-theme="dark"] {
-  --card-border: 1px dashed oklch(var(--color-codeblock-border));
-  --card-shadow: 0;
-  --blockquote-border: 1px dashed oklch(var(--color-codeblock-border));
-  --blockquote-shadow: 0;
+  --card-border: 1px solid var(--color-codeblock-border);
+  --card-shadow: none;
+
+  --blockquote-border: 1px solid var(--color-codeblock-border);
+  --blockquote-shadow: none;
+
   --icon-dark: block;
   --icon-light: none;
+
+  blockquote.note::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: -4px;
+    bottom: -4px;
+    pointer-events: none;
+    z-index: -1;
+    outline: 1px dashed var(--color-codeblock-border);
+    outline-offset: -1px;
+  }
+
+  blockquote.note {
+    outline: 3px solid var(--color-background);
+    outline-offset: -4px;
+  }
 }
 
 :root {
@@ -229,7 +251,7 @@ textarea:not([rows]) {
     oklch(0.98 0 0),
     oklch(0.02 0 0)
   );
-  --color-codeblock-border: 0.63 0 0;
+  --color-codeblock-border: light-dark(oklch(0.63 0 0), oklch(0.9821 0 0));
   --color-codeblock-background: 1 0 0;
   --color-codeblock-highlight: 0.99 0.0479 105.97;
   --codeblock-comment-diff: 2rem;
@@ -567,7 +589,7 @@ ol li:last-child {
       width: 100%;
 
       &::part(wrapper) {
-        border-color: oklch(var(--color-codeblock-border));
+        border-color: var(--color-codeblock-border);
       }
 
       &::part(submit-button-wrapper) {
@@ -581,7 +603,7 @@ ol li:last-child {
       }
 
       &::part(suggestions-wrapper) {
-        border-color: oklch(var(--color-codeblock-border));
+        border-color: var(--color-codeblock-border);
       }
     }
   }
@@ -1485,7 +1507,7 @@ atomic-search-interface#search-standalone-header {
 
   .header-search-box {
     &::part(wrapper) {
-      border-color: oklch(var(--color-codeblock-border));
+      border-color: var(--color-codeblock-border);
       border-radius: 0;
     }
 
@@ -1496,7 +1518,7 @@ atomic-search-interface#search-standalone-header {
 
     &::part(suggestions-wrapper) {
       border-radius: 0;
-      border-color: oklch(var(--color-codeblock-border));
+      border-color: var(--color-codeblock-border);
       width: calc(100% + 2px);
       margin-inline-start: -1px;
     }
@@ -2050,14 +2072,12 @@ table hr {
 /* MARK: Callouts
 */
 blockquote {
-  /*1px solid var(--color-foreground)*/
+  background-color: var(--color-background);
   border: var(--blockquote-border);
   padding: 1rem;
   height: fit-content;
   margin: var(--margin-callout); /* Expand into the gutter */
 
-  /* solid 3px drop shadow */
-  /*3px 3px 0px oklch(var(--color-shadow))*/
   box-shadow: var(--blockquote-shadow);
 
   &:has(.code-block) .code-block:not(:has(.single-line)) {
@@ -2073,6 +2093,7 @@ blockquote {
 blockquote.note {
   position: relative;
   z-index: 0;
+  overflow: visible;
 }
 
 blockquote.note:before {
@@ -2354,9 +2375,9 @@ a:has(code:not(pre code)) {
     display: inline-block;
     height: 1.5rem;
     color: var(--code-color);
-    border-top: 1px solid oklch(var(--color-codeblock-border));
-    border-left: 1px solid oklch(var(--color-codeblock-border));
-    border-right: 1px solid oklch(var(--color-codeblock-border));
+    border-top: 1px solid var(--color-codeblock-border);
+    border-left: 1px solid var(--color-codeblock-border);
+    border-right: 1px solid var(--color-codeblock-border);
     text-transform: uppercase;
     padding: 0.15rem 0.5rem;
     font-size: 0.75rem;
@@ -2399,7 +2420,7 @@ a:has(code:not(pre code)) {
     }
 
     .code-content {
-      border: 1px solid oklch(var(--color-codeblock-border));
+      border: 1px solid var(--color-codeblock-border);
       overflow-x: scroll;
       scrollbar-width: none;
       line-height: 150%;