north-star / files / src / platform / darkmode.ts

darkmode.ts

1	import { PUBLIC_SETTINGS } from '../public_settings';
2
3	export const DARK_MODE_STORAGE_KEY = 'friend-compass-dark-mode';
4
5	export const initDarkMode = (toggleButton: HTMLElement \| null) => {
6	const applyDarkMode = (dark: boolean) => {
7	document.body.classList.toggle('dark', dark);
8	if (toggleButton) {
9	toggleButton.textContent = dark
10	? PUBLIC_SETTINGS.ui.emojis.darkMode.on
11	: PUBLIC_SETTINGS.ui.emojis.darkMode.off;
12	}
13	localStorage.setItem(DARK_MODE_STORAGE_KEY, dark ? '1' : '0');
14	};
15
16	const storedDarkMode = localStorage.getItem(DARK_MODE_STORAGE_KEY);
17	const prefersDark = storedDarkMode !== null
18	? storedDarkMode === '1'
19	: window.matchMedia('(prefers-color-scheme: dark)').matches;
20
21	applyDarkMode(prefersDark);
22
23	if (toggleButton) {
24	toggleButton.addEventListener('click', () => {
25	applyDarkMode(!document.body.classList.contains('dark'));
26	});
27	}
28
29	return { applyDarkMode };
30	};