From 107f2f07474bfed0591af84ba981d022ab172117 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 23 Feb 2023 20:22:22 +0100
Subject: [PATCH] feat(astro): add theme toggle

---
 src/components/ThemeToggle.astro | 49 ++++++++++++++++++++++++++++++++
 src/icons/circle.svg             |  2 +-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ThemeToggle.astro

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
new file mode 100644
index 0000000..b8a97b7
--- /dev/null
+++ b/src/components/ThemeToggle.astro
@@ -0,0 +1,49 @@
+---
+import { Sprite } from 'astro-icon';
+---
+
+<theme-toggle
+	class="col-start-18 flex h-[40px] w-[40px] items-center self-center justify-center justify-self-center print:hidden"
+>
+	<button
+		aria-label="Switch color theme"
+		class="theme-toggle group flex h-[40px] w-[40px] cursor-pointer items-center justify-center self-center border-0 text-[0]"
+	>
+		<Sprite
+			name="circle"
+			class="duration-500 h-[25px] w-[25px] transition-transform ease-in-out group-hover:scale-125 group-focus:scale-125"
+		/>
+	</button>
+</theme-toggle>
+
+<script>
+	class ThemeToggle extends HTMLElement {
+		constructor() {
+			super();
+			const button = this.querySelector('button')!;
+			const setTheme = (dark: boolean) => {
+				document.documentElement.classList[dark ? 'add' : 'remove']('dark');
+				button.setAttribute('aria-pressed', String(dark));
+			};
+
+			button.addEventListener('click', () => {
+				setTheme(!this.isDark());
+				button.blur();
+			});
+
+			setTheme(this.isDark());
+		}
+
+		isDark() {
+			return document.documentElement.classList.contains('dark');
+		}
+	}
+
+	customElements.define('theme-toggle', ThemeToggle);
+</script>
+
+<style>
+	:global(.no-js) theme-toggle {
+		display: none;
+	}
+</style>
diff --git a/src/icons/circle.svg b/src/icons/circle.svg
index 03510b2..8b7a384 100644
--- a/src/icons/circle.svg
+++ b/src/icons/circle.svg
@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><circle cx="12" cy="12" r="9.967"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><circle cx="12" cy="12" r="5"/></svg>