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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
/*
Dark mode toggle for PmWiki
(c) 2024 Petko Yotov www.pmwiki.org/petko
licensed GNU GPLv2 or any more recent version released by the FSF.
*/
(function(__script__){
try {
var Config = JSON.parse(__script__.dataset.config);
}
catch(e) {
var Config = {};
}
function aE(el, ev, fn) {
if(typeof el == 'string') el = dqsa(el);
for(var i=0; i<el.length; i++) el[i].addEventListener(ev, fn);
}
function dqsa(str) { return document.querySelectorAll(str); }
function dce(tag) { return document.createElement(tag); }
function setStyles(el, obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
el.style[key] = obj[key];
}
}
}
var wLS = window.localStorage;
function getLS(key, parse) {
return wLS? wLS.getItem(key) : null;
}
function setLS(key, value) {
if(wLS) wLS.setItem(key, value);
}
function wmmd() {
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
return 1;
return 0;
}
function pref(enabled) {
var x = getLS('pmDarkToggled');
if(x === null) x = conftheme;
else x = parseInt(x);
if(enabled && x==2) return wmmd();
return x;
}
function toggleSheets(enabled) {
var themesheets = dqsa('link[rel="stylesheet"][data-theme]');
for(var i=0; i<themesheets.length; i++) {
var sheet = themesheets[i];
var isDark = sheet.dataset.theme == 'dark'? 1:0;
sheet.disabled = (isDark != enabled);
}
}
function toggleImages(enabled) {
var darkpics = dqsa('img[data-darksrc]');
for(var i=0; i<darkpics.length; i++) {
var pic = darkpics[i];
if(!pic.dataset.lightsrc) pic.dataset.lightsrc = pic.src;
pic.src = enabled ? pic.dataset.darksrc : pic.dataset.lightsrc;
}
}
var clist = document.documentElement.classList,
conftheme = Config.enable - 1, label = false, current = false;
var prev_dark = pref(1)
if(prev_dark) clist.add('pmDarkTheme');
toggleSheets(prev_dark);
function update(toggle) {
var isToggled = pref(); // 0=light, 1=dark, 2=auto
if(toggle) {
isToggled = (isToggled+1)%3;
setLS('pmDarkToggled', isToggled);
if(current) current.textContent = Config.modes[isToggled];
}
var enabled = isToggled==2? wmmd() : isToggled;
if(enabled == prev_dark) return;
prev_dark = enabled+0;
if(enabled) clist.add('pmDarkTheme');
else clist.remove('pmDarkTheme');
toggleSheets(enabled);
toggleImages(enabled);
}
function initLabel() {
label = dce('div');
label.className = 'frame darkThemeLabel';
setStyles(label, {
display: 'none',
zIndex: 1000,
position: 'fixed'
});
document.body.appendChild(label);
current = dce('mark');
label.append(Config.label, current);
}
function over() {
if(!label) initLabel();
current.textContent = Config.modes[pref()];
label.style.display = 'block';
var lrect = label.getBoundingClientRect()
rect = this.getBoundingClientRect(),
iw = window.innerWidth, ih = window.innerHeight,
lh = lrect.height, lw = lrect.width;
var left = (rect.left < iw-lw)
? rect.left + 'px'
: (iw-lw-10) + 'px';
label.style.left = left;
var top = (rect.top < lh)
? (rect.bottom) + 'px'
: (rect.top-lh) + 'px';
label.style.top = top;
}
function out(e) {
label.style.display = 'none';
}
aE([document], 'DOMContentLoaded', function(){
toggleSheets(prev_dark);
toggleImages(prev_dark);
if(! wLS) return; // no localStorage
aE('.pmToggleDarkTheme', 'mouseenter', over);
aE('.pmToggleDarkTheme', 'mouseleave', out);
aE('.pmToggleDarkTheme', 'click', update);
setInterval(update, 1000);// sync other tabs
});
aE([window], 'beforeprint', function(){
if(! prev_dark) return;
toggleSheets(0);
toggleImages(0);
});
aE([window], 'afterprint', function(){
if(! prev_dark) return;
toggleSheets(1);
toggleImages(1);
});
})(document.currentScript);
|
