diff --git a/assets/js/build_heatmap.js b/assets/js/build_heatmap.js
index 037ca29..d2bcab5 100644
--- a/assets/js/build_heatmap.js
+++ b/assets/js/build_heatmap.js
@@ -44,7 +44,7 @@ export function render(weeks, counts) {
   const svg = document.createElementNS(svgNS, "svg");
 
   const svgWidth = weeks.length * SHIFT + 30;
-  const svgHeight = SHIFT * 7 + 20;
+  const svgHeight = SHIFT * 7;
   svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
   svg.setAttribute("width", "100%");
 
diff --git a/layouts/partials/git-heatmap.html b/layouts/partials/git-heatmap.html
index 1a7ce96..ce619a1 100644
--- a/layouts/partials/git-heatmap.html
+++ b/layouts/partials/git-heatmap.html
@@ -3,13 +3,19 @@
 
 <style>
 :root {
-  --color-empty: {{ $p.color_empty }};
+  --color-empty: {{ $p.color_empty_dark }};
   --color-low:   {{ $p.color_low }};
   --color-mid:   {{ $p.color_mid }};
   --color-high:  {{ $p.color_high }};
 }
+@media (prefers-color-scheme: light) {
+    :root {
+      --color-empty: {{ $p.color_empty_light }};
+    }
+}
 #heatmap { overflow-x: auto; }
 #heatmap text { font-family: inherit; fill: currentColor; }
+#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
 #tooltip {
   position: fixed;
   background: #333;
@@ -33,5 +39,8 @@
     document.getElementById("heatmap").appendChild(svg);
     setupTooltips(svg);
 </script>
+{{ with $p.caption }}
+<p id="heatmap-caption"> {{ . | safeHTML }} </p>
+{{ end }}
 <div id="tooltip" class="hidden"></div>
-<div id="legend"></div>
+