Light
Dark
System
Ask  Question

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!
user
Michael 2 months ago
Bootstrap 5 Metronic
5 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

S
Sean Author2 months ago
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.
user
Michael 2 months ago
Thanks Sean, that page answers all my questions!
S
Sean Author2 months ago
Glad to hear that happy If you need any further assistance please let us know.

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
user
Michael 2 months ago
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"
S
Sean Author2 months ago
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.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle