Support switch between light and dark theme

[fralau]

Support switch between light and dark theme

[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'

[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]

@elgalu I am impressed. This is quite elegant.

Is it a solution that would work in general?

[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)?

[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]

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