blob: 7e86e9ac01672e8051e44d0c2910c5a5849a6625 (
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
|
'use strict';
var toggle_theme = document.getElementById('toggle_theme');
toggle_theme.href = 'javascript:void(0)';
toggle_theme.addEventListener('click', function () {
var dark_mode = document.body.classList.contains('light-theme');
set_mode(dark_mode);
helpers.storage.set('dark_mode', dark_mode ? 'dark' : 'light');
helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
});
// Handles theme change event caused by other tab
addEventListener('storage', function (e) {
if (e.key === 'dark_mode') {
update_mode(e.newValue);
}
});
addEventListener('DOMContentLoaded', function () {
const dark_mode = document.getElementById('dark_mode_pref').textContent;
// Update storage if dark mode preference changed on preferences page
helpers.storage.set('dark_mode', dark_mode);
update_mode(dark_mode);
});
var darkScheme = matchMedia('(prefers-color-scheme: dark)');
var lightScheme = matchMedia('(prefers-color-scheme: light)');
darkScheme.addListener(scheme_switch);
lightScheme.addListener(scheme_switch);
function scheme_switch (e) {
// ignore this method if we have a preference set
if (helpers.storage.get('dark_mode')) return;
if (!e.matches) return;
if (e.media.includes('dark')) {
set_mode(true);
} else if (e.media.includes('light')) {
set_mode(false);
}
}
function set_mode (bool) {
if (bool) {
// dark
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
document.body.classList.remove('no-theme');
document.body.classList.remove('light-theme');
document.body.classList.add('dark-theme');
} else {
// light
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
document.body.classList.remove('no-theme');
document.body.classList.remove('dark-theme');
document.body.classList.add('light-theme');
}
}
function update_mode (mode) {
if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') {
// If preference for dark mode indicated
set_mode(true);
}
else if (mode === 'false' /* for backwards compatibility */ || mode === 'light') {
// If preference for light mode indicated
set_mode(false);
}
else if (document.getElementById('dark_mode_pref').textContent === '' && matchMedia('(prefers-color-scheme: dark)').matches) {
// If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme
set_mode(true);
}
// else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
}
|
