Add indication of selected theme

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`.

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 {

layouts/partials/components/theme-button.html

@@ -65,7 +65,18 @@
     </div>
   </div>
 </div>
-<script defer>
+<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;
@@ -79,6 +90,10 @@
         delete document.documentElement.dataset.theme;
       }
     }
+
+    styleTheme();
   });
+
+  styleTheme();
 </script>
 {{- end }}