@atlaskit/app-provider/dist/esm/theme-provider/hooks/use-color-mode.js

A top level provider for the Design System.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useContext, useEffect, useState } from 'react';
import { getGlobalTheme } from '@atlaskit/tokens/get-global-theme';
import { ThemeMutationObserver } from '@atlaskit/tokens/theme-mutation-observer';
import { ColorModeContext } from '../context/color-mode';

/**
 * __useColorMode()__
 *
 * Returns the active (reconciled) color mode for the current theme context.
 *
 * When the color mode is set to `'auto'`, this hook returns the resolved value
 * (`'light'` or `'dark'`) based on the system color scheme preference.
 * it will never return `'auto'`. Use `useSetColorMode` to change the color mode.
 *
 * This hook can be used both inside and outside `AppProvider`. When used inside
 * a nested `ThemeProvider`, it reflects the color mode of that sub-tree.
 *
 * @returns The current reconciled color mode: `'light'` or `'dark'`.
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const colorMode = useColorMode();
 *
 *   return <p>Current color mode: {colorMode}</p>;
 * }
 * ```
 */
export function useColorMode() {
  var value = useContext(ColorModeContext);

  // TODO: This will only return 'light' or 'dark' but never 'auto', which in some cases
  // may be desirable. We should consider returning both the reconciled color mode (e.g. 'light' or 'dark') and the selected color mode ("auto").
  var theme = getGlobalTheme();
  var _useState = useState((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light'),
    _useState2 = _slicedToArray(_useState, 2),
    resolvedColorMode = _useState2[0],
    setResolvedColorMode = _useState2[1];
  useEffect(function () {
    // We are using theme from context so no need to reference the DOM
    if (value) {
      return;
    }
    var observer = new ThemeMutationObserver(function (theme) {
      setResolvedColorMode((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light');
    });
    observer.observe();
    return function () {
      return observer.disconnect();
    };
  }, [value]);
  return value ? value : resolvedColorMode;
}