How to change global css with d3?

New To Observable
1

I am trying to change the background color of the fullscreen to white. The way to do it is mentioned in this answer and that is by adding

:fullscreen, ::backdrop {
    background-color: rgba(255,255,255,0);
}

to global CSS.

I can’t seem to figure out how to do this.

2

If fullscreen is triggered through the Observable UI, then the fullscreen element is outside of the scope of what you can target via CSS. In that case use a display-mode media query:

@media all and (display-mode: fullscreen) {
  body { background: red }
}

… But if you’re asking about inline styles: You can’t use pseudo selectors in inline CSS. Instead you’ll have to append a style element, for example

d3.select("head")
  .append("style")
  .text(`
    :fullscreen, ::backdrop {
        background-color: rgba(255,255,255,0);
    }
  `)
3

You were right that it’s out of CSS scope. I also tried including your solution to the but that didn’t help either.