blob: d52db1188dc0d706d920368480e8e0235bfa2a39 (
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
|
const body = document.body;
const darkModeToggle = document.getElementById('dark-mode-toggle');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
// Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
if (localStorage.getItem("colorscheme")) {
setTheme(localStorage.getItem("colorscheme"));
} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
} else {
setTheme(darkModeMediaQuery.matches ? "dark" : "light");
}
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => {
let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
setTheme(theme);
rememberTheme(theme);
});
}
darkModeMediaQuery.addListener((event) => {
setTheme(event.matches ? "dark" : "light");
});
document.addEventListener("DOMContentLoaded", function () {
let node = document.querySelector('.preload-transitions');
node.classList.remove('preload-transitions');
});
function setTheme(theme) {
body.classList.remove('colorscheme-auto');
let inverse = theme === 'dark' ? 'light' : 'dark';
body.classList.remove('colorscheme-' + inverse);
body.classList.add('colorscheme-' + theme);
}
function rememberTheme(theme) {
localStorage.setItem('colorscheme', theme);
}
|
