color-scheme-switcher.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
window.addEventListener('DOMContentLoaded', () => { const CHECKBOX_QUERY = '#color-scheme-switcher > input[type="checkbox"]'; const DARK_MODE = 'dark'; const LIGHT_MODE = 'light'; const DARK_MODE_QUERY = '(prefers-color-scheme: dark)'; const USER_COLOR_SCHEME_KEY = 'gitten-color-scheme'; let systemColorScheme = matchMedia(DARK_MODE_QUERY).matches ? DARK_MODE : LIGHT_MODE; let userColorScheme = localStorage.getItem(USER_COLOR_SCHEME_KEY); if (userColorScheme) { if (userColorScheme == DARK_MODE) { document.body.classList.add('dark-mode'); } else { document.body.classList.add('light-mode'); } } else { userColorScheme = systemColorScheme; } let darkModeEnabledCheckbox = document.querySelector(CHECKBOX_QUERY); if (userColorScheme == DARK_MODE) { darkModeEnabledCheckbox.checked = true; } else { darkModeEnabledCheckbox.checked = false; } darkModeEnabledCheckbox.addEventListener('change', () => { if (userColorScheme == DARK_MODE) { userColorScheme = LIGHT_MODE; document.body.classList.add('light-mode'); document.body.classList.remove('dark-mode'); } else { userColorScheme = DARK_MODE; document.body.classList.add('dark-mode'); document.body.classList.remove('light-mode'); } localStorage.setItem(USER_COLOR_SCHEME_KEY, userColorScheme); }); });