Merge pull request #18 from hayato-osh/feature/dark-mode

feat: ダークモードを実装
hayato-osh · Apr 14, 2024 · 7af087d · 7af087d
2 parents f722a7a + 94aed5f
commit 7af087d
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 4 deletions.
diff --git 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
@@ -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>
diff --git 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
@@ -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: [],
-}
+};