Echo Writes Code

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);
	});
});