How to enable user preference of dark/light color scheme *and* toggle?

[swaroopch]

As per https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/ , I can see how to enable user preference and how to enable toggle (I am using Insiders edition), but given the yaml structure, I'm not sure how to enable both? Thanks in advance!

[squidfunk]

There’s currently an open PR in Insiders with a long discussion on this feature. It’s currently not possible, but the PR contains a working proposal to add that functionality back. I’m sorry for the inconvenience this might be causing you.

[swaroopch]

Thanks for the clarification @squidfunk !

One related question: I think I'm going to simplify things for myself and go with just the user's preference and no toggle, since user can always change that in their browser / OS. However, I've noticed that prefers-color-scheme works with pip install mkdocs-material==7.0.3 and not with pip install git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git - any recommendations on how to diagnose this?

[squidfunk]

As noted in the open PR in Insiders, the functionality had to be temporarily removed from Insiders because of the different toggle implementation. I'm trying hard to implement the solution stated in the PR as soon as possible. Thus, currently, you cannot use the preference solution with Insiders. It will be superseded by the new implementation, which will also support arbitrary media queries, not only prefers-color-scheme! I'll try to wrap that up this weekend!

[squidfunk]

The latest commit in Insiders adds media-query based preferences to Insiders. You can now add a media query per color scheme. The first matching media query is the default theme selected. If you want to keep the primary and accent colors as-is, just specify the same in both palettes. You can also change the colors per palette.

theme:
  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

Why media queries? Because now we can also use media queries like prefers-contrast to set a high-contrast theme, which we might add in the future. It's still undocumented – I'll add documentation on the weekend, but for now, this should work.

[swaroopch]

Brilliant solution, thank you! 🥳