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

Author: mbostock

docs/.vitepress/theme/custom.css

@@ -40,11 +40,16 @@
 
 .vp-doc .plot,
 .vp-doc .plot-ramp {
+  --plot-background: var(--vp-c-bg);
   overflow: visible;
   position: relative;
   z-index: 1;
 }
 
+.vp-doc .plot [aria-label="tip"] {
+  --plot-background: var(--vp-c-bg-alt);
+}
+
 .vp-doc .plot-figure {
   margin: 16px 0 0;
 }
@@ -70,20 +75,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/crosshair.js

@@ -85,7 +85,7 @@ function textOptions(k, pointerOptions, options) {
     color = "currentColor",
     textFill: fill = color,
     textFillOpacity: fillOpacity,
-    textStroke: stroke = "white",
+    textStroke: stroke = "var(--plot-background)",
     textStrokeOpacity: strokeOpacity,
     textStrokeWidth: strokeWidth = 5
   } = options;

src/marks/tip.js

@@ -14,7 +14,7 @@ import {cut, clipper, splitter, maybeTextOverflow} from "./text.js";
 
 const defaults = {
   ariaLabel: "tip",
-  fill: "white",
+  fill: "var(--plot-background)",
   stroke: "currentColor"
 };
 

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;