add dark/light theme for mermaid and hljs
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending

This commit is contained in:
Mylloon 2023-04-25 02:32:43 +02:00
parent a0817a3879
commit c6a1f3efcb
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
3 changed files with 29 additions and 2 deletions

View file

@ -1,4 +1,8 @@
window.addEventListener("load", () => {
const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" // dark
: "default"; // light
hljs.configure({
noHighlightRe: /^$/i,
languageDetectRe: /\blanguage-hljs-([\w-]+)\b/i,
@ -16,4 +20,14 @@ window.addEventListener("load", () => {
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
document
.getElementById(
`hljs-${
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
}-theme`
)
.removeAttribute("disabled");
});

View file

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

View file

@ -1,6 +1,14 @@
<link
id="hljs-light-theme"
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/solarized-light.min.css"
disabled="disabled"
/>
<link
id="hljs-dark-theme"
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/dracula.min.css"
disabled="disabled"
/>
<link
rel="stylesheet"