Reinitialize with new theme

[Unbinilium]

How to reinitialize with new theme?

Hi folks, I want mermaidjs rerender diagrams when I switched color-scheme, such as switching form 'dark' to 'light', I tried use mermaid.mermaidAPI.reinitialize() with different theme configurations, but it seems not working.

I see that it keep the theme as same as the first initial, when I changed the theme value, called reinitialize(newConfig), remove last rendered graphs and rerendered the new diagrams, it shows nothing different with the theme rendered before.

Is that I was misunderstood the reinitialize() function usage or there is something wrong with my code?

Thanks.

<pre class="mermaid-container">
  <pre id="mermaid-src-0" hidden>
    graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
  </pre>
</pre>

var mermaidConfig = {
    startOnLoad: false,
    theme: 'neutral',
    logLevel: 'debug',
    fontFamily: '"Menlo", "Meslo LG", monospace',
    er: {
        minEntityWidth: 100,
        minEntityHeight: 55,
        entityPadding: 15
    },
    sequence: {
        width: 130,
        height: 30
    },
    gantt: {
        barHeight: 25,
        barGap: 4
    }
};

async function mermaidRender(mermaidSrc, mermaidOutId) {
    mermaid.mermaidAPI.render(mermaidOutId, mermaidSrc.textContent, async function (svgCode) {
        mermaidSrc.insertAdjacentHTML('afterend', svgCode);
    });
}

async function mermaidLoaded() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        mermaidConfig['theme'] = 'dark';
    }
    mermaid.mermaidAPI.initialize(mermaidConfig);
    var mermaidContainer = document.getElementsByClassName('mermaid-container');
    for (var i = 0; i != mermaidContainer.length; ++i) {
        var mermaidSrc = mermaidContainer[i].firstElementChild;
        var mermaidOutId = mermaidSrc.id.replace('src', 'out');

        mermaidRender(mermaidSrc, mermaidOutId);
    }
}

async function mermaidReloaded() {
    mermaidConfig['theme'] = 'neutral';

    mermaid.mermaidAPI.reinitialize(mermaidConfig);
    var mermaidContainer = document.getElementsByClassName('mermaid-container');
    for (var i = 0; i != mermaidContainer.length; ++i) {
        var mermaidSrc = mermaidContainer[i].firstElementChild;
        var mermaidOutId = mermaidSrc.id.replace('src', 'out');

        mermaidContainer[i].querySelector('[id^=mermaid-out-]').remove();

        mermaidRender(mermaidSrc, mermaidOutId);
    }
}

if (document.getElementsByClassName('mermaid-container').length != 0) {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js';
    script.setAttribute('onload', 'mermaidLoaded();')
    document.head.appendChild(script);
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mermaidReloaded);

[Unbinilium]

I noticed that the reinitialize() function was commented like this in v8.9.2:

function reinitialize() {
  // `mermaidAPI.reinitialize: v${pkg.version}`,
  //   JSON.stringify(options),
  //   options.themeVariables.primaryColor;
  // // if (options.theme && theme[options.theme]) {
  // //   options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
  // // }
  // // Set default options
  // const config =
  //   typeof options === 'object' ? configApi.setConfig(options) : configApi.getSiteConfig();
  // updateRendererConfigs(config);
  // setLogLevel(config.logLevel);
  // log.debug('mermaidAPI.reinitialize: ', config);
}

And for initialize(options) function, it seems only the theme changes can not be applied, I am not sure whether the color changes is applied to render new svgs.

...
if (options && options.theme && theme[options.theme]) {
    // Todo merge with user options
    options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
  } else {
    if (options) options.themeVariables = theme.default.getThemeVariables(options.themeVariables);
  }
...

[deoxykev]

Same issue with me too...

[matthiasg]

Yes this is definitely required