1 files changed, 33 insertions, 0 deletions
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