dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(mermaid): support dark mode

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-09-27 07:32:29 +08:00
parent c7ed2261a3
commit 925065a5bd
7 changed files with 62 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/js/appearance.js
View File

@@ -22,6 +22,34 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
});
}
// Mermaid dark mode support
var updateMermaidTheme = () => {
if (typeof mermaid !== 'undefined') {
const isDark = document.documentElement.classList.contains("dark");
const mermaids = document.querySelectorAll('pre.mermaid');
mermaids.forEach(e => {
if (e.getAttribute('data-processed')) {
// Already rendered, clean the processed attributes
e.removeAttribute('data-processed');
// Replace the rendered HTML with the stored text
e.innerHTML = e.getAttribute('data-graph');
} else {
// First time, store the text
e.setAttribute('data-graph', e.textContent);
}
});
if (isDark) {
initMermaidDark();
mermaid.run();
} else {
initMermaidLight();
mermaid.run();
}
}
}
window.addEventListener("DOMContentLoaded", (event) => {
const switcher = document.getElementById("appearance-switcher");
const switcherMobile = document.getElementById("appearance-switcher-mobile");
@@ -29,6 +57,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
updateMeta();
this.updateLogo?.(getTargetAppearance());
// Initialize mermaid theme on page load
updateMermaidTheme();
if (switcher) {
switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
@@ -38,6 +69,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
targetAppearance
);
updateMeta();
updateMermaidTheme();
this.updateLogo?.(targetAppearance);
});
switcher.addEventListener("contextmenu", (event) => {
@@ -54,6 +86,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
targetAppearance
);
updateMeta();
updateMermaidTheme();
this.updateLogo?.(targetAppearance);
});
switcherMobile.addEventListener("contextmenu", (event) => {

54
assets/js/mermaid.js
View File

@@ -2,30 +2,32 @@ function css(name) {
return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
}
document.addEventListener("DOMContentLoaded", () => {
const mermaidDivs = document.querySelectorAll("div.mermaid");
function initMermaidLight() {
mermaid.initialize({
theme: "base",
themeVariables: {
background: css("--color-neutral"),
primaryColor: css("--color-primary-200"),
secondaryColor: css("--color-secondary-200"),
tertiaryColor: css("--color-neutral-100"),
primaryBorderColor: css("--color-primary-400"),
secondaryBorderColor: css("--color-secondary-400"),
tertiaryBorderColor: css("--color-neutral-400"),
lineColor: css("--color-neutral-600"),
fontFamily:
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
fontSize: "16px",
},
});
}
for (const div of mermaidDivs) {
const preElement = div.querySelector("pre");
if (preElement) {
div.textContent = preElement.textContent;
}
}
});
mermaid.initialize({
theme: "base",
themeVariables: {
background: css("--color-neutral"),
primaryColor: css("--color-primary-200"),
secondaryColor: css("--color-secondary-200"),
tertiaryColor: css("--color-neutral-100"),
primaryBorderColor: css("--color-primary-400"),
secondaryBorderColor: css("--color-secondary-400"),
tertiaryBorderColor: css("--color-neutral-400"),
lineColor: css("--color-neutral-600"),
fontFamily:
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
fontSize: "16px",
},
});
function initMermaidDark() {
mermaid.initialize({
theme: "dark",
themeVariables: {
fontFamily:
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
fontSize: "16px",
},
});
}