thohlt/thiloho.github.io
1
0
Fork 0
mirror of https://github.com/thiloho/thiloho.github.io.git synced 2025-11-22 02:11:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move themeToggle script into layout

Browse Source
This commit is contained in:
thiloho
2025-05-09 12:30:49 +02:00
parent dad5a26942
commit b9e6bcd653
3 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Head.astro
View File

@@ -55,7 +55,6 @@ const { title, description } = Astro.props;
};
setTheme();
document.addEventListener("astro:after-swap", setTheme);
</script>
</head>

17
src/components/Nav.astro
View File

@@ -34,20 +34,3 @@ const routes = ["blog", "tracks"];
</div>
</div>
</nav>
<script>
const setToggleListener = () => {
const toggleBtn = document.querySelector("#theme-toggle");
toggleBtn?.addEventListener("click", () => {
const element = document.documentElement;
element.classList.toggle("dark");
const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
};
setToggleListener();
document.addEventListener("astro:after-swap", setToggleListener);
</script>

17
src/layouts/PageLayout.astro
View File

@@ -30,3 +30,20 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
<Footer />
</body>
</html>
<script>
const setToggleListener = () => {
const toggleBtn = document.querySelector("#theme-toggle");
toggleBtn?.addEventListener("click", () => {
const element = document.documentElement;
element.classList.toggle("dark");
const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
};
setToggleListener();
document.addEventListener("astro:after-swap", setToggleListener);
</script>