We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.

Custom CSS to add background to images

I have lots of PNG images of equations to be displayed inside my zettels; they're essentially black text on a transparent background.

On light themes all is fine but on dark themes the black text is practically invisible on the dark background of the page.

The first solution I tried is to substitute the transparent background with a solid color not too dark and not too bright so that it can adapt in both light and dark themes without being disturbing.
It works but it's a sort of compromise so I want to investigate the following alternative: use a custom CSS to add, only for dark themes, a background color to <img> tag boxes. That should solve my problem with equation images and should not have any impact on images that don't have any transparent zones.

Only problem is, I know almost nothing about CSS and so far my attempts failed miserably.
Is the described solution feasable? If so what custom CSS should I use?


  • Use the following code snippet. Replace "white" with whatever colour you like, it will replace the transparency with the respective colour!

    body.dark .CodeMirror img { background-color: white; }
  • That did the trick!
    Thanks fro your help.

  • You're welcome! :)

  • Could you also use invert() to reverse the image in dark mode? Something like

    body.dark .CodeMirror img { filter:invert(100%); }
  • Inverted RGB-colours normally end up with an infrared-like appearance :D I mean you could certainly do this, but I'm not sure it's what everyone needs :D

Sign In or Register to comment.