Support switch between light and dark theme

[gabrielmacedoanac]

Could you consider switching the mermaid theme as you choose the light and dark theme by the button on the top bar of material-mkdocs?

Choosing the theme works well depending on the user's environment (I tested both mobile and desktop), however the theme is not changed when the user makes the manual selection. It just follows the default user environment theme.

This means that the light and dark themes work fine according to the documentation, but do not switch when the user selects the button.

So, for example, when the user has the light theme by default but decides to see the mermaid designs in the dark theme, the designs do not appear correctly.

[github-actions]

Thank you for your contribution! This is very appreciated.

[fralau]

That's an interesting question... Which theme are you using: Material?

What are the triggers on it (what happens when you push that button)?

[tylfin]

I'm working on something similar, I aligned dark/light mode to a radio button like:

  - mermaid2:
      arguments:
        theme: |
          ^(!document.getElementById("[radio button ID]").checked) ? 'dark' : 'light'

But it requires a refresh to render properly. I was going to look into adding a callback, but the documentation is a little confusing.

EDIT: Okay, I don't know if this will work for you, but I got this working by doing (roughly):

// mkdocs.yml
plugins:
  - mermaid2:
      arguments:
        theme: |
          ^(!document.getElementById("[radio button ID]").checked) ? 'dark' : 'light'
          
extra_javascript:
    - https://unpkg.com/mermaid/dist/mermaid.min.js
    - js/custom.js

// custom.js
var radioButton = document.getElementById("[radio button ID]");
radioButton.addEventListener("change", function() {
    location.reload()
})

That way, the page will refresh and the light/dark mode will automatically match the radio button. It's not perfect, but I don't think folks will mind the forced-refresh too much.

[fralau]

@tylfin 👏 This looks like wizardry to me (I more or less understand what this is doing).

But that was the whole idea behind the ^ operator: it is used to declare javascript code directly in the config.yaml file.

Using the ternary operator to decide between dark and light is actually quite clever.

[fralau]

Does something remain to do on this issue?

[elgalu]

Following @tylfin worked for me, with some modifications for the material theme setup:

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();
});

mkdocs.yml

extra_javascript:
    - extra/refresh_on_toggle_dark_light.js

plugins:
  - mermaid2:
      arguments:
        # Theme auto switch (depending on toggle) doesn't work out of the box
        # The user (or a script) will need to refresh the page when switching between dark/light modes
        theme: |
          ^(JSON.parse(window.localStorage.getItem(__prefix('__palette'))).index == 1) ? 'dark' : 'light'

[fralau]

@elgalu I am impressed. This is quite elegant.

Is it a solution that would work in general?

[elgalu]

Thanks @fralau ! This should work when using the Material theme as it relies on id="__palette_{{ loop.index }}" see material/partials/javascripts/palette.html , material/partials/header.html and local storage key

mkdocs.yml

theme:
  name: material
  # https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: indigo
      accent: light-blue
      toggle:
        icon: material/toggle-switch-off-outline
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: black
      accent: deep orange
      toggle:
        icon: material/toggle-switch
        name: Switch to light mode

  # https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:mermaid2.fence_mermaid

[patrislav1]

Following @tylfin worked for me, with some modifications for the material theme setup:

This does not work when the page is read from file:// - see #46

[andynameistaken]

@elgalu, this doesn't work since mkdocs-material > 7.3.6. Could you help me to achieve the same effect for 8.1.0?

[elgalu]

see #48