dynamically change theme
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending

This commit is contained in:
Mylloon 2023-04-29 15:26:12 +02:00
parent 5cde595f96
commit fb6c9780f6
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 27 additions and 13 deletions

View file

@ -1,11 +1,12 @@
window.addEventListener("load", () => {
/* Configuration */
hljs.configure({
noHighlightRe: /^$/i,
languageDetectRe: /\blanguage-hljs-([\w-]+)\b/i,
});
hljs.addPlugin(new CopyButtonPlugin());
/* Aliases of langs */
const aliases = {
bash: ["fish"],
};
@ -13,17 +14,32 @@ window.addEventListener("load", () => {
hljs.registerAliases(aliases[lang], { languageName: lang });
}
/* Highlight */
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
document
.getElementById(
`hljs-${
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
}-theme`
)
.removeAttribute("disabled");
/* Theme */
const dark = "dark";
const light = "light";
const attribute = ["disabled", "disabled"];
const updateTheme = (theme) => {
{
const elementToEnable = document.getElementById(
`hljs-${theme.matches ? dark : light}-theme`
);
const elementToDisable = document.getElementById(
`hljs-${theme.matches ? light : dark}-theme`
);
if (elementToEnable.hasAttribute(attribute[0])) {
elementToEnable.removeAttribute(attribute[0]);
}
elementToDisable.setAttribute(...attribute);
}
};
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
updateTheme(darkModePreference);
darkModePreference.addEventListener("change", (theme) => updateTheme(theme));
});

View file

@ -2,13 +2,11 @@
id="hljs-light-theme"
rel="stylesheet"
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"