fixes for dark mode

Author: Fil

test/plots/athletes-sex-weight.js

@@ -8,6 +8,7 @@ export default async function() {
       grid: true
     },
     marks: [
+      Plot.rectY(athletes, Plot.binX({y2: "count"}, {x: "weight", fill: "white", z: "sex", thresholds: 30})),
       Plot.rectY(athletes, Plot.binX({y2: "count"}, {x: "weight", fill: "sex", mixBlendMode: "multiply", thresholds: 30})),
       Plot.ruleY([0])
     ]

test/plots/cars-parcoords.js

@@ -36,8 +36,8 @@ export default async function() {
     },
     marks: [
       Plot.ruleY(dimensions),
-      Plot.line(data, {...xy, z: "name", stroke: "#444", strokeWidth: 0.5, strokeOpacity: 0.5}),
-      Plot.text(ticks, {...xy, fill: null, stroke: "white", strokeWidth: 3, strokeLinejoin: "round", text: "value"}),
+      Plot.line(data, {...xy, z: "name", stroke: "currentColor", colorFilter: "invert(40%)", strokeWidth: 0.5, strokeOpacity: 0.5}),
+      Plot.text(ticks, {...xy, fill: null, stroke: "currentColor", colorFilter: "invert(1)",strokeWidth: 3, strokeLinejoin: "round", text: "value"}),
       Plot.text(ticks, {...xy, text: "value"})
     ]
   });

test/plots/metro-unemployment-ridgeline.js

@@ -20,7 +20,7 @@ export default async function() {
       marginLeft: 300
     },
     marks: [
-      Plot.areaY(data, {x: "date", y: "unemployment", fill: "#eee"}),
+      Plot.areaY(data, {x: "date", y: "unemployment", fill: "currentColor", colorFilter: "invert(72%) brightness(130%)"}),
       Plot.line(data, {x: "date", y: "unemployment"}),
       Plot.ruleY([0])
     ]

test/plots/penguin-culmen-array.js

@@ -19,7 +19,8 @@ export default async function() {
         x: culmen_depth_mm,
         y: culmen_length_mm,
         r: 2,
-        fill: "#ddd"
+        fill: "currentColor",
+        colorFilter: "invert(0.75) brightness(1.1)"
       }),
       Plot.dot(data, {
         x: culmen_depth_mm,

test/plots/penguin-culmen.js

@@ -18,7 +18,8 @@ export default async function() {
         x: "culmen_depth_mm",
         y: "culmen_length_mm",
         r: 2,
-        fill: "#ddd"
+        fill: "currentColor",
+        colorFilter: "invert(0.75) brightness(1.1)"
       }),
       Plot.dot(data, {
         x: "culmen_depth_mm",

test/plots/simpsons-ratings.js

@@ -27,6 +27,7 @@ export default async function() {
         x: "number_in_season",
         y: "season",
         text: d => d.imdb_rating == null ? null : d.imdb_rating.toFixed(1),
+        fill: "black",
         title: "title"
       })
     ]

test/plots/us-presidential-election-2020.js

@@ -35,7 +35,7 @@ ${[["Trump", d.results_trumpd], ["Biden", d.results_bidenj]]
   .sort(([, a], [, b]) => d3.descending(a, b))
   .map(([name, count]) => `${count.toLocaleString("en")} votes for ${name}`)
   .join("\n")}`,
-          stroke: "currentColor",
+          stroke: "black",
           strokeWidth: 0.5
         }
       )