From d19d0d799d4f601d79f08c2413cfede774e549b8 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Mon, 12 Feb 2024 03:50:50 +0400
Subject: [PATCH] Add ThemeIcon component to switch between dark and light mode

Introduces a new component 'ThemeIcon' to enable a smooth switch between light and dark themes based on user preference. This improvement includes a drop-down menu for the users to select their preferred mode and also defines theme-related functionalities inside an object called 'HSThemeAppearance'. Further, it incorporates respective event listeners to effectively handle theme change events.
---
 src/components/ThemeIcon.astro | 172 +++++++++++++++++++++++++++++++++
 1 file changed, 172 insertions(+)
 create mode 100644 src/components/ThemeIcon.astro

diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
new file mode 100644
index 0000000..0b49818
--- /dev/null
+++ b/src/components/ThemeIcon.astro
@@ -0,0 +1,172 @@
+<div
+  class="hs-dropdown"
+  data-hs-dropdown-placement="bottom-right"
+  data-hs-dropdown-offset="30"
+>
+  <button
+    type="button"
+    class="hs-dropdown-toggle hs-dark-mode group flex items-center rounded-lg font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-[#fa5a15] dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  >
+    <svg
+      class="block h-4 w-4 hs-dark-mode-active:hidden"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      ><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
+    >
+    <svg
+      class="hidden h-4 w-4 hs-dark-mode-active:block"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      ><circle cx="12" cy="12" r="4"></circle><path d="M12 8a2 2 0 1 0 4 4"
+      ></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path
+        d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
+      ></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
+        d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"
+      ></path></svg
+    >
+  </button>
+
+  <div
+    id="selectThemeDropdown"
+    class="hs-dropdown-menu z-10 mb-2 mt-2 hidden origin-bottom-left space-y-1 rounded-lg bg-neutral-100 p-2 opacity-0 shadow-md transition-[margin,opacity] duration-300 hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-700"
+  >
+    <button
+      type="button"
+      class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
+      data-hs-theme-click-value="auto"
+    >
+      Auto (system default)
+    </button>
+    <button
+      type="button"
+      class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
+      data-hs-theme-click-value="default"
+    >
+      Default (light mode)
+    </button>
+    <button
+      type="button"
+      class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
+      data-hs-theme-click-value="dark"
+    >
+      Dark
+    </button>
+  </div>
+</div>
+
+<script is:inline>
+  const HSThemeAppearance = {
+    init() {
+      const defaultTheme = "default";
+      let theme = localStorage.getItem("hs_theme") || defaultTheme;
+
+      if (document.querySelector("html").classList.contains("dark")) return;
+      this.setAppearance(theme);
+    },
+    _resetStylesOnLoad() {
+      const $resetStyles = document.createElement("style");
+      $resetStyles.innerText = `*{transition: unset !important;}`;
+      $resetStyles.setAttribute("data-hs-appearance-onload-styles", "");
+      document.head.appendChild($resetStyles);
+      return $resetStyles;
+    },
+    setAppearance(theme, saveInStore = true, dispatchEvent = true) {
+      const $resetStylesEl = this._resetStylesOnLoad();
+
+      if (saveInStore) {
+        localStorage.setItem("hs_theme", theme);
+      }
+
+      if (theme === "auto") {
+        theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "default";
+      }
+
+      document.querySelector("html").classList.remove("dark");
+      document.querySelector("html").classList.remove("default");
+      document.querySelector("html").classList.remove("auto");
+
+      document
+        .querySelector("html")
+        .classList.add(this.getOriginalAppearance());
+
+      setTimeout(() => {
+        $resetStylesEl.remove();
+      });
+
+      if (dispatchEvent) {
+        window.dispatchEvent(
+          new CustomEvent("on-hs-appearance-change", { detail: theme }),
+        );
+      }
+    },
+    getAppearance() {
+      let theme = this.getOriginalAppearance();
+      if (theme === "auto") {
+        theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "default";
+      }
+      return theme;
+    },
+    getOriginalAppearance() {
+      const defaultTheme = "default";
+      return localStorage.getItem("hs_theme") || defaultTheme;
+    },
+  };
+  HSThemeAppearance.init();
+
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (e) => {
+      if (HSThemeAppearance.getOriginalAppearance() === "auto") {
+        HSThemeAppearance.setAppearance("auto", false);
+      }
+    });
+
+  window.addEventListener("load", () => {
+    const $clickableThemes = document.querySelectorAll(
+      "[data-hs-theme-click-value]",
+    );
+    const $switchableThemes = document.querySelectorAll(
+      "[data-hs-theme-switch]",
+    );
+
+    $clickableThemes.forEach(($item) => {
+      $item.addEventListener("click", () =>
+        HSThemeAppearance.setAppearance(
+          $item.getAttribute("data-hs-theme-click-value"),
+          true,
+          $item,
+        ),
+      );
+    });
+
+    $switchableThemes.forEach(($item) => {
+      $item.addEventListener("change", (e) => {
+        HSThemeAppearance.setAppearance(e.target.checked ? "dark" : "default");
+      });
+
+      $item.checked = HSThemeAppearance.getAppearance() === "dark";
+    });
+
+    window.addEventListener("on-hs-appearance-change", (e) => {
+      $switchableThemes.forEach(($item) => {
+        $item.checked = e.detail === "dark";
+      });
+    });
+  });
+</script>