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

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