Changement des thèmes pour Mermaid (Updated)
Introduction
J’utilise Mermaid.js pour créer les diagrammes de la drogue que vous voyez dans quelques articles. Cependant, ce qui m’a ennuyé est qu’il n’était pas réactif à changer les thèmes (dark/lightM SK3 et il semblait y avoir très peu d’information sur la réalisation de cet objectif.
C’est le résultat de quelques heures de plongée et d’essais pour savoir comment faire ce travail.
Vous pouvez trouver la source de mdeswitcher ici: mdeswitcher.js.
REMARQUE: J’ai actualisé ce document de façon substantielle.
Le diagramme
graph LR
A[Start] --> B[Initialize Mermaid with Theme]
B --> C{Are there any elements matching 'div.mermaid'?}
C --> |No| D[Exit]
C --> |Yes| E[Save Original Data]
E --> F{Did saving data succeed?}
F --> |No| D[Exit]
F --> |Yes| G[Set up Theme Event Listeners]
G --> H[Check Local Storage for Dark Mode]
H --> I{Is Dark Mode enabled?}
I --> |Yes| J[Load Mermaid with Dark Theme]
I --> |No| K[Load Mermaid with Default Theme]
J --> L[Wait for Events]
K --> L[Wait for Events]
L --> M{Event Triggered?}
M --> |Dark Theme Set| N[Reset Processed Data]
N --> O[Load Mermaid with Dark Theme]
M --> |Light Theme Set| P[Reset Processed Data]
P --> Q[Load Mermaid with Default Theme]
O --> L
Q --> L
L --> D[Exit]
Le problème
Le problème est que vous devez initialiser Mermaid pour configurer le thème.
La solution
C’est pourquoi, après avoir fouillé MUCH et essayé de comprendre comment faire cela, j’ai trouvé une solution dans ce GitHub issue post
Cependant, il y avait encore quelques problèmes, donc j’ai dû le modifier un peu pour le faire fonctionner.
Thèmes
Ce site est basé sur un thème Tailwind qui vient avec une très terrible theme switcher.
Vous ' constaterez que cela fait diverses choses autour de changer le thème , réglage du thème pour ce qui est entreposé dans l'entreposage local M SK2 changement d'un couple de feuilles de style pour simplemde
export function globalSetup() {
const lightStylesheet = document.getElementById('light-mode');
const darkStylesheet = document.getElementById('dark-mode');
const simpleMdeDarkStylesheet = document.getElementById('simplemde-dark');
const simpleMdeLightStylesheet = document.getElementById('simplemde-light');
return {
isMobileMenuOpen: false,
isDarkMode: false,
// Function to initialize the theme based on localStorage or system preference
themeInit() {
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
localStorage.theme = "dark";
document.documentElement.classList.add("dark");
document.documentElement.classList.remove("light");
this.isDarkMode = true;
this.applyTheme(); // Apply dark theme stylesheets
} else {
localStorage.theme = "base";
document.documentElement.classList.remove("dark");
document.documentElement.classList.add("light");
this.isDarkMode = false;
this.applyTheme(); // Apply light theme stylesheets
}
},
// Function to switch the theme and update the stylesheets accordingly
themeSwitch() {
if (localStorage.theme === "dark") {
localStorage.theme = "light";
document.body.dispatchEvent(new CustomEvent('light-theme-set'));
document.documentElement.classList.remove("dark");
document.documentElement.classList.add("light");
this.isDarkMode = false;
} else {
localStorage.theme = "dark";
document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
document.documentElement.classList.add("dark");
document.documentElement.classList.remove("light");
this.isDarkMode = true;
}
this.applyTheme(); // Apply the theme stylesheets after switching
},
// Function to apply the appropriate stylesheets based on isDarkMode
applyTheme() {
if (this.isDarkMode) {
// Enable dark mode stylesheets
lightStylesheet.disabled = true;
darkStylesheet.disabled = false;
simpleMdeLightStylesheet.disabled = true;
simpleMdeDarkStylesheet.disabled = false;
} else {
// Enable light mode stylesheets
lightStylesheet.disabled = false;
darkStylesheet.disabled = true;
simpleMdeLightStylesheet.disabled = false;
simpleMdeDarkStylesheet.disabled = true;
}
}
};
}
Mise en place
Les principaux ajouts pour le démarrage du thème Mermaid sont les suivants:
document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
document.body.dispatchEvent(new CustomEvent('light-theme-set'));
Ces deux événements sont utilisés dans notre composant ThemeSwitcher pour réinitialiser les diagrammes Mermaid.
OnLoad / htmx:afterSwap
Dans mon main.js le fichier Je mets en place l’interrupteur de thème. J’importe également mdeswitch fichier qui contient le code pour changer les thèmes.
//Important: Memraid will ALWAYS intialize on window.onload, so we need to make sure we disable this behaviour:
import mermaid from "mermaid";
window.mermaid=mermaid;
mermaid.initialize({startOnLoad:false});
window.mermaidinit = function() {
mermaid.initialize({ startOnLoad: false });
try {
window.initMermaid().then(r => console.log('Mermaid initialized'));
} catch (e) {
console.error('Failed to initialize Mermaid:', e);
}
}
document.body.addEventListener('htmx:afterSwap', function(evt) {
mermaidinit();
//This should be called after the mermaid diagrams have been rendered.
hljs.highlightAll();
});
window.onload = function(ev) {
if(document.readyState === 'complete') {
mermaidinit();
hljs.highlightAll();
}
};
MDESwtich
Ce fichier contient le code pour changer les thèmes de Mermaid. (Le terrible diagramme ci-dessus montre la séquence des événements qui se produisent lorsque le thème est changé)
(function(window) {
'use strict';
const elementCode = 'div.mermaid';
const loadMermaid = async (theme) => {
mermaid.initialize({startOnLoad: false, theme: theme });
console.log("Loading mermaid with theme:", theme);
await mermaid.run({
querySelector: elementCode,
});
};
const saveOriginalData = async () => {
try {
console.log("Saving original data");
const elements = document.querySelectorAll(elementCode);
const count = elements.length;
if (count === 0) return;
const promises = Array.from(elements).map((element) => {
if (element.getAttribute('data-processed') != null) {
console.log("Element already processed");
return;
}
element.setAttribute('data-original-code', element.innerHTML);
});
await Promise.all(promises);
} catch (error) {
console.error(error);
throw error;
}
};
const resetProcessed = async () => {
try {
console.log("Resetting processed data");
const elements = document.querySelectorAll(elementCode);
const count = elements.length;
if (count === 0) return;
const promises = Array.from(elements).map((element) => {
if (element.getAttribute('data-original-code') != null) {
element.removeAttribute('data-processed');
element.innerHTML = element.getAttribute('data-original-code');
}
else {
console.log("Element already reset");
}
});
await Promise.all(promises);
} catch (error) {
console.error(error);
throw error;
}
};
window.initMermaid = async () => {
const mermaidElements = document.querySelectorAll(elementCode);
if (mermaidElements.length === 0) return;
try {
await saveOriginalData();
} catch (error) {
console.error("Error saving original data:", error);
return; // Early exit if saveOriginalData fails
}
const handleDarkThemeSet = async () => {
try {
await resetProcessed();
await loadMermaid('dark');
console.log("Dark theme set");
} catch (error) {
console.error("Error during dark theme set:", error);
}
};
const handleLightThemeSet = async () => {
try {
await resetProcessed();
await loadMermaid('default');
console.log("Light theme set");
} catch (error) {
console.error("Error during light theme set:", error);
}
};
document.body.removeEventListener('dark-theme-set', handleDarkThemeSet);
document.body.removeEventListener('light-theme-set', handleLightThemeSet);
document.body.addEventListener('dark-theme-set', handleDarkThemeSet);
document.body.addEventListener('light-theme-set', handleLightThemeSet);
const isDarkMode = localStorage.theme === 'dark';
await loadMermaid(isDarkMode ? 'dark' : 'default').then(r => console.log('Initial load complete'));
};
})(window);
Je vais quelque peu de bas en haut ici.
initLa fonction - est la principale fonction appelée lorsque la page est chargée.
Il sauve tout d’abord le contenu original des diagrammes de la Mermaid.
Il ajoute ensuite deux écouteurs d'événements pour dark-theme-set et light-theme-set events. Lorsque ces événements sont exécutés, il rétablit les données traitées et réinitialise ensuite les diagrammes Mermaid avec le nouveau thème.
Il vérifie ensuite le stockage local du thème et initialise les diagrammes Mermaid avec le thème approprié.
let isDarkMode = localStorage.theme === 'dark';
if(isDarkMode) {
loadMermaid('dark');
}
else{
loadMermaid('default')
}
Réserver les données originales
La clé de cette chose tout entière est l'entreposage puis la restauration du contenu contenu contenu dans le rendu <div class="mermaid"><div> qui contiennent le marquage de mermaid de nos postes.
Vous ' verrez que cela crée simplement une Promise qui tourne par tous les éléments et stocke le contenu original dans un data-original-code attribute.
const saveOriginalData = async () => {
try {
console.log("Saving original data");
const elements = document.querySelectorAll(elementCode);
const count = elements.length;
if (count === 0) return;
const promises = Array.from(elements).map((element) => {
if (element.getAttribute('data-processed') != null) {
console.log("Element already processed");
return;
}
element.setAttribute('data-original-code', element.innerHTML);
});
await Promise.all(promises);
} catch (error) {
console.error(error);
throw error;
}
};
resetProcessed est la même sauf dans l'inverse où il prend le marquage de data-original-code et l'intègre à l'élément.
Init
Maintenant que nous avons tous ces données, nous pouvons réinitialiser la mermaid pour appliquer notre nouveau thème et rerender le diagramme SVG dans notre output HTML.
const elementCode = 'div.mermaid';
const loadMermaid = async (theme) => {
mermaid.initialize({startOnLoad: false, theme: theme });
console.log("Loading mermaid with theme:", theme);
await mermaid.run({
querySelector: elementCode,
});
};
En conclusion
Il a été un peu difficile de le comprendre, mais je suis heureux d’avoir réussi. J’espère que cela aidera quelqu’un qui cherche à faire la même chose.