Source: react/hooks/paragon/useTrackColorSchemeChoice.js

import { useEffect } from 'react';

import { sendTrackEvent } from '../../../analytics';

/**
 * A custom React hook that listens for changes in the system's color scheme preference (via `matchMedia`)
 * and sends an event with the chosen color scheme (either `light` or `dark`) to the provided tracking service.
 * It sends an event both when the hook is first initialized (to capture the user's initial preference)
 * and when the system's color scheme preference changes.
 *
 * @memberof module:React
 */
const useTrackColorSchemeChoice = () => {
  useEffect(() => {
    const trackColorSchemeChoice = ({ matches }) => {
      const preferredColorScheme = matches ? 'dark' : 'light';
      sendTrackEvent('openedx.ui.frontend-platform.prefers-color-scheme.selected', { preferredColorScheme });
    };
    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
    if (colorSchemeQuery) {
      // send user's initial choice
      trackColorSchemeChoice(colorSchemeQuery);
      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
    }
    return () => {
      if (colorSchemeQuery) {
        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
      }
    };
  }, []);
};

export default useTrackColorSchemeChoice;