@dnb/eufemia/es/shared/Theme.js

DNB Eufemia Design System UI Library

"use client";

import { Fragment, useContext, useRef } from 'react';
import clsx from 'clsx';
import Context from "./Context.js";
import Provider from "./Provider.js";
import { extendPropsWithContext } from "./component-helper.js";
import withComponentMarkers from "./helpers/withComponentMarkers.js";
import useMediaQuery from "./useMediaQuery.js";
import useIsomorphicLayoutEffect from "./helpers/useIsomorphicLayoutEffect.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function Theme(themeProps) {
  const context = useContext(Context);
  const {
    children,
    element,
    name,
    variant,
    size,
    contrastMode,
    colorScheme,
    surface,
    ...restProps
  } = themeProps;
  const prefersDarkColorScheme = useMediaQuery({
    query: '(prefers-color-scheme: dark)',
    disabled: colorScheme !== 'auto'
  });
  const activeColorScheme = colorScheme === 'auto' ? globalThis.__eufemiaColorScheme || (prefersDarkColorScheme ? 'dark' : 'light') : colorScheme;
  useIsomorphicLayoutEffect(() => {
    delete globalThis.__eufemiaColorScheme;
  }, []);
  const theme = extendPropsWithContext({
    name,
    variant,
    size,
    contrastMode,
    colorScheme: activeColorScheme,
    surface
  }, null, context?.theme);
  if (surface === 'initial') {
    theme.surface = undefined;
  }
  return _jsx(Provider, {
    theme: theme,
    children: _jsx(ThemeWrapper, {
      element: element,
      theme: theme,
      ...restProps,
      children: children
    })
  });
}
Theme.Context = ({
  element,
  ...themeProps
}) => {
  return _jsx(Theme, {
    ...themeProps,
    element: false
  });
};
withComponentMarkers(Theme.Context, {
  _supportsSpacingProps: 'passthrough'
});
export function ThemeWrapper({
  children,
  theme,
  element = null,
  className = null,
  ...rest
}) {
  const Wrapper = element === false ? Fragment : element || 'div';
  const ref = useRef(null);
  useSyncBodyColorScheme(theme);
  useSyncElementColorScheme(ref, theme);
  const classNames = getThemeClasses(theme, className);
  const {
    name,
    variant,
    size
  } = theme;
  if (Wrapper === Fragment) {
    return children;
  }
  rest['ref'] = ref;
  return _jsx(Wrapper, {
    "data-name": name,
    "data-variant": variant,
    "data-size": size,
    className: classNames,
    ...rest,
    children: children
  });
}
export function getThemeClasses(theme, className = null) {
  if (!theme) {
    return className;
  }
  const {
    name,
    variant,
    size,
    contrastMode,
    colorScheme
  } = theme;
  return clsx(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), contrastMode && 'eufemia-theme__contrast-mode', colorScheme && `eufemia-theme__color-scheme--${colorScheme}`, size && `eufemia-theme__size--${size}`);
}
function useSyncElementColorScheme(ref, theme) {
  const colorScheme = theme?.colorScheme;
  useIsomorphicLayoutEffect(() => {
    const el = ref.current;
    if (!el || !colorScheme) {
      return;
    }
    el.classList.remove('eufemia-theme__color-scheme--light', 'eufemia-theme__color-scheme--dark');
    el.classList.add(`eufemia-theme__color-scheme--${colorScheme}`);
  }, [colorScheme]);
}
function useSyncBodyColorScheme(theme) {
  const colorScheme = theme?.colorScheme;
  useIsomorphicLayoutEffect(() => {
    if (typeof document === 'undefined' || !colorScheme) {
      return;
    }
    document.body.classList.remove('eufemia-theme__color-scheme--light', 'eufemia-theme__color-scheme--dark');
    document.body.classList.add(`eufemia-theme__color-scheme--${colorScheme}`);
  }, [colorScheme]);
}
const STORAGE_KEY = 'eufemia-theme';
export function getTheme(defaultTheme = 'ui') {
  if (typeof window === 'undefined') {
    return {
      name: defaultTheme
    };
  }
  try {
    const data = window.localStorage.getItem(STORAGE_KEY);
    const theme = JSON.parse(data?.startsWith('{') ? data : '{}');
    const regex = /.*eufemia-theme=([^&]*).*/;
    const query = window.location.search;
    const fromQuery = regex.test(query) && query?.replace(regex, '$1') || null;
    const name = fromQuery || theme?.name || defaultTheme;
    return {
      ...theme,
      name
    };
  } catch {
    return {
      name: defaultTheme
    };
  }
}
export function setTheme(themeProps, callback) {
  if (typeof window === 'undefined') {
    return;
  }
  try {
    const theme = {
      ...getTheme(),
      ...themeProps
    };
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(theme));
    callback?.(theme);
  } catch {}
}
//# sourceMappingURL=Theme.js.map