This commit is contained in:
parent
5e941b280e
commit
a214a8a56b
1 changed files with 40 additions and 9 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue