Tricky Dark/Light Mode Media Query Help Needed

[fabiofederici]

Working on Mintlify docs with responsive images/videos that switch between mobile/desktop and dark/light modes.

Current behavior:

• Desktop (lg+): Both light/dark videos working
• Mobile light: Image working
• Mobile dark: Image not working

Specifically struggling with the classes for the mobile dark mode image. The current combination (hidden dark:hidden dark:block w-full lg:dark:hidden) seems contradictory.

What's the correct class combination to show this image only on mobile dark mode?

<img className="block w-full lg:hidden dark:hidden" noZoom  src="" />

<img className="hidden dark:hidden dark:block w-full lg:dark:hidden" noZoom src="" />

<video autoPlay muted playsInline className="sm:hidden dark:sm:hidden hidden dark:md:hidden md:hidden dark:hidden lg:block w-full dark:lg:hidden aspect-video" src="" />

<video autoPlay muted playsInline className="sm:hidden dark:sm:hidden hidden dark:md:hidden md:hidden dark:block dark:lg:block w-full aspect-video" src="" />

[wongjn]

Try hidden dark:block w-full lg:dark:hidden.

[fabiofederici]

thanks for the fast response, unfortunately same behevior. Essentially I can't get the video on mobile to be hidden in dark mode. Will reach out to Mintlify, there might be some limitations.