syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: mermaid theme auto switch

Browse source
This commit is contained in:
Junyi Hou 2024-04-09 16:42:47 +08:00
parent d557d2e08d
commit 3ae4b0a8b0
3 changed files with 102 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

24
layouts/_default/single.html
View file

@ -46,10 +46,32 @@
`.Store.Set "hasMermaid"` is executed.
`.Store.Get "hasMermaid"` will return true and mermaid.js will be loaded.
*/}}
{{ if .Store.Get "hasMermaid" }}
{{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
{{ $colorTheme := "light" }}
{{ if and (isset site.Params "colortheme") (ne site.Params.colortheme "") }}
{{ $colorTheme = site.Params.colortheme | lower }}
{{ end }}
<script type="module">
function detectCurrentScheme3() {
const defaultTheme = "{{ $colorTheme }}";
if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
return localStorage.getItem("user-color-scheme");
}
if (defaultTheme === "dark" || defaultTheme === "light") {
return defaultTheme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
window.mermaid = mermaid;
window.initMermaid()
document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
</script>
{{ end }}
{{ end }}

18
layouts/partials/theme-switcher.html
View file

@ -23,11 +23,20 @@
let currentTheme
let switchButton
let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
function switchTheme(e) {
currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme(currentTheme);
document.body.dispatchEvent(new CustomEvent(currentTheme + "-theme-set"));
}
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme(currentTheme);
document.body.dispatchEvent(new CustomEvent(currentTheme + "-theme-set"));
}
document.addEventListener('DOMContentLoaded', function () {
@ -58,13 +67,6 @@
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
function switchTheme(e) {
currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme(currentTheme);
}
function showContent() {
document.body.style.visibility = 'visible';
document.body.style.opacity = 1;