gribse/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix broken theme switch
Some checks are pending
/ test (push) Waiting to run
Details

Browse source
This commit is contained in:
gribse 2025-04-27 18:56:34 +02:00
parent 5e941b280e
commit a214a8a56b
1 changed files with 40 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

49
layouts/home.html
View file

@ -196,8 +196,8 @@
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
@ -242,15 +242,46 @@
<!-- Script to toggle theme. has to be at the end of the page -->
{{- if (not site.Params.disableThemeToggle) }}
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
document.addEventListener("DOMContentLoaded", () => {
const themeToggleButton = document.getElementById("theme-toggle");
if (themeToggleButton) {
themeToggleButton.addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
}
});
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
console.error("Theme toggle button not found");
}
})
});
</script>
<script>
const observer = new MutationObserver(() => {
const themeToggleButton = document.getElementById("theme-toggle");
if (themeToggleButton) {
observer.disconnect(); // Stop observing once the button is found. Explanation :
/*
the .theme-toggle button is being rendered dynamically (e.g., via a Hugo partial or JavaScript),
so it might not exist in the DOM when the script runs.
To handle this, you can use a MutationObserver to detect when the button is added to the DOM
*/
themeToggleButton.addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
}
});
}
});
observer.observe(document.body, { childList: true, subtree: true });
</script>
{{- end }}
</footer>