Changing image based on light and dark scheme selected

[glennlea1525]

I found this on a site using MKDocs for Material but so far I have been unsuccessful implementing it.

<figure markdown>
  ![Title](./assets/logo/logo-white.png#only-light){ width="400" }
  ![Title](./assets/logo/logo-inverted.png#only-dark){ width="400" } 
</figure>

I am aware of this requirement as I have custom colors (see below) but I do not know how to add it to the scheme:

[data-md-color-scheme="custom-light"] img[src$="#only-dark"],
[data-md-color-scheme="custom-light"] img[src$="#gh-dark-mode-only"] {
  display: none; /* Hide dark images in light mode */
}

from

• https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode-custom-light-scheme
  and
• https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode

I added the appropriate palette: section in mkdocs.yml:

palette:
    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: green
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

And added the appropriate color schemes (some colors deleted):

/* Custom Dryad Color Scheme */
[data-md-color-scheme="green"] {
    --md-typeset-a-color: #4051b5;
    --md-primary-fg-color: #FFFFFF;
    --md-primary-fg-color--light: #FFFFFF;
    --md-primary-fg-color--dark: #FFFFFF;
    --md-primary-bg-color: rgb(255, 255, 255);
    --md-default-bg-color: #FFFFFF;
    --md-default-fg-color--light: var(--dryad-green);
    --md-typeset-a-color: #4051b5;
    --md-primary-fg-color-dark: #30ae7d;
    --md-heading-color: rgb(236,236,236);
    --button-border: #393b3d;
}
/* Custom Slate Color Scheme */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #4051b5;
    --md-primary-fg-color--light: #FFFFFF;
    --md-primary-fg-color--dark: #FFFFFF;
    --md-primary-bg-color: rgb(30 33 41);
    --md-default-bg-color: rgb(30 33 41);
    --md-typeset-a-color: #4051b5;
    --md-primary-heading-color:  #ffffff;
    --md-typeset-a: var(--md-primary-fg-color);
    --md-nav-item-color: #ffffff;
    --md-heading-color: #0E0E10;
}

However, the result is the same image image logo-inverted.png displayed for both schemes when toggling light/dark.

I know I have done something wrong, but I cannot locate it.

Thanks in advance.

[kamilkrzyskow]

Hello @glennlea1525,
please provide a zip file with a more complete minimal reproduction. I tried to follow along with your explanation but I found myself guessing too much things.

I am aware of this requirement as I have custom colors (see below) but I do not know how to add it to the scheme:

So your custom scheme is green not custom-light. Also the provided custom scheme CSS is almost all white colors, so everything is white, and users can't see the buttons.

Here is an example with working images exclusion:

[data-md-color-scheme="green"] img[src$="#only-dark"],
[data-md-color-scheme="green"] img[src$="#gh-dark-mode-only"] {
  display: none; /* Hide dark images in light mode */
}

light-dark-images.zip

But IMO I had to guess too much about the config, so perhaps I missed something not mentioned.

[glennlea1525]

Hi @kamilkrzyskow I generated a zip file but it contains too much IP information. Any way to do this without including IP?

[kamilkrzyskow]

Start a new mkdocs project and redo everything from scratch like my own example above providing only the minimal assets required to reproduce the issue.

Or after the info plugin gathers all of the data, just edit the zip by deleting the IP info? Probably the first approach is better as you might delete something that is related to the issue.

Or you could just compare my example with your own project, perhaps I provided enough information to allow you to find the issue on your end and you can just confirm without the zip reproduction.

[glennlea1525]

Hi @kamilkrzyskow I suspect the problem was that I didn't know what to do with the following:

[data-md-color-scheme="light"] img[src$="#only-dark"],
[data-md-color-scheme="light"] img[src$="#gh-dark-mode-only"] {
  display: none; /* Hide dark images in light mode */
}

It wasn't until I saw your example that I understood it is added separate from the two light and dark schemes. I was trying to somehow add it to the scheme itself. This is a result of my limited CSS experience. It works now as described in your sample code above. I also renamed it to light (previously green).

Thanks for your help.

[glennlea1525]

Hi @kamilkrzyskow your zip file provided the answer. Thanks.