src/utils/hooks/use-system-color-scheme/use-system-color-scheme.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { useCallback, useState } from 'react';
import { getThemeFromSystem } from '../../helpers';
import { useMatchMedia } from '../use-match-media';

export type SystemColorScheme = 'dark' | 'light';

/**
 * React hook to retrieve the system color scheme based on user preferences,
 * and to watch for changes.
 *
 * @returns {SystemColorScheme} The system color scheme
 */
export const useSystemColorScheme = () => {
  const [colorScheme, setColorScheme] =
    useState<SystemColorScheme>(getThemeFromSystem);

  const updateColorScheme = useCallback(() => {
    setColorScheme(getThemeFromSystem);
  }, []);

  useMatchMedia('(prefers-color-scheme: dark)', updateColorScheme);

  return colorScheme;
};