blob: 912c1d9863d106080497ca925f1bbe234fd23a7d (
plain)
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
/* Add elements listener */
window.addEventListener("load", () => {
// Menubar burgers click listenr
const burgers: Element[] = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"), 0);
if (burgers.length > 0) {
burgers.forEach((element) => {
element.addEventListener("click", () => {
const idstr = element.getAttribute("data-target");
element.classList.toggle("is-active");
if (!idstr) return;
const target = document.getElementById(idstr);
target?.classList.toggle("is-active");
}, false);
});
}
// Add header hover page class changer
const colorman = (mode: SystemDarkmodePrefrence) => {
let clsname: string = ".auto-dark";
const elements: Element[] = Array.prototype.slice.call(
document.querySelectorAll(clsname), 0);
elements.forEach((element) => {
if (mode === SystemDarkmodePrefrence.dark) {
element?.classList.add("is-dark");
element?.classList.remove("is-light");
} else {
element?.classList.add("is-light");
element?.classList.remove("is-dark");
}
})
}
darklistener.add(colorman);
// Add logo color selector
const logoman = (mode: SystemDarkmodePrefrence) => {
const logo = document.getElementById("logo");
const darksrc = logo?.getAttribute("data-src-darkmode");
const lightsrc = logo?.getAttribute("data-src-lightmode");
if (!logo || !darksrc || !lightsrc)
return;
let src = (mode === SystemDarkmodePrefrence.dark) ? darksrc : lightsrc;
logo.setAttribute("src", src);
}
darklistener.add(logoman);
});
/* Darkmode listener */
enum SystemDarkmodePrefrence {
dark = 0,
light = 1
};
class DarkmodeListener {
private _mode: SystemDarkmodePrefrence;
private _handlers: ((mode: SystemDarkmodePrefrence) => void)[];
public constructor() {
let darking = window.matchMedia('(prefers-color-scheme: dark)').matches;
this._mode = darking ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light;
this._handlers = [];
this._listen();
}
private _listen(): void {
let media = window.matchMedia('(prefers-color-scheme: dark)');
let callback = (event: MediaQueryListEvent) => {
let mode = event.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light;
this._handlers.forEach(handler => {
handler(mode);
});
this._mode = mode;
};
media.addEventListener("change", callback);
}
public add(callback: (mode: SystemDarkmodePrefrence) => void): void {
callback(this._mode);
this._handlers.push(callback);
}
public mode(): SystemDarkmodePrefrence {
return this._mode;
}
};
var darklistener = new DarkmodeListener();
|
