Why does light/dark mode not change when the OS light/dark mode changes?

[erikthiem-immuta]

I am running into difficulty getting prefers-color-scheme to work based on these directions https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#system-preference

I tried getting this work in an existing app and was not able to see the page change when I switched my computer from light to dark mode. I was, however, able to see many other websites change (such as Google), so I know that my computer is reporting my color scheme preference correctly.

I then thought that maybe the existing app was overriding too many things, so I decided to create a new app with the getting started instructions. I updated the mkdocs.yml file to be this:

site_name: My Docs
theme:
  name: material
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: indigo
      accent: indigo
      toggle:
        icon: material/toggle-switch-off-outline
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: indigo # same as above
      accent: indigo  # same as above
      toggle:
        icon: material/toggle-switch
        name: Switch to light mode

and I am still not seeing it pick up my system light mode / dark mode preference.

Of note, I am able to manually change the order of those media calls to have the dark mode one first and that does work to set dark mode. So dark mode is working, but automatic detection is not working.

I have used google chrome dev tools to easily toggle my preferences

and I have toggled them via the system preferences. I am using a mac if that matters.

Do you know where I might be going wrong? Thank you!

[squidfunk]

I tried getting this work in an existing app and was not able to see the page change when I switched my computer from light to dark mode.

You're doing nothing wrong. Material for MkDocs currently will only set the system preference on the first visit:

• Light/dark theme disconnected from light/dark scheme #2727
• Allow for palette toggle to include "match system preference" #3123
• Automatic switch of dark mode / light mode #3244
• auto slate mode - "system" default option #3651

I may look into this in the future again, but if you read the above issues, you'll see that it's not trivial to add given the current architecture. However, I understand that this is something that many users want and see if we can change the behavior.

[squidfunk]

In the meantime, this project might be worth checking out:
https://github.com/jannismain/mkdocs-system-preference-theme-toggle

[erikthiem-immuta]

Thank you!

[erikthiem-immuta]

@squidfunk I have a follow-up question. In my demo app that I created just to test this out, I was able to see it working as you said it should. I could change my system preferences and open my site in an incognito window and it loaded correctly based on the system preferences. However, in the existing app that I am trying to add this functionality into, I still cannot get this to work. I am using the most recent version of mkdocs-material-insiders from Dec 8, 2021. Is this functionality somehow not included in the -insiders version? Thanks!

[squidfunk]

That's because incognito mode probably doesn't persist to local storage, by design. It's definitely not related to Insiders.

[erikthiem-immuta]

Ah I figured it out. I was using an older version of mkdocs-material-insiders. When I upgraded to the newest version, everything worked as you said it would.