Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 1x 2x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | import { useEffect } from 'react';
import type { ColorSchemeOutput } from './ColorScheme';
import { COLOR_SCHEMES } from './colorSchemeConstants';
import usePersistedColorScheme from './usePersistedColorScheme';
const COLOR_SCHEME_DATA_ATTR_NAME = 'data-fratch_color_scheme';
const COLOR_SCHEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
export default function useColorSchemeMediaQuery(): ColorSchemeOutput {
const initialColorScheme = window.matchMedia(COLOR_SCHEME_MEDIA_QUERY).matches
? COLOR_SCHEMES.DARK
: COLOR_SCHEMES.LIGHT;
const [colorScheme, setColorScheme] =
usePersistedColorScheme(initialColorScheme);
useEffect(() => {
document.body.setAttribute(COLOR_SCHEME_DATA_ATTR_NAME, colorScheme);
}, [colorScheme]);
useEffect(() => {
const handler = (e: MediaQueryListEvent): void => {
setColorScheme(e.matches ? COLOR_SCHEMES.DARK : COLOR_SCHEMES.LIGHT);
};
window
.matchMedia(COLOR_SCHEME_MEDIA_QUERY)
.addEventListener('change', handler);
return () => {
window
.matchMedia(COLOR_SCHEME_MEDIA_QUERY)
.removeEventListener('change', handler);
};
}, [setColorScheme]);
return [colorScheme, setColorScheme];
}
|