From 94aed5fe370eb967612a0a27ee9ae97299668612 Mon Sep 17 00:00:00 2001
From: Fastman <gabayt0_0@icloud.com>
Date: Sun, 14 Apr 2024 18:06:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.astro    |  3 ++-
 src/components/ThemeIcon.astro | 49 ++++++++++++++++++++++++++++++++++
 src/layouts/GlobalLayout.astro | 17 +++++++++++-
 tailwind.config.mjs            |  5 ++--
 4 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ThemeIcon.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3e2af83..332ab12 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,3 +1,4 @@
 ---
+import ThemeIcon from "./ThemeIcon.astro";
 ---
-<header class="h-8">header</header>
+<header class="h-8 flex items-center justify-between">header<ThemeIcon /></header>
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
new file mode 100644
index 0000000..89f2a73
--- /dev/null
+++ b/src/components/ThemeIcon.astro
@@ -0,0 +1,49 @@
+---
+---
+<div class="flex flex-col justify-center w-fit">
+  <input type="checkbox" id="light-switch" class="light-switch sr-only" />
+  <label class="tada relative cursor-pointer p-2" for="light-switch">
+    <svg class="fill-current dark:hidden" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z"
+      />
+      <path d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z"
+      />
+    </svg>
+    <svg class="hidden fill-current dark:block" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z"
+      />
+      <path
+        d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z"
+      />
+    </svg>
+    <span class="sr-only">Switch to light / dark version</span>
+  </label>
+</div>
+
+<script>
+	const lightSwitches = document.querySelectorAll('.light-switch');
+	if (lightSwitches.length > 0) {
+		lightSwitches.forEach((lightSwitch: any, i) => {
+			if (localStorage.getItem('dark-mode') === 'true') {
+				lightSwitch.checked = true;
+			}
+			lightSwitch.addEventListener('click', () => {
+				const { checked } = lightSwitch;
+				lightSwitches.forEach((el: any, n) => {
+					if (n !== i) {
+						el.checked = checked;
+					}
+				});
+				if (lightSwitch.checked) {
+					document.documentElement.classList.add('dark');
+					localStorage.setItem('dark-mode', 'true');
+				} else {
+					document.documentElement.classList.remove('dark');
+					localStorage.setItem('dark-mode', 'false');
+				}
+			});
+		});
+	}
+</script>
\ No newline at end of file
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
index 3beab7f..baa8e15 100644
--- a/src/layouts/GlobalLayout.astro
+++ b/src/layouts/GlobalLayout.astro
@@ -7,8 +7,23 @@ import Header from "@/components/Header.astro";
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <meta charset="UTF-8" />
+
+    <!-- dark mode -->
+    <script>
+			if (
+				localStorage.getItem('dark-mode') === 'true' ||
+				(!('dark-mode' in localStorage) &&
+					window.matchMedia('(prefers-color-scheme: dark)').matches)
+			) {
+				localStorage.setItem('dark-mode', 'true');
+				document.querySelector('html')?.classList.add('dark');
+			} else {
+				localStorage.setItem('dark-mode', 'false');
+				document.querySelector('html')?.classList.remove('dark');
+			}
+		</script>
   </head>
-  <body class="h-full max-w-screen-md mx-auto px-4">
+  <body class="h-full max-w-screen-md mx-auto px-4 bg-neutral-100 text-neutral-950 dark:bg-neutral-800 dark:text-neutral-100">
     <Header />
     <slot />
     <Footer />
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 19f0614..3e9d65f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,8 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	darkMode: "class",
+	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
 	theme: {
 		extend: {},
 	},
 	plugins: [],
-}
+};