Toggle between dark and light palette doesn't work

[andynameistaken]

Toggle:
mkdocs.yml

- mermaid2:
      arguments:
        # test if its __palette_1 (dark) or __palette_2 (light)
        theme: |
          ^(JSON.parse(window.localStorage.getItem(__prefix('__palette'))).index == 1) ? 'dark' : 'light''

docs/extra/refresh_on_toggle_dark_light.js

var paletteSwitcher1 = document.getElementById("__palette_1");
var paletteSwitcher2 = document.getElementById("__palette_2");

paletteSwitcher1.addEventListener("change", function () {
  location.reload();
});

paletteSwitcher2.addEventListener("change", function () {
  location.reload();
});

does not work with package versions:
pip freeze:

attrs==20.3.0
beautifulsoup4==4.10.0
certifi==2021.10.8
chardet==4.0.0
charset-normalizer==2.0.9
click==8.0.3
EditorConfig==0.12.3
ghp-import==2.0.2
idna==2.10
importlib-metadata==4.8.2
Jinja2==3.0.3
jsbeautifier==1.14.0
Markdown==3.3.6
MarkupSafe==2.0.1
mdx-truly-sane-lists==1.2
mergedeep==1.3.4
mkdocs==1.2.3
mkdocs-altlink-plugin==1.0.1
mkdocs-autolinks-plugin==0.4.0
mkdocs-markmap==2.2.0
mkdocs-material==8.0.5
mkdocs-material-extensions==1.0.3
mkdocs-mermaid2-plugin==0.5.2
mkdocs-roamlinks-plugin==0.1.3
packaging==21.3
Pygments==2.10.0
pymdown-extensions==9.1
pyparsing==3.0.6
python-dateutil==2.8.2
PyYAML==6.0
pyyaml_env_tag==0.1
requests==2.25.1
six==1.16.0
soupsieve==2.3.1
urllib3==1.26.7
watchdog==2.1.6
zipp==3.6.0

[github-actions]

Thank you for your contribution! This is very appreciated.

[fralau]

Thanks a lot. Could you also describe

1. what effect you wish to create (button for dark/light mode, auto dark-light-mode etc.)?
2. what recipe you used (documentation page, etc.)?
3. what error message or anomaly you are getting?

[andynameistaken]

• what effect you wish to create (button for dark/light mode, auto dark-light-mode etc.)?
  I wish that dark mode toggle of mkdocs-material theme changed colors of diagrams.
• what recipe you used (documentation page, etc.)?
  I used your documentation and Support switch between light and dark theme #39
• what error message or anomaly you are getting?
  I don't get any errors only INFO logs:

INFO     -  Building documentation...
INFO     -  MERMAID2  - Initialization arguments: {'theme': "^(JSON.parse(window.localStorage.getItem(__prefix('__palette'))).index == 1) ? 'dark' : 'light''\n"}
INFO     -  MERMAID2  - Explicit mermaid javascript library:
               https://unpkg.com/mermaid/dist/mermaid.min.js

Here is the anomaly - color of diagrams doesn't change on dark theme switch:

[fralau]

As mentioned in another comment, this javascript code is wizardry to me.

Perhaps @tylfin or @elgalu or @patrislav1, who worked on issue #39, could help here?

In any case you might want to show what's in the mkdocs.yml file, especially

• under the theme: material
• extra_javascript

[andynameistaken]

# Configuration
theme:
  name: material
  font:
    text: Sarala
  features:
    - navigation.top
    - search.suggest    
    - search.highlight     
    - search.share        
    - navigation.indexes

  language: 'en'
  # logo: 'images/logo.png'
  # favicon: 'images/logo.png'
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: deep purple
      toggle:
        icon: material/weather-night
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      accent: green
      primary: deep purple
      toggle:
        icon: material/weather-sunny
        name: Switch to light mode

  

  
  

# Customisation
extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/andynameistaken
  generator: false


    

extra_css:
  - 'stylesheets/extra.css'

extra_javascript:
  # LaTeX support
  - javascripts/mathjax.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
  # Mermaid Graph
  - extra/refresh_on_toggle_dark_light.js
  - https://unpkg.com/mermaid/dist/mermaid.min.js
  # sortable data tables
  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
  - javascripts/tablesort.js
 

[patrislav1]

Perhaps @tylfin or @elgalu or @patrislav1, who worked on issue #39, could help here?

Turns out mkdocs-material changed their internal API between major releases. Thanks for the heads up.

[fralau]

Thanks @patrislav1 for fixing the doc, this is great that you could fix the issue!

It would be great if you could outline here (for a person who has notions of HTML/css/js) what had changed in the mkdocs-material internal API?

[patrislav1]

It would be great if you could outline here (for a person who has notions of HTML/css/js) what had changed in the mkdocs-material internal API?

The internal API to store and retrieve local settings, including the currently selected theme/palette, changed a little bit - previously the browser's localStorage was used directly (a bit like cookies, but only client-side) - now there's some kind of wrapper around it, which also renames the key of the value depending on where it's stored.

See the diff of src/assets/javascripts/components/palette/index.ts and src/partials/javascripts/base.html between pre- and post-8.0.0.

[fralau]

Thanks a lot!