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
|
'use strict';
//
// script.js - script which handles:
//
// - set theme
// - theme switcher and burger menu event handlers
//
const D = document,
C = D.body.parentElement.classList,
L = localStorage,
M = window.matchMedia,
on = (el, id, fn) => el.addEventListener(id, fn);
// use theme if set, otherwise fall back to browser preference
if (L && L.theme && L.theme === 'dark') {
C.add('dark'); // theme set to "dark"
} else if ((!L || !L.theme) && M && M('(prefers-color-scheme: dark)').matches) {
C.add('dark'); // prefers dark color scheme
}
document.addEventListener('DOMContentLoaded', () => {
// theme toggle event handler
on(D.querySelector('.navbar-item[data-id="theme"]'), 'click', (e) => {
e.preventDefault(); // stop event
L.theme = C.toggle('dark') ? 'dark' : 'light'; // toggle
});
// iterate through burgers, bind to click events
D.querySelectorAll('.navbar-burger').forEach(e => on(e, 'click', () => {
// then toggle is-active on burger and menu
[e, D.getElementById(e.dataset.target)].forEach(
e => e.classList.toggle('is-active')
)
}));
});
|
