@atlaskit/tokens/dist/es2019/utils/theme-loading.js

Design tokens are the single source of truth to name and store design decisions.

import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
import { loadThemeCss } from './load-theme-css';
export const loadAndAppendThemeCss = async themeId => {
  if (document.head.querySelector(`style[${THEME_DATA_ATTRIBUTE}="${themeId}"]:not([${CUSTOM_THEME_ATTRIBUTE}])`)) {
    return;
  }

  // Gracefully handles falsy values like `null` and `undefined` when maker ignore TS
  // to avoid loading default themes.
  if (!themeId) {
    return;
  }
  const themeCss = await loadThemeCss(themeId);
  const style = document.createElement('style');
  style.textContent = themeCss;
  style.dataset.theme = themeId;
  document.head.appendChild(style);
};
export const darkModeMediaQuery = '(prefers-color-scheme: dark)';
export const moreContrastMediaQuery = '(prefers-contrast: more)';
export { loadThemeCss } from './load-theme-css';