Light and dark mode images not working

[JavierEscobarOrtiz]

Hello!

We are trying to apply light and dark mode images to our docs as said in the documentation but something is failing in the light mode. We tried to follow the docs because we use a custom color palette, but nothing changes. Before updating mkdocs to 1.4.3 (from version 1.3.1) it works correctly.

Do you have any idea what is happening?

Thank you very much!

Repo: https://github.com/JoaquinAmatRodrigo/skforecast
Docs: https://skforecast.org/

New requirements_docs.txt:

mike==1.1.2
mkdocs==1.4.3
mkdocs-jupyter==0.24.1
mkdocs-material==9.1.15
mkdocstrings==0.22.0
mkdocstrings-python==1.1.0
jupyter-contrib-nbextensions==0.7.0
skforecast==0.8.1

README.md:

<img src="img/banner-landing-page-skforecast.png#only-light" align="left"  style="
    margin-bottom: 30px;
    margin-top: 0px;">

<img src="img/banner-landing-page-dark-mode-skforecast.png#only-dark" align="left" style="
    margin-bottom: 30px;
    margin-top: 0px;">

mkdocs.yml:

  palette:

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: light
      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

extra.css:

[data-md-color-scheme="light"] {
    --md-primary-fg-color:        #001633;
    --md-primary-fg-color--light: #001633;
    --md-primary-fg-color--dark:  #001633;
    --md-accent-fg-color:        #f79939;
    --md-accent-fg-color--light: #f79939;
    --md-accent-fg-color--dark:  #f79939;
    --md-primary-bg-color:       #f79939;
    --md-typeset-a-color:        #f79939;
  }

  [data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #001633;
    --md-primary-fg-color--light: #001633;
    --md-primary-fg-color--dark:  #001633;
    --md-accent-fg-color:        #f79939;
    --md-accent-fg-color--light: #f79939;
    --md-accent-fg-color--dark:  #f79939;
    --md-primary-bg-color:       #f79939;
    --md-typeset-a-color:        #f79939;
  }

[squidfunk]

It's likely related to a recent update which fixed some edge cases when using custom colors. Please try to apply the following changes, as mentioned in our documentation:

[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 */
}

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

[JavierEscobarOrtiz]

Thank you very much for your reply. I'm sorry but I'm not very expert in configuring the css file, could you please tell me how should I add it?

[squidfunk]

Well, in your custom schemes, of course. You somehow managed to get them working, so just add the respective selectors to your additional CSS and adjust custom-light and custom-dark! Maybe ask a developer in your team, it's actually very simple ☺️

[JavierEscobarOrtiz]

Thanks so much for your help @squidfunk , I've done some testing by changing the settings and names but I can't get it to work. am I missing something? I'm really sorry because it's probably something quite simple... I am using version 9.1.15.

READM.md:

<img src="img/banner-landing-page-skforecast.png#only-light" align="left"  style="
    margin-bottom: 30px;
    margin-top: 0px;">

<img src="img/banner-landing-page-dark-mode-skforecast.png#only-dark" align="left" style="
    margin-bottom: 30px;
    margin-top: 0px;">

mkdocs.yml:

palette:
    # # Palette toggle for automatic mode
    # - media: "(prefers-color-scheme)"
    #   primary: custom
    #   accent: custom
    #   toggle:
    #     icon: material/brightness-auto
    #     name: Switch to light mode

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: light
      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

extra.css:

[data-md-color-scheme="light"] {
    --md-primary-fg-color:        #001633;
    --md-primary-fg-color--light: #001633;
    --md-primary-fg-color--dark:  #001633;
    --md-accent-fg-color:        #f79939;
    --md-accent-fg-color--light: #f79939;
    --md-accent-fg-color--dark:  #f79939;
    --md-primary-bg-color:       #f79939;
    --md-typeset-a-color:        #f79939;
  }

  [data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #001633;
    --md-primary-fg-color--light: #001633;
    --md-primary-fg-color--dark:  #001633;
    --md-accent-fg-color:        #f79939;
    --md-accent-fg-color--light: #f79939;
    --md-accent-fg-color--dark:  #f79939;
    --md-primary-bg-color:       #f79939;
    --md-typeset-a-color:        #f79939;
  }

[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 */
}

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

[josh-wong]

@JavierEscobarOrtiz By changing slate to dark in extra.css (shown below), I was able to get the light and dark images to display as expected on your site.

I've submitted the following PR in your repository that fixes the issue: skforecast/skforecast#484

[josh-wong]

I'm having the same issue as well.

I've tried following the documentation for custom scheme colors. However, when in light mode, both light and dark images are displayed. When in dark mode, only one image is displayed as expected.

What's interesting is when I deploy the site on GitHub by using Material for MkDocs (Insiders), both images are displayed when in light mode. But when I build the site locally by using Material for MkDocs (non-Insiders), only one image is displayed in both light and dark mode as expected.

[squidfunk]

What's interesting is when I deploy the site on GitHub by using Material for MkDocs (Insiders), both images are displayed when in light mode. But when I build the site locally by using Material for MkDocs (non-Insiders), only one image is displayed in both light and dark mode as expected.

This is a clear indication that you're running into a caching issue, because the extra CSS files are not suffixed with chunk hashes like the theme files. mkdocs serve doesn't add caching headers, which is why you're seeing up-to-date files locally, but not when deploying. Please clear your browsers cache, and check if the issue persists. If it does, please create a new issue with a reproduction.

[josh-wong]

When checking my local deployment and the GitHub Pages deployment, I cleared the cache (in my browsers and in GitHub Actions) each time that I checked the local build and the deployed site on GitHub pages. I checked on multiple browsers as well just to be sure, but no luck.

I'll do some additional work later to see if there's something I'm just not getting on my side. If I can't solve the issue, I'll create a detailed issue.

[josh-wong]

I've resolved this issue on my side.

Problem

My custom scheme name was incorrect in extra.css (poorly configured when I was initially customizing the site).

Solution

After ensuring that scheme: <SCHEME_NAME> and [data-md-color-scheme="<SCHEME_NAME>"] in extra.css both used the same names for the custom scheme, I confirmed that the issue was resolved.

[squidfunk]

Great, glad you got it sorted! Bonus points for taking it back here, giving directions to others having the same problem 🚀