@wise/components-theming/dist/useTheme.mjs

Provides theming support for the Wise Design system components

import { useContext, useMemo } from 'react';
import { ThemeContext } from './ThemeProviderContext.mjs';
import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
import { getThemeClassName, isScreenModeDark, isForestGreenTheme, isThemeModern } from './helpers.mjs';

const FALLBACK_VALUES = {
  theme: DEFAULT_BASE_THEME,
  screenMode: DEFAULT_SCREEN_MODE,
  setTheme: () => {},
  setScreenMode: () => {}
};
const isNotProduction = () => {
  try {
    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
  } catch {
    return false;
  }
};
const useTheme = () => {
  const theming = useContext(ThemeContext);
  if (!theming && isNotProduction()) {
    // eslint-disable-next-line no-console
    console.warn('Call to useTheme outside a ThemeProvider');
  }
  const {
    theme,
    screenMode,
    setTheme,
    setScreenMode
  } = theming ?? FALLBACK_VALUES;
  return useMemo(() => ({
    theme,
    screenMode,
    /**
     * @deprecated there is no more such thing as "modern" theme
     */
    isModern: isThemeModern(),
    isForestGreenTheme: isForestGreenTheme(theme),
    isScreenModeDark: isScreenModeDark(theme, screenMode),
    className: getThemeClassName(theme, screenMode),
    setTheme,
    setScreenMode
  }), [theme, screenMode, setTheme, setScreenMode]);
};

export { useTheme };
//# sourceMappingURL=useTheme.mjs.map