import { useMemo, useRef } from 'react';
import { useColorMode as useDocuColorMode } from '@docusaurus/theme-common';
import useIsBrowser from '@docusaurus/useIsBrowser';

export const useColorMode = () => {
  const { colorMode } = useDocuColorMode();
  const isBrowser = useIsBrowser();
  const renderCount = useRef(0);

  return useMemo(() => {
    if (!isBrowser) {
      return;
    }
    renderCount.current += 1;
    if (renderCount.current === 1) {
      return document.documentElement.getAttribute('data-theme');
    }
    return colorMode;
  }, [colorMode, isBrowser]);
};
