plot legend fill color when embedded

I am extensively using the Plot library in one of my observablehq notebooks.

I wanted to embed some output from one of my notebooks within a blog I maintain.

I managed to do that using the runtime with JS method. It works great, you can see an example here.

In white mode, I have noticed there is only one problem: the legend colors in the final plot (source is this one). The three rectangles are black. I inspected and noticed this comes from a rule inherited from my wowchemy theme

svg {
	fill: currentColor;

This rule applies to the rectangle in the legend because they are treated differently from the rectangle in the main plot.

While in the plot, fill is forced (sorry as new user of this forum I can only put one image in this post so I can’t share with you the capture to show you that)

Is there warkarounds when defining plot colors to avoid this discrepancy ?

PS: Regarding dark mode, I noticed other discrepancies when forcing the plot background to be white using css rules like svg {background-color: white !important; color: black !important;} because <figure> is composed of two parts: main plot (embedded as<svg>) and legend (embedded as <div>). I guess this discrepancy is justified and since maintaining both white and dark themes is hard, I am okay with having a great white theme and a dark one which could be improved.

1 Like

I’ve promoted your account to the next level, you should be able to post an image now.

You might want to chime in on style the figure element? · Issue #397 · observablehq/plot · GitHub ; definitely something we have to address.