fix theme switching for mermaid diagrams
This commit is contained in:
parent
31ccab99e1
commit
9bca7045cc
2 changed files with 10 additions and 5 deletions
|
@ -174,6 +174,12 @@ pre:has(code.language-mermaid) {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.language-mermaid {
|
||||
filter: invert(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table:not(.hljs-ln) {
|
||||
border-collapse: collapse;
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
|
||||
|
||||
window.addEventListener("load", async () => {
|
||||
const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark" // dark
|
||||
: "default"; // light
|
||||
|
||||
mermaid.initialize({ startOnLoad: false, theme: theme });
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: "default",
|
||||
});
|
||||
|
||||
await mermaid.run({
|
||||
querySelector: ".language-mermaid",
|
||||
|
|
Loading…
Reference in a new issue