is it possible to set global theme dark/light mode ?

Community Help
1

Is it possible to set global dark/light theme when using observablehq plots in other UI frameworks like svelte?

I have a custom theme switcher which sets the dark/light mode. In such case how do I change the plot’s theme to dark/light so that it matches the site’s current mode? And it would be great if there is a way to set the default theme to be used for light v/s dark mode.

2

Plot doesn’t have themes.

It supports dark mode as it defaults to currentColor which is (usually) black in light mode and white in dark mode, on a transparent background. In other words, there should be no need for adaptation to get it to work in both light and dark modes, like our documentation does.

In some cases, though, you need to be more intentional: for example, some of the color schemes do not work well in dark mode, so you might want to change the scheme based on the color. Also, sometimes you want to color something “like the background” (for instance, a text stroke), and you can’t use “white” anymore, but need to use something else, that depends on how dark mode is implemented (maybe var(--theme-background)).

(I’m currently working on better support for dark mode, so I welcome remarks and questions—with more details the better.)

3

You are right, plot does work in both dark/light mode. However the tips (tooltip on hover) does not work well. it is visible in light mode, but the background is set to white in both dark and light mode.

4

I don’t think it’s set to white directly. It’s supposed to be controlled by a css variable --plot-background which you can modify in dark mode.

5

I tried overriding the --plot-background but it is being set while the plot is rendered. I see the following css

:where(.plot-d6a7b5) {
–plot-background: white;
}

If I disable this using chrome inspector, the custom value set fro --plot-background is used.

6

try to give more specificity to your selector

7

Since this class .plot-d6a7b5 is dynamically generated is there a way of knowing this class name so that I can target it?

8

I don’t think you need to target it, you can just define

svg { --plot-background: red; }

or if you want to change this in tips only:

g[aria-label="tip"] { --plot-background: lightblue; }
9

Thanks. that worked!

10

I do have a related question. Most of the plot marker colors have good contrast with dark color, however one or two didn’t have good contrast and the same colors on light background do not have a good contrast. Is it possible to configure the color set that is used for the markers, lines or fills?

11

Almost everything in Plot is configurable, including color schemes. Can you share a screenshot of the colors that don’t have a good contrast?

12

Screenshot 2024-03-03 at 1.33.08 PM
Screenshot 2024-03-03 at 1.33.08 PM1674×948 54.7 KB

Notice the observation 1 (10.4) and last one 33.9 These two have low contrast with background.

13

Screenshot 2024-03-03 at 1.33.20 PM
Screenshot 2024-03-03 at 1.33.20 PM1674×948 54.1 KB

Notice colors for 21 to 24.5. 24.5 has least contrast.

I have not used true black and true white for the dark and light background and that would also contribute to the lower contrast, however at least the colors for 10.4 and 24.4 do seem to be low contrast on dark and light backgrounds respectively.

14

When using a continuous color scheme (such as turbo, which is here as the default scheme), it’s possible to restrict the scheme to a smaller interval, by setting e.g. range: [0.1, 0.9] in the color scale definition, to avoid being too close to the two extrema (0 and 1).

Plot.plot({
  style: "background: #444; color: white",
  color: {scheme: "turbo", range: [0.1, 0.9]},
  marks: [
    Plot.dot(cars, {
      x: "economy (mpg)",
      y: "displacement (cc)",
      stroke: "power (hp)",
      symbol: "cylinders"
    })
  ]
})
15

Awesome! thanks.