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
43
44
45
46
47
48
49
50
'use strict'; window.addEventListener('DOMContentLoaded', () => { const CHECKBOX_QUERY = '#color-scheme-switcher > input[type="checkbox"]'; const DARK_MODE_KEY = 'dark'; const LIGHT_MODE_KEY = 'light'; const DARK_MODE_CLASS = 'dark-mode'; const LIGHT_MODE_CLASS = 'light-mode'; const DARK_MODE_QUERY = '(prefers-color-scheme: dark)'; const USER_COLOR_SCHEME_KEY = 'gitten-color-scheme'; const document = window.document; const localStorage = window.localStorage; const matchMedia = window.matchMedia; let systemColorScheme = matchMedia(DARK_MODE_QUERY).matches ? DARK_MODE_KEY : LIGHT_MODE_KEY; let userColorScheme = localStorage.getItem(USER_COLOR_SCHEME_KEY); if (userColorScheme) { if (userColorScheme == DARK_MODE_KEY) { document.body.classList.add(DARK_MODE_CLASS); } else { document.body.classList.add(LIGHT_MODE_CLASS); } } else { userColorScheme = systemColorScheme; } const darkModeEnabledCheckbox = document.querySelector(CHECKBOX_QUERY); if (userColorScheme == DARK_MODE_KEY) { darkModeEnabledCheckbox.checked = true; } else { darkModeEnabledCheckbox.checked = false; } darkModeEnabledCheckbox.addEventListener('change', () => { if (userColorScheme == DARK_MODE_KEY) { userColorScheme = LIGHT_MODE_KEY; document.body.classList.add(LIGHT_MODE_CLASS); document.body.classList.remove(DARK_MODE_CLASS); } else { userColorScheme = DARK_MODE_KEY; document.body.classList.add(DARK_MODE_CLASS); document.body.classList.remove(LIGHT_MODE_CLASS); } localStorage.setItem(USER_COLOR_SCHEME_KEY, userColorScheme); }); });