js/toggle.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
59
60
61

const moon = document.getElementById('moon');
const sun = document.getElementById('sun');

if (!document.cookie.includes('preference')) {
    setPreference(true);
} else {
    const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1];
    if (preference === 'true') {
        turnLight();
    } else {
        turnDark();
    }

}

function setPreference(value) {
    if (typeof value === 'boolean') {
        const expires = new Date();
        expires.setFullYear(expires.getFullYear() + 1); // 1 year
        document.cookie = `preference=${value};expires=${expires.toUTCString()};path=/`;
        turnLight();
    }
}

function turnLight() {
    document.documentElement.classList.add('light');

    moon.style.opacity = '0';
    sun.style.opacity = '1';

    setTimeout(() => {
        moon.style.display = 'none';
        sun.style.display = 'block';
    }
    , 100);
}

function turnDark() {
    document.documentElement.classList.remove('light');

    sun.style.opacity = '0';
    moon.style.opacity = '1';

    setTimeout(() => {
        sun.style.display = 'none';
        moon.style.display = 'block';
    }
    , 100);
}

moon.addEventListener('click', () => {
    document.documentElement.classList.add('light');
    setPreference(true);
    turnLight();
});

sun.addEventListener('click', () => {
    document.documentElement.classList.remove('light');
    setPreference(false);
    turnDark();
});