How to set a white background partially for a diagram in a note?

Help
1

Hi all,

I set a dark theme for my Obsidian notes.

I have just pasted a diagram into my note but many details disappeared due to the dark background, so I wander if I can partially set a white background for showing up the details of that diagram?

Thanks for any kinds of help!

2

I don’t know the details of your situation, but did you paste the PNG image into a note? If so, this is probably caused by a transparent background color for that image and a dark text color. The dark color of Obsidian is showing through and making the diagram difficult to read.

The simple solution, if my guess is correct, is to convert the image(diagram) from PNG to JPG. JPG only handles non-transparent image data, so you can replace the transparent background of the PNG with a white color.

1 Like
3

Thanks snowynest for your comments!

so am I right that there are no ways to show up a png image with transparent background “directly”?

Rgds,

4

This CSS snippet should works fine. But it always makes the background color of all images white. (I have no idea how to switch the CSS for each image…)

.image-embed.is-loaded {
    background-color: white;
}
2 Likes
5

I’m thinking you’ve got the following options:

  • Fix the image to not have a transparent background. Can be done in image editors
  • change the background color using CSS, which can be done in a multitude of ways:
    • Globally, affecting all images, like in previous post
    • For a given file, using cssClass in the frontmatter. This would affect all images in that file
    • Some auto class markup by a plugin like the one by LilaRest, which then would affect just that image
    • Possibly by using some alternate “display” image markup, which allows for it to be selected in CSS, and thusly will affect only that image

I can see if I can write up an example of that last one later today, if not someone else does it.

3 Likes
6

Something like:

.image-embed.is-loaded img[alt*="white"] {
    background-color: white;
}

written in the note as:

![[3D.png|white]]

![[3D.png]]

would work.

Screenshot 2023-04-24 at 18.32.12
Screenshot 2023-04-24 at 18.32.121430Ă—1552 127 KB

But, as we don’t know the details or have the source png, I think converting the image if it’s only one or two (as snowynest and holroy mentioned) would be the best bet :framed_picture:

4 Likes
7

HTML works:

<img src="file:///path/to/image/image.png" style="background-color:red;" />
1 Like
8

I didn’t mention html, since I feel it limits the usefullness when going cross platform and inclusion of other markdown within html tags. Although the latter is not very likely to happen using an image…

9

Yep. Hopefully good for the OP to have options to consider.

10

Thanks all for your great comments!

I will try first this method:

1 Like