Theme logo SVG currentColor attribute not effective

[SuperManito]

Context

Why can't we define them separately like the Palette attribute for media queries? But now it can be implemented through CSS, for example:

[data-md-color-scheme="default"] .md-logo img {
    content: url(/assets/images/logo-light.svg);
}
  
[data-md-color-scheme="slate"] .md-logo img {
    content: url(/assets/images/logo-dark.svg);
}

Bug description

Cannot switch to follow the theme

Related links

none

Reproduction

none

Steps to reproduce

none

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting. Since this is a customization request, I'm converting this to a discussion.

[SuperManito]

Not all logo pattern designs are suitable for display in both light and dark themed backgrounds. This is a very basic requirement. Just like using the built-in Icon component as a logo, it adapts the depth of the theme background through fill="currentColor".

[kamilkrzyskow]

Hello @SuperManito,
the currentColor refers to the current text color, and in both light and dark mode of the material theme, the header bezel has white text.
Also for the image to be able to access currentColor it needs to be included inline in the page, as the img tag renders it as is without CSS access.

To include the SVG inline you'd use the icon config setting with the logo key:
https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#site-icons

The icon fetches the image from .icons directory in the theme, so to add your own you'd use the theme extension with custom_dir:
https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme

Lastly, since the bezel always has white text instead of using the fill="currentColor" use style="fill: var(--md-default-bg-color)" or --md-typeset-color to match the page background or text color.

So there is a possibility to get it working using a single SVG file, the setup simply needs to be adjusted to the theme ✌️

Example:
8141-material.zip

[SuperManito]

Hello @SuperManito, the currentColor refers to the current text color, and in both light and dark mode of the material theme, the header bezel has white text. Also for the image to be able to access currentColor it needs to be included inline in the page, as the img tag renders it as is without CSS access.

To include the SVG inline you'd use the icon config setting with the logo key: https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#site-icons

The icon fetches the image from .icons directory in the theme, so to add your own you'd use the theme extension with custom_dir: https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme

Lastly, since the bezel always has white text instead of using the fill="currentColor" use style="fill: var(--md-default-bg-color)" or --md-typeset-color to match the page background or text color.

So there is a possibility to get it working using a single SVG file, the setup simply needs to be adjusted to the theme ✌️

Example: 8141-material.zip

I know this method. I just feel that the author did not consider this issue.