From d7d5ac63ac12609c08acda0d7bb132fcc2972870 Mon Sep 17 00:00:00 2001
From: efim <efim666@bk.ru>
Date: Wed, 27 Sep 2023 04:15:11 +0000
Subject: [PATCH] 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
---
 .../src/main/resources/templates/country.html | 29 ++++++++++++++-----
 .../src/main/resources/templates/index.html   | 23 ++++++++++-----
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/16-countries-page-from-api/src/main/resources/templates/country.html b/16-countries-page-from-api/src/main/resources/templates/country.html
index 065b3dd..2676160 100644
--- a/16-countries-page-from-api/src/main/resources/templates/country.html
+++ b/16-countries-page-from-api/src/main/resources/templates/country.html
@@ -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>
diff --git a/16-countries-page-from-api/src/main/resources/templates/index.html b/16-countries-page-from-api/src/main/resources/templates/index.html
index 16d12fd..3aab854 100644
--- a/16-countries-page-from-api/src/main/resources/templates/index.html
+++ b/16-countries-page-from-api/src/main/resources/templates/index.html
@@ -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>