How to use the theme-ui.useThemeUI function in theme-ui

export default props => {
  const context = useThemeUI()
  const [status, setStatus] = useState()

  const save = async e => {
    e.preventDefault()
    setStatus('saving')
    const theme = JSON.stringify(context.theme, null, 2)
    const res = await ky.post('/___theme', {
      json: {
        theme,
      },
    })
    if (!res.ok) setStatus('error')
    else setStatus(null)
    // const text = await res.text()
  }

export default props => {
  const context = useThemeUI()
  const mode = context.colorMode

  const onChange = key => val => {
    let next = {}
    if (mode && mode !== context.theme.initialColorMode) {
      next = {
        colors: {
          modes: {
            [mode]: {
              [key]: val.hex,
            },
          },
        },
      }
    } else {
      next = {

export const useBreakpointIndex = () => {
  const context = useThemeUI()
  const breakpoints =
    (context.theme && context.theme.breakpoints) || defaultBreakpoints

  const getIndex = useCallback(
    () =>
      breakpoints.filter(
        breakpoint =>
          window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
      ).length,
    [breakpoints]
  )

  const [value, setValue] = useState(getIndex)

  useEffect(() => {
    const onResize = () => {

export const usePrismTheme = () => {
  const themeUI = useThemeUI();
  const prismTheme = get(themeUI.theme, 'prismTheme');
  const colorMode: string = get(themeUI, 'colorMode', 'light');
  const themeToUse = defaultTo(
    prismTheme,
    get(
      themeUI.theme,
      `prism.${colorMode}`,
      get(getTheme(), `prism.${colorMode}`)
    )
  );

  return themeToUse;
};

function StylesProvider({
  theme = {},
  children
}: {
  theme?: CodeSurferTheme;
  children: React.ReactNode;
}) {
  const outer = useThemeUI().theme || {};

  const base = {
    ...baseTheme,
    ...outer,
    styles: {
      ...baseTheme.styles,
      ...outer.styles
    }
  };

  return (
    
      {children}
    
  );
}

function useStyles(): CodeSurferStyles {
  const { theme } = useThemeUI();
  return (theme as any).styles.CodeSurfer;
}

function MobilePresenter({
  allNotes,
  noteIndex,
  children,
  windowWidth,
  previous,
  next,
  slides,
  index
}) {
  const ratio = 16 / 9;
  const deckHeight = windowWidth / ratio;
  const windowHeight = window.innerHeight;
  const separatorHeight = 6;
  const notesHeight = windowHeight - deckHeight - separatorHeight;
  const { colors } = useThemeUI();

  const progress = (100 * (index + 1)) / slides.length;
  return (
    <div style="{{">
      </div>

export const useEditor = () => {
  const themeui = useThemeUI()
  const editor = useContext(EditorContext)
  return editor || themeui
}