assets/js/themes.js


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

var toggle_theme = document.getElementById('toggle_theme');
toggle_theme.href = 'javascript:void(0);';

toggle_theme.addEventListener('click', function () {
    var dark_mode = document.getElementById('dark_theme').media === 'none';

    var url = '/toggle_theme?redirect=false';
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.timeout = 10000;
    xhr.open('GET', url, true);

    set_mode(dark_mode);
    window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');

    xhr.send();
});

window.addEventListener('storage', function (e) {
    if (e.key === 'dark_mode') {
        update_mode(e.newValue);
    }
});

window.addEventListener('load', function () {
    window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent);
    // Update localStorage if dark mode preference changed on preferences page
    update_mode(window.localStorage.dark_mode);
});

function set_mode (bool) {
    document.getElementById('dark_theme').media = !bool ? 'none' : '';
    document.getElementById('light_theme').media = bool ? 'none' : '';

    if (bool) {
        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
    } else {
        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
    }
}

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 compaibility */ || mode === 'light') {
		// If preference for light mode indicated
		set_mode(false);
	}
    else if (document.getElementById('dark_mode_pref').textContent === '' && window.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)
}