var(--plot-background) (#1513)

Author: mbostock

docs/.vitepress/theme/custom.css

@@ -40,6 +40,7 @@
 
 .vp-doc .plot,
 .vp-doc .plot-ramp {
+  --plot-background: var(--vp-c-bg); /* TODO -alt for tip? */
   overflow: visible;
   position: relative;
   z-index: 1;
@@ -70,20 +71,6 @@
   text-decoration: initial;
 }
 
-:root [aria-label="tip"][fill="white"],
-:root [aria-label="tip"] [fill="white"] {
-  fill: var(--vp-c-bg-alt);
-}
-
-:root.dark marker[stroke="white"],
-:root.dark [aria-label^="crosshair"][stroke="white"] {
-  stroke: var(--vp-c-bg);
-}
-
-:root.dark marker[fill="white"] {
-  fill: var(--vp-c-bg);
-}
-
 .vp-doc :not(pre) > code {
   line-height: 1.5;
 }

src/marker.js

@@ -61,7 +61,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();
@@ -72,7 +72,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))

src/marks/tree.js

@@ -24,7 +24,7 @@ export function tree(
     markerEnd = marker,
     dot: dotDot = isNoneish(markerStart) && isNoneish(markerEnd),
     text: textText = "node:name",
-    textStroke = "white",
+    textStroke = "var(--plot-background)",
     title = "node:path",
     dx,
     dy,

src/plot.js

@@ -258,6 +258,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;