blob: cd50ba6b757cb280e4522b2008a4b15151e848f7 (
plain) (
blame)
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
|
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
|
