From 1dc4f56425209d4ce1d7bb78ec8b5e7b5a755a82 Mon Sep 17 00:00:00 2001
From: Anjana Vakil <contact@anjana.dev>
Date: Tue, 26 Aug 2025 12:40:16 -0500
Subject: reset

---
 frontend/src/components/Header.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 frontend/src/components/Header.js

(limited to 'frontend/src/components/Header.js')

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
new file mode 100644
index 0000000..cd50ba6
--- /dev/null
+++ b/frontend/src/components/Header.js
@@ -0,0 +1,33 @@
+import { Theme as ThemeIcon } from './Icons';
+
+const themeToggleId = 'theme';
+
+const Header = `
+<header>
+    <hgroup>
+        <h1 class=".parkinsans">event me</h1>
+        <p>All the events you never knew you needed to attend!</p>
+    </hgroup>
+    <a href="#" role="toggle" id="${themeToggleId}"  title="Toggle color scheme" >
+        ${ThemeIcon} 
+    </a>
+</header>
+`;
+
+export function setupThemeToggle() {
+    const toggleDarkMode = () => {
+        const doc = document.documentElement;
+        const currentTheme = doc.getAttribute('data-theme');
+        if (currentTheme === 'dark') {
+            doc.setAttribute('data-theme', 'lite');
+        } else if (currentTheme === 'light') {
+            doc.setAttribute('data-theme', 'dark');
+        }
+    }
+    const themeToggle = document.getElementById(themeToggleId);
+    themeToggle.addEventListener('click', toggleDarkMode);
+
+}
+
+
+export default Header
-- 
cgit v1.3