Get status theme mode realtime

[ghost]

I have an image with a white background, which looks off on docusaurus dark theme, so I want to detect when the user changes theme so I use a different image.

[slorber]

Hi,

You'd rather remove the background of the image, or use 2 images but only show one according to current theme, using CSS instead of JS.

Using JS, it is not possible to know ahead of time (on the server/node/SSR process) what will be the theme of the user, so we can't choose between one image and another and would have to make a choice. If we show the white bg image on the static output, and then on hydration (js/react loaded in browser) show the black bg image, it would create jank, so you should avoid trying to do conditional image rendering based on theme using JS. You can do this with CSS however, because a theme class is added to the page even before the page paint, so it wouldn't create jank.

[jumpersdevice]

Hello,

Can you help me achieve this in CSS? Maybe do you have an example? I'm trying to do this in an MD, i have 2 images one for each theme but i can't seem to find how to do this and show the correct one. Thank you

[slorber]

see #3683 (comment)