@atlaskit/app-provider/dist/cjs/theme-provider/hooks/use-theme.js

A top level provider for the Design System.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTheme = useTheme;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _getGlobalTheme = require("@atlaskit/tokens/get-global-theme");
var _themeMutationObserver = require("@atlaskit/tokens/theme-mutation-observer");
var _theme = require("../context/theme");
/**
 * __useTheme()__
 *
 * Returns the current theme settings for the nearest `ThemeProvider` in the
 * React tree.
 *
 * The returned object contains the named theme IDs for each slot: `light`,
 * `dark`, `spacing`, and `typography`. Use `useSetTheme` to change these
 * values at runtime.
 *
 * This hook can be used both inside and outside `AppProvider`. When used
 * inside a nested `ThemeProvider`, it reflects the theme of that sub-tree.
 *
 * @returns The current theme settings object.
 *
 * @example
 * ```tsx
 * function ThemeDisplay() {
 *   const theme = useTheme();
 *
 *   return (
 *     <p>
 *       Light theme: {theme.light}, Dark theme: {theme.dark}
 *     </p>
 *   );
 * }
 * ```
 */
function useTheme() {
  var theme = (0, _react.useContext)(_theme.ThemeContext);
  var _useState = (0, _react.useState)(theme || (0, _getGlobalTheme.getGlobalTheme)()),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    resolvedTheme = _useState2[0],
    setResolvedTheme = _useState2[1];
  (0, _react.useEffect)(function () {
    // We are using theme from context so no need to reference the DOM
    if (theme) {
      return;
    }
    var observer = new _themeMutationObserver.ThemeMutationObserver(setResolvedTheme);
    observer.observe();
    return function () {
      return observer.disconnect();
    };
  }, [theme]);
  return theme ? theme : resolvedTheme;
}