New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
How to conditionally render different img in dark mode and light mode ?
im struggling to conditionally render 2 different images based on the metronic react dark/light modes
<CardContent className="flex justify-center">
<img src="/qr.svg" alt="QR code light mode" className="size-28" />
</CardContent>
heres a code snippet for example how can i have a ternary for example to display a qr-dark.svg for example
does metronic provide a global state for light / dark mode ?
Replies (1)
Hi,
You can use Tailwind variants for light and dark mode as shown below:
<img src="/qr.svg" alt="QR code dark mode" className="hidden dark:inline-block size-28" />
<img src="/qr.svg" alt="QR code light mode" className="inline-block dark:hidden" />Regards,
Sean
