Dark Mode Image
Hey Guys,
I have a logo img with black font (eg: logo-default.png). How do I define the appropriate variable / css / whatever needs to be set to have a "dark mode" alternative for it (eg: logo-dark.png)?
Thanks in advance!
Replies (5)
Is it possible to set a class based on the mode / if its in dark mode?
For example, lets take this element:
<a class="nav-link btn btn-color-gray-600 btn-active-color-primary rounded-bottom-0" data-bs-toggle="tab" href="#kt_tabs-passports" role="tab" aria-selected="false" tabindex="-1">
<i class="fs-3 las la-passport"></i> Passaportes
</a>In light mode,
btn-color-gray-600 class / text color works perfectly. However, in dark mode - the users complain its too dark.Is it possible to do something like:
class="nav-link btn dark-mode-btn-color-gray-700 btn-color-gray-600 btn-active-color-primary rounded-bottom-0"
Hi,
The class-based mode setup is not supported since it will make the CSS size larger.
Instead,
you can set the mode for the element and its children by setting the theme mode attribute on the element:
<div data-bs-theme-mode="light">
....
</div>Regards.
Hi,
If you are using Metronic v8.1.x you can refer to Dark Mode Docs to set dark and light mode images
You can also refer to the logo in the layout.
Regards.
Thanks Sean, that page answers all my questions!
Glad to hear that 
If you need any further assistance please let us know.
