efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: saving dark mode on page reload 

main script is in index, country page template inserts it with
fragment by markup selector syntax:
https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#appendix-c-markup-selector-syntax

and still has some code to work in standalone
This commit is contained in:
efim 2023-09-27 04:15:11 +00:00
parent 841543e984
commit d7d5ac63ac
2 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
16-countries-page-from-api/src/main/resources/templates/country.html
View File

@ -31,7 +31,7 @@
<a th:href="@{~/}" href="index.html"
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
</a>
<button class="flex flex-row gap-x-2">
<button id="toggleDarkMode" class="flex flex-row gap-x-2">
<svg
class="text-black dark:text-white h-6"
viewBox="0 0 24 24"
@ -48,13 +48,6 @@
</svg>
<p>Dark Mode</p>
</button>
<script type="text/javascript">
document
.getElementById("toggleDarkMode")
.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
});
</script>
</div>
</header>
<nav
@ -174,5 +167,25 @@
</section>
</section>
</main>
<script th:replace="~{index :: script#dark-mode-scripts}" type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
const darkMode = localStorage.getItem("darkMode");
console.log("yoyo");
if (darkMode === "true") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
});
document
.getElementById("toggleDarkMode")
.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
localStorage.setItem(
"darkMode",
document.documentElement.classList.contains("dark")
);
});
</script>
</body>
</html>

23
16-countries-page-from-api/src/main/resources/templates/index.html
View File

@ -49,13 +49,6 @@
</svg>
<p>Dark Mode</p>
</button>
<script type="text/javascript">
document
.getElementById("toggleDarkMode")
.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
});
</script>
</div>
</header>
<nav
@ -249,5 +242,21 @@
</section>
</article>
</main>
<script id="dark-mode-scripts" type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
const darkMode = localStorage.getItem("darkMode");
if (darkMode === "true") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
});
document
.getElementById("toggleDarkMode")
.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
localStorage.setItem("darkMode", document.documentElement.classList.contains("dark"))
});
</script>
</body>
</html>