Different Logo-Icon for Dark Mode and Light Mode

[SimLowSpec]

Hi squidfunk,
first of all: I am a big fan, your work is awesome!

I am facing the challenge to use a different logo image for dark mode and light mode. Unfortunately, I don't have a single-colored svg, so this approach here, won't work for me.
I also tried to override the logo.html but I don't know the syntax on how to decide whether I am currently in dark mode or not, so the only thing I managed to override was using the same icon for light and dark mode.
Can you maybe give me a hint: How can I use a diffent png for the theme "default" and for the theme "slate" as logo?
Thank you in advance!
Simon

[bradumbaugh]

Hi @SimLowSpec, I wonder if this discussion might help you?

[SimLowSpec]

Hi @bradumbaugh ,
no, this doesn't help since it is the discussion that I referenced in my question. I don't have single colored svgs...

[bradumbaugh]

Oh, I'm sorry, @SimLowSpec , I don't how how I missed that link! Still, though, that thread contains this comment:

Note that using this approach, you cannot change multiple colors. For that to work, you'd have to add two logos and toggle the display property dependent on the theme mode using some extra CSS.

I think this might look something like this (didn't test):

mkdocs.yml:

theme:
  logo_dark_mode: assets/logo-dark-mode.svg
  logo_light_mode: assets/logo-light-mode.svg
palette:
  - media: "(prefers-color-scheme: light)"
    scheme: light-mode
    toggle:
      icon: material/toggle-switch-off-outline
      name: Switch to dark mode
  - media: "(prefers-color-scheme: dark)"
    scheme: dark-mode
    toggle:
      icon: material/toggle-switch
      name: Switch to light mode

logo.html:

<img id="logo_light_mode" src="{{ config.theme.logo_light_mode | url }}" alt="logo">
<img id="logo_dark_mode" src="{{ config.theme.logo_dark_mode | url }}" alt="logo">

extra.css:

#logo_light_mode {
    display: var(--md-footer-logo-white);
}

#logo_dark_mode {
    display: var(--md-footer-logo-dark-mode);
}

[data-md-color-scheme="light-mode"] {
    --md-footer-logo-dark-mode:         none;
    --md-footer-logo-light-mode:         block;
}

[data-md-color-scheme="dark-mode"] {
    --md-footer-logo-dark-mode:         none;
    --md-footer-logo-light-mode:         block;
}

[SimLowSpec]

Hi @bradumbaugh,

thank you for your help. I was able to solve it, but for future reference, you had two small mistakes in your css:

It has to look like that:

#logo_light_mode {
    display: var(--md-footer-logo-light-mode);
}

#logo_dark_mode {
    display: var(--md-footer-logo-dark-mode);
}

[data-md-color-scheme="light-mode"] {
    --md-footer-logo-dark-mode:         none;
    --md-footer-logo-light-mode:         block;
}

[data-md-color-scheme="dark-mode"] {
    --md-footer-logo-dark-mode:         block;
    --md-footer-logo-light-mode:         none;
}

The name of your variable is --md-footer-logo-light-mode and you have to switch the block and none assignments.
Again, thank you for your help!

[chintanp]

@SimLowSpec does the above approach work if we have png instead of svg logos? The logo doesnt seem to be taking for me with the above approach, do we need to define the new "logo.html" somewhere in the mkdocs.yml as well?

[SimLowSpec]

I assume it will work with pngs as well. We have two relevant modifications for the logos:

1. mkdocs.yml:

[...]
theme:
 logo_dark_mode: 'images/favicon.svg'
 logo_light_mode: 'images/logo-icon.svg'
[...]

2. logo.html in the overrides\partials\ folder:

<img id="logo_dark_mode" src="{{ config.theme.logo_dark_mode | url }}" alt="logo">
<img id="logo_light_mode" src="{{ config.theme.logo_light_mode | url }}" alt="logo">