diff --git a/_static/devguide_overrides.css b/_static/devguide_overrides.css
index 2661c6810..625a9dda2 100644
--- a/_static/devguide_overrides.css
+++ b/_static/devguide_overrides.css
@@ -6,34 +6,6 @@
     height: 110px;
 }
 
-/* Release cycle chart */
-.release-cycle-chart .release-cycle-year-line {
-    stroke: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-year-text {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-today-line {
-    stroke: var(--color-brand-primary);
-}
-
-.release-cycle-chart .release-cycle-row-shade {
-    fill: var(--color-background-item);
-}
-
-.release-cycle-chart .release-cycle-version-label {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
-    /* and FG when it's not in a blob */
-    fill: var(--color-foreground-primary);
-}
-
 .good pre {
   border-left: 3px solid rgba(74, 182, 93, 1);
 }
diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 702a8cf18..9f23814a9 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -7,93 +7,99 @@
     <style>
         /* Embedded styles for standalone viewing */
         .release-cycle-chart {
-            font-family: Arial, sans-serif;
+            color-scheme: light;
+
+            {# Copy vars from Furo theme if present #}
+            {% for varname, default in {
+                'color-foreground-primary': 'light-dark(#333, #fff)',
+                'color-background-primary': 'light-dark(#fff, #333)',
+                'color-brand-primary': '#4B8BBE',
+                'color-background-item': '#e0e0e0',
+            }.items() %}
+                --svg-{{varname}}: var(--{{varname}}, {{default}});
+            {% endfor %}
+
+            font-family: var(
+                --font-stack,
+                -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+                Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
             width: 100%;
+
+            --blob-border-width: 1.6px;
+        }
+        .background {
+            fill: var(--svg-color-background-primary);
         }
         .release-cycle-year-line {
-            stroke: #333;
+            stroke: var(--svg-color-foreground-primary);
             stroke-width: 0.8px;
             opacity: 75%;
         }
-        .release-cycle-year-text {
-            fill: #333;
-        }
         .release-cycle-today-line {
-            stroke: #4B8BBE;
-            stroke-width: 1.6px;
+            stroke: var(--svg-color-brand-primary);
+            stroke-width: var(--blob-border-width);
         }
         .release-cycle-row-shade {
-            fill: #e0e0e0;
+            fill: var(--svg-color-background-item);
             opacity: 50%;
         }
-        .release-cycle-version-label {
-            fill: #333;
-        }
         .release-cycle-blob {
-            stroke-width: 1.6px;
+            stroke-width: var(--blob-border-width);
         }
-        .release-cycle-blob-label {
-            /* white looks good on both light and dark */
-            fill: white;
+        .text-main {
+            fill: var(--svg-color-foreground-primary);
+
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security,
+            &amp;.release-cycle-status-bugfix {
+                fill: black;
+            }
         }
-        .release-cycle-blob-label.release-cycle-status-security,
-        .release-cycle-blob-label.release-cycle-status-bugfix {
-            /* but use black to improve contrast for lighter backgrounds */
-            fill: black;
+        .text-outline {
+            /* an outline of the background color, in case it's not set
+            correctly */
+            fill: transparent;
+            stroke: var(--svg-color-background-primary);
+            stroke-width: var(--blob-border-width);
+
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security,
+            &amp;.release-cycle-status-bugfix {
+                stroke: var(--status-bg-color);
+            }
         }
-        .release-cycle-blob-label.release-cycle-status-end-of-life,
-        .release-cycle-blob-label.release-cycle-status-prerelease,
-        .release-cycle-blob-label.release-cycle-status-feature {
-            fill: #333;
+        .release-cycle-status-end-of-life {
+            --status-bg-color: #DD2200;
+            --status-border-color: #FF8888;
         }
-        .release-cycle-status-end-of-life .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-end-of-life {
-            fill: #DD2200;
-            stroke: #FF8888;
+        .release-cycle-status-security {
+            --status-bg-color: #FFDD44;
+            --status-border-color: #FF8800;
         }
-        .release-cycle-status-security .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-security {
-            fill: #FFDD44;
-            stroke: transparent;
+        .release-cycle-status-bugfix {
+            --status-bg-color: #00DD22;
+            --status-border-color: #008844;
         }
-        .release-cycle-status-bugfix .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-bugfix {
-            fill: #00DD22;
-            stroke: transparent;
+        .release-cycle-status-prerelease {
+            --status-bg-color: teal;
+            --status-border-color: darkgreen;
         }
-        .release-cycle-status-prerelease .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-prerelease {
-            fill: teal;
-            stroke: transparent;
+        .release-cycle-status-feature {
+            --status-bg-color: #2222EE;
+            --status-border-color: #008888;
         }
-        .release-cycle-status-feature .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-feature {
-            fill: #2222EE;
+        .release-cycle-blob {
+            fill: var(--status-bg-color);
             stroke: transparent;
         }
-        .release-cycle-blob-full.release-cycle-status-end-of-life {
-            fill: #DD2200;
-            stroke: #FF8888;
-        }
-        .release-cycle-border.release-cycle-status-security {
-            fill: transparent;
-            stroke: #FF8800;
-            stroke-width: 1.6px;
-        }
-        .release-cycle-border.release-cycle-status-bugfix {
-            fill: transparent;
-            stroke: #008844;
-            stroke-width: 1.6px;
+        .release-cycle-blob-full {
+            fill: var(--status-bg-color);
+            stroke: var(--status-border-color);
         }
-        .release-cycle-border.release-cycle-status-prerelease {
+        .release-cycle-border {
             fill: transparent;
-            stroke: darkgreen;
-            stroke-width: 1.6px;
-        }
-        .release-cycle-border.release-cycle-status-feature {
-            fill: transparent;
-            stroke: #008888;
-            stroke-width: 1.6px;
+            stroke: var(--status-border-color);
+            stroke-width: var(--blob-border-width);
         }
     </style>
     <defs>
@@ -103,9 +109,16 @@
         </linearGradient>
     </defs>
 
+    <rect
+        class="background"
+        x="0"
+        y="0"
+        width="{{ diagram_width }}"
+        height="{{ diagram_height }}"
+    />
+
     {% for version in versions %}
         {% set y = version.y * line_height %}
-
         {% if version.y % 2 %}
             <!-- Row shading -->
             <rect
@@ -120,7 +133,7 @@
 
     {% for year in years %}
         <text
-            class="release-cycle-year-text"
+            class="release-cycle-year-text text-main"
             x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
             y="{{ diagram_height - line_height }}"
             font-size="{{ SCALE * 0.75 }}"
@@ -166,7 +179,7 @@
     </mask>
 
     {% for version in versions %}
-        <!-- Colourful blob with a label. -->
+        <!-- Colourful blob. -->
 
         {% set top_y = version.y * line_height - 1 * SCALE %}
         {% set height = 1.25 * SCALE %}
@@ -174,8 +187,6 @@
         {% set end_x = date_to_x(version.end_of_life_date) %}
         {% set radius = 0.25 * SCALE %}
 
-        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
-
         <!-- bugfix/security blobs need to be split between the two phases.
             Draw the rectangle with two path elements instead.
             Thanks Claude.ai for the initial conversion.
@@ -243,32 +254,53 @@
                 mask="url(#release-cycle-mask-{{ id_key }})"
             />
         {% endif %}
+    {% endfor %}
+
+    <!-- A line for today -->
+    <line
+        class="release-cycle-today-line"
+        x1="{{ date_to_x(today) }}"
+        x2="{{ date_to_x(today) }}"
+        y1="0"
+        y2="{{ diagram_height - line_height }}"
+        font-size="{{ SCALE }}"
+    />
+
+    {% for version in versions %}
+        <!-- Label for colourful blob -->
+
+        {% set start_x = date_to_x(version.first_release_date) %}
+        {% set end_x = date_to_x(version.end_of_life_date) %}
+        {% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min)  %}
+        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
 
         <!-- Add text before/after/inside the blob -->
-        <text
-            class="release-cycle-blob-label release-cycle-status-{{ version.status }}"
-            font-size="{{ SCALE * 0.75 }}"
-            y="{{ small_text_y }}"
-            {% if version.status == "bugfix" %}
-                x="{{ (start_x + middle_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "security" %}
-                x="{{ (middle_x + end_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "end-of-life" %}
-                x="{{ end_x + (0.25 * SCALE) }}"
-                text-anchor="start"
-            {% else %}
-                x="{{ start_x - (0.25 * SCALE) }}"
-                text-anchor="end"
-            {% endif %}
-        >
-            {{ version.status }}
-        </text>
+        {% for cls in ('text-outline', 'text-main') %}
+            <text
+                class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
+                font-size="{{ SCALE * 0.75 }}"
+                y="{{ small_text_y }}"
+                {% if version.status == "bugfix" %}
+                    x="{{ (start_x + middle_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "security" %}
+                    x="{{ (middle_x + end_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "end-of-life" %}
+                    x="{{ end_x + (0.25 * SCALE) }}"
+                    text-anchor="start"
+                {% else %}
+                    x="{{ start_x - (0.25 * SCALE) }}"
+                    text-anchor="end"
+                {% endif %}
+            >
+                {{ version.status }}
+            </text>
+        {% endfor %}
 
         <!-- Legend on the left -->
         <text
-            class="release-cycle-version-label"
+            class="release-cycle-version-label text-main"
             x="{{ 0.5 * SCALE }}"
             y="{{ version.y * line_height }}"
             font-size="{{ SCALE }}"
@@ -276,14 +308,4 @@
             Python {{ version.key }}
         </text>
     {% endfor %}
-
-    <!-- A line for today -->
-    <line
-        class="release-cycle-today-line"
-        x1="{{ date_to_x(today) }}"
-        x2="{{ date_to_x(today) }}"
-        y1="0"
-        y2="{{ diagram_height - line_height }}"
-        font-size="{{ SCALE }}"
-    />
 </svg>