vwkd•6mo ago

How to unset white background of SVG in Jupyter notebook?

I’ve got a Jupyter notebook with Deno kernel in VSCode that displays an SVG. The SVG has a forced white background which doesn’t play well with dark mode. Digging through the dev tools shows it’s caused by a rule referencing a wrapping div.

.svgContainerStyle svg {
  background-color: white;
}

.svgContainerStyle svg {
  background-color: white;
}

So, it can’t be the SVG itself. Maybe Deno? Maybe Jupyter fronted? Maybe some of their VSCode extensions? How can I unset the background color of the SVG?

2 Replies

Deno AI Helper•6mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the information you've provided, it seems like the issue is related to the CSS styling within the Jupyter notebook environment rather than Deno itself. If you have control over the CSS, you could try to override the background color of the SVG by setting it to none or transparent. You can add a new CSS rule in your notebook that targets the .svgContainerStyle svg selector and sets the background-color property to none.

.svgContainerStyle svg {
  background-color: none;
}

.svgContainerStyle svg {
  background-color: none;
}

Or, if you prefer to use transparent:

.svgContainerStyle svg {
  background-color: transparent;
}

.svgContainerStyle svg {
  background-color: transparent;
}

Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. It's possible that the Jupyter notebook environment or VSCode extensions may have specific ways to handle this, so you might want to explore their documentation or support channels for a more precise solution.

Helpful Links: Deno 1.37: Modern JavaScript in Jupyter Notebooks Jupyter Kernel for Deno | Deno Docs Parsing and Stringifying CSS | Deno Docs Using Visual Studio Code | Deno Docs

bartlomieju•6mo ago

Can you open an issue about it in Deno repo?