themes/hugo-coder/assets/js/coder.js

564f36e0fffbe296c499cb33322d59b49ead4913 · 1.4 KB · 40 lines raw

1 const body = document.body;
2 const darkModeToggle = document.getElementById('dark-mode-toggle');
3 const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
4
5 // Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
6 if (localStorage.getItem("colorscheme")) {
7 setTheme(localStorage.getItem("colorscheme"));
8 } else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
9 setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
10 } else {
11 setTheme(darkModeMediaQuery.matches ? "dark" : "light");
12 }
13
14 if (darkModeToggle) {
15 darkModeToggle.addEventListener('click', () => {
16 let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
17 setTheme(theme);
18 rememberTheme(theme);
19 });
20 }
21
22 darkModeMediaQuery.addListener((event) => {
23 setTheme(event.matches ? "dark" : "light");
24 });
25
26 document.addEventListener("DOMContentLoaded", function () {
27 let node = document.querySelector('.preload-transitions');
28 node.classList.remove('preload-transitions');
29 });
30
31 function setTheme(theme) {
32 body.classList.remove('colorscheme-auto');
33 let inverse = theme === 'dark' ? 'light' : 'dark';
34 body.classList.remove('colorscheme-' + inverse);
35 body.classList.add('colorscheme-' + theme);
36 }
37
38 function rememberTheme(theme) {
39 localStorage.setItem('colorscheme', theme);
40 }