Prefers Color Scheme JavaScript React

setGlobalRootColor.js

export function setGlobalRootColor() {
	try {
		const rootElement = document.documentElement;
		const classList = rootElement.classList;
		classList.remove('light', 'dark');

		const themePreference = localStorage.getItem('theme');
		if (themePreference === 'system' || (!themePreference && true)) {
			const prefersDark = '(prefers-color-scheme: dark)';
			const darkModeMediaQuery = window.matchMedia(prefersDark);
			if (darkModeMediaQuery.media !== prefersDark || darkModeMediaQuery.matches) {
				rootElement.style.colorScheme = 'dark';
				classList.add('dark');
			} else {
				rootElement.style.colorScheme = 'light';
				classList.add('light');
			}
		} else if (themePreference) {
			classList.add(themePreference);
		}
		if (themePreference === 'light' || themePreference === 'dark') {
			rootElement.style.colorScheme = themePreference;
		}
	} catch (error) {}
}

useColorScheme.tsx

import React from 'react';

interface useColorSchemeParams<T> {
	light: T;
	dark: T;
}

export const useColorScheme = <T>({ light, dark }: useColorSchemeParams<T>): T => {
	const [colorScheme, setColorScheme] = React.useState<T>(light);

	React.useEffect(() => {
		if (!window.matchMedia) return;

		const query = window.matchMedia('(prefers-color-scheme: dark)');
		setColorScheme(query.matches ? dark : light);

		const onChange = () => setColorScheme(query.matches ? dark : light);
		query.addEventListener('change', onChange);
		return () => query.removeEventListener('change', onChange);
	}, [light, dark]);

	return colorScheme;
};

export const useGlobalRootColor = () =>
	React.useEffect(function useGlobalRootColor() {
		if (!window.matchMedia) return;
		const query = window.matchMedia('(prefers-color-scheme: dark)');
		setGlobalRootColor();
		const onChange = () => setGlobalRootColor();
		query.addEventListener('change', onChange);
		return () => query.removeEventListener('change', onChange);
	}, []);