1 files changed, 40 insertions, 0 deletions
diff --git a/frontend/src/components/Header.ts b/frontend/src/components/Header.ts
new file mode 100644
index 0000000..11da46f
--- /dev/null
+++ b/frontend/src/components/Header.ts
@@ -0,0 +1,40 @@
+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>
+`;
+
+type Theme = "dark" | "light";
+
+const toggleDarkMode = () => {
+  const doc = document.documentElement;
+  const currentTheme = doc.getAttribute("data-theme");
+  let newTheme: Theme;
+  if (currentTheme === "dark") {
+    newTheme = "light";
+    doc.setAttribute("data-theme", newTheme);
+  } else if (currentTheme === "light") {
+    newTheme = "dark";
+    doc.setAttribute("data-theme", newTheme);
+  }
+};
+export function setupThemeToggle() {
+  const themeToggle = document.getElementById(themeToggleId);
+  if (!themeToggle) {
+    console.error("Missing Toggle");
+    return;
+  }
+  themeToggle.addEventListener("click", toggleDarkMode);
+}
+
+export default Header;