diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 1f64dcb342..2b5f70e8e9 100644 --- a/docs/.vitepress/theme/custom.css +++ b/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; } diff --git a/src/marker.js b/src/marker.js index 4092bf7b04..2d682a9778 100644 --- a/src/marker.js +++ b/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)) diff --git a/src/marks/crosshair.js b/src/marks/crosshair.js index 6313771eb6..0f155cb81f 100644 --- a/src/marks/crosshair.js +++ b/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; diff --git a/src/marks/tip.js b/src/marks/tip.js index e23942c69e..071809aae0 100644 --- a/src/marks/tip.js +++ b/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" }; diff --git a/src/marks/tree.js b/src/marks/tree.js index a58238fc7f..94f829ff2e 100644 --- a/src/marks/tree.js +++ b/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, diff --git a/src/plot.js b/src/plot.js index f8129e2ba6..d6f85da9a3 100644 --- a/src/plot.js +++ b/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; diff --git a/test/output/aaplBollinger.svg b/test/output/aaplBollinger.svg index ebe36d4c9c..678f30e8ce 100644 --- a/test/output/aaplBollinger.svg +++ b/test/output/aaplBollinger.svg @@ -1,6 +1,7 @@

A subtitle about body_mass_g

A fancy title about penguins

A fancy subtitle