Dark/light images in MD

[jumpersdevice]

Hello,

Tried discord, search and couldn't find anything or get anyone to reply me so I though i'd post here. Can anybody explain how you use a dark image in an MD when the theme is switched to dark and automatically switch to a light version of that image when the theme is set to light?

Thanks

[slorber]

Hi,

This problem is not specific to docusaurus but is related to dark mode support in general for server-rendered apps.
On static output page, you need to choose one image URL or the other, but when page is loaded by the browser, you do not want this image to be replaced by the other variant, to avoid FOUC.

• You can add a non-alpha opaque background to your image
• You can try to convert it to svg and read css variables of the theme to color it
• You can append 2 images in the html, and use CSS queries to display one or the other
• You can render the image only on the client, based on theme, with the BrowserOnly docusaurus component

[slorber]

Example using CSS to conditionnally display one of 2 images according to current theme:

html[data-theme='dark'] img.light {
   display: none;
}

html[data-theme='light'] img.dark {
   display: none;
}

This is pseudo-code, can't guarantee it will work but it's worth trying