observablehq · mbostock · May 1, 2023 · Apr 30, 2023
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -23,12 +23,8 @@
   color: var(--vp-c-text-2);
 }
 
-:root.dark marker[stroke="white"] {
-  stroke: var(--vp-c-bg);
-}
-
-:root.dark marker[fill="white"] {
-  fill: var(--vp-c-bg);
+.vp-doc .plot {
+  --plot-background: var(--vp-c-bg);
 }
 
 .vp-doc :not(pre) > code {

diff --git a/src/marker.js b/src/marker.js
@@ -58,7 +58,7 @@ function markerCircleFill(color, context) {
     .attr("markerWidth", 6.67)
     .attr("markerHeight", 6.67)
     .attr("fill", color)
-    .attr("stroke", "white")
+    .attr("stroke", "var(--plot-background)")
     .attr("stroke-width", 1.5)
     .call((marker) => marker.append("circle").attr("r", 3))
     .node();
@@ -69,7 +69,7 @@ function markerCircleStroke(color, context) {
     .attr("viewBox", "-5 -5 10 10")
     .attr("markerWidth", 6.67)
     .attr("markerHeight", 6.67)
-    .attr("fill", "white")
+    .attr("fill", "var(--plot-background)")
     .attr("stroke", color)
     .attr("stroke-width", 1.5)
     .call((marker) => marker.append("circle").attr("r", 3))

diff --git a/src/marks/tree.js b/src/marks/tree.js
@@ -22,7 +22,7 @@ export function tree(data, options = {}) {
     markerEnd = marker,
     dot: dotDot = isNoneish(markerStart) && isNoneish(markerEnd),
     text: textText = "node:name",
-    textStroke = "white",
+    textStroke = "var(--plot-background)",
     title = "node:path",
     dx,
     dy,

diff --git a/src/plot.js b/src/plot.js
@@ -219,6 +219,7 @@ export function plot(options = {}) {
       // Warning: if you edit this, change defaultClassName.
       svg.append("style").text(
         `.${className} {
+  --plot-background: white;
   display: block;
   height: auto;
   height: intrinsic;

diff --git a/test/output/aaplBollinger.svg b/test/output/aaplBollinger.svg
diff --git a/test/output/aaplBollingerGridInterval.svg b/test/output/aaplBollingerGridInterval.svg
diff --git a/test/output/aaplBollingerGridSpacing.svg b/test/output/aaplBollingerGridSpacing.svg
diff --git a/test/output/aaplCandlestick.svg b/test/output/aaplCandlestick.svg
diff --git a/test/output/aaplChangeVolume.svg b/test/output/aaplChangeVolume.svg
diff --git a/test/output/aaplClose.svg b/test/output/aaplClose.svg
diff --git a/test/output/aaplCloseDataTicks.svg b/test/output/aaplCloseDataTicks.svg
diff --git a/test/output/aaplCloseGridColor.svg b/test/output/aaplCloseGridColor.svg
diff --git a/test/output/aaplCloseGridInterval.svg b/test/output/aaplCloseGridInterval.svg
diff --git a/test/output/aaplCloseGridIntervalName.svg b/test/output/aaplCloseGridIntervalName.svg
diff --git a/test/output/aaplCloseGridIterable.svg b/test/output/aaplCloseGridIterable.svg
diff --git a/test/output/aaplCloseImplicitGrid.svg b/test/output/aaplCloseImplicitGrid.svg
diff --git a/test/output/aaplCloseUntyped.svg b/test/output/aaplCloseUntyped.svg
diff --git a/test/output/aaplFancyAxis.svg b/test/output/aaplFancyAxis.svg
diff --git a/test/output/aaplMonthly.svg b/test/output/aaplMonthly.svg
diff --git a/test/output/aaplVolume.svg b/test/output/aaplVolume.svg
diff --git a/test/output/aaplVolumeRect.svg b/test/output/aaplVolumeRect.svg
diff --git a/test/output/anscombeQuartet.svg b/test/output/anscombeQuartet.svg
diff --git a/test/output/armadillo.svg b/test/output/armadillo.svg
diff --git a/test/output/aspectRatioBand.svg b/test/output/aspectRatioBand.svg
diff --git a/test/output/aspectRatioLinear.svg b/test/output/aspectRatioLinear.svg
diff --git a/test/output/aspectRatioLog.svg b/test/output/aspectRatioLog.svg
diff --git a/test/output/aspectRatioPoint.svg b/test/output/aspectRatioPoint.svg
diff --git a/test/output/aspectRatioSqrt.svg b/test/output/aspectRatioSqrt.svg
diff --git a/test/output/athletesBinsColors.svg b/test/output/athletesBinsColors.svg
diff --git a/test/output/athletesBirthdays.svg b/test/output/athletesBirthdays.svg
diff --git a/test/output/athletesBoxingHeight.svg b/test/output/athletesBoxingHeight.svg
diff --git a/test/output/athletesHeightWeight.svg b/test/output/athletesHeightWeight.svg
diff --git a/test/output/athletesHeightWeightBin.svg b/test/output/athletesHeightWeightBin.svg
diff --git a/test/output/athletesHeightWeightBinStroke.svg b/test/output/athletesHeightWeightBinStroke.svg
diff --git a/test/output/athletesHeightWeightSex.svg b/test/output/athletesHeightWeightSex.svg
diff --git a/test/output/athletesHeightWeightSport.svg b/test/output/athletesHeightWeightSport.svg
diff --git a/test/output/athletesNationality.svg b/test/output/athletesNationality.svg
diff --git a/test/output/athletesSample.svg b/test/output/athletesSample.svg
diff --git a/test/output/athletesSampleFacet.svg b/test/output/athletesSampleFacet.svg
diff --git a/test/output/athletesSexWeight.svg b/test/output/athletesSexWeight.svg
diff --git a/test/output/athletesSortFacet.svg b/test/output/athletesSortFacet.svg
diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html
@@ -48,6 +48,7 @@
   </div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot {
+        --plot-background: white;
         display: block;
         height: auto;
         height: intrinsic;

diff --git a/test/output/athletesSortNullLimit.html b/test/output/athletesSortNullLimit.html
@@ -48,6 +48,7 @@
   </div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot {
+        --plot-background: white;
         display: block;
         height: auto;
         height: intrinsic;

diff --git a/test/output/athletesSortWeightLimit.svg b/test/output/athletesSortWeightLimit.svg
diff --git a/test/output/athletesSportSex.svg b/test/output/athletesSportSex.svg
diff --git a/test/output/athletesSportWeight.svg b/test/output/athletesSportWeight.svg
diff --git a/test/output/athletesWeight.svg b/test/output/athletesWeight.svg