Anri/mylloon.fr
1
0
Fork 0
Code Issues 15 Pull requests 2 Releases Packages 1 Activity Actions

fix theme switching for mermaid diagrams

Browse source
This commit is contained in:
Mylloon 2024-12-16 13:52:12 +01:00
parent 31ccab99e1
commit 9bca7045cc
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/css/markdown.css
View file

@ -174,6 +174,12 @@ pre:has(code.language-mermaid) {
text-align: center; text-align: center;
} }
@media (prefers-color-scheme: dark) {
.language-mermaid {
filter: invert(0.9);
}
}
/* Tables */ /* Tables */
table:not(.hljs-ln) { table:not(.hljs-ln) {
border-collapse: collapse; border-collapse: collapse;

9
static/js/libs/mermaid.js
View file

@ -1,11 +1,10 @@
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"; import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
window.addEventListener("load", async () => { window.addEventListener("load", async () => {
const theme = window.matchMedia("(prefers-color-scheme: dark)").matches mermaid.initialize({
? "dark" // dark startOnLoad: false,
: "default"; // light theme: "default",
});
mermaid.initialize({ startOnLoad: false, theme: theme });
await mermaid.run({ await mermaid.run({
querySelector: ".language-mermaid", querySelector: ".language-mermaid",