frontend/src/components/Header.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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;