From 85f99f2cd4178420bd65eaa6fc2dee765cc5c7f4 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foo.dogsquared@gmail.com>
Date: Mon, 13 Jun 2022 17:06:29 +0800
Subject: [PATCH] Add indication of selected theme

---
 CHANGELOG.adoc                                |  5 +++
 assets/scss/layout.scss                       |  5 +++
 layouts/partials/components/theme-button.html | 43 +++++++++++++------
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index b862ce4..a1c5187 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -20,6 +20,11 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 == Unreleased
 
 
+=== Added
+
+* Indicator for the selected theme in the dropdown menu.
+
+
 === Updated
 
 * Minimum Go runtime version in `go.mod`.
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index 2141305..04035d1 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -103,6 +103,11 @@ footer[aria-label="Site footer"] {
     color: var(--background);
     cursor: pointer;
   }
+
+  &--selected {
+    background: var(--base05);
+    color: var(--background);
+  };
 }
 
 .pagination {
diff --git a/layouts/partials/components/theme-button.html b/layouts/partials/components/theme-button.html
index 7074ffc..7b9a75a 100644
--- a/layouts/partials/components/theme-button.html
+++ b/layouts/partials/components/theme-button.html
@@ -65,20 +65,35 @@
     </div>
   </div>
 </div>
-<script defer>
-  const themeDropdown = document.querySelector('.site__theme-btn');
-    themeDropdown.addEventListener('click', (event) => {
-      const { target } = event;
-      if (target.classList.contains("site__theme-item")) {
-        if (target.dataset.theme) {
-          theme = target.dataset.theme;
-          window.localStorage.setItem("theme", theme);
-          document.documentElement.dataset.theme = theme;
-        } else {
-          window.localStorage.removeItem("theme");
-          delete document.documentElement.dataset.theme;
-        }
+<script>
+  function styleTheme() {
+    const selectedTheme = window.localStorage.getItem("theme");
+    for (const el of document.querySelectorAll(".site__theme-item")) {
+      if (el.dataset.theme == selectedTheme) {
+        el.classList.add("site__theme-item--selected");
+      } else {
+        el.classList.remove("site__theme-item--selected");
       }
-    });
+    }
+  }
+
+  const themeDropdown = document.querySelector('.site__theme-btn');
+  themeDropdown.addEventListener('click', (event) => {
+    const { target } = event;
+    if (target.classList.contains("site__theme-item")) {
+      if (target.dataset.theme) {
+        theme = target.dataset.theme;
+        window.localStorage.setItem("theme", theme);
+        document.documentElement.dataset.theme = theme;
+      } else {
+        window.localStorage.removeItem("theme");
+        delete document.documentElement.dataset.theme;
+      }
+    }
+
+    styleTheme();
+  });
+
+  styleTheme();
 </script>
 {{- end }}