@docusaurus/theme-common

useThemeConfig

The `useThemeConfig` hook allows you to access the theme configuration in your components. This is useful for customizing the appearance and behavior of your site based on the theme settings.

import { useThemeConfig } from '@docusaurus/theme-common';

const MyComponent = () => {
  const themeConfig = useThemeConfig();
  return <div>{JSON.stringify(themeConfig)}</div>;
};

useColorMode

The `useColorMode` hook provides access to the current color mode (light or dark) and a function to toggle it. This is useful for implementing dark mode support in your custom themes.

import { useColorMode } from '@docusaurus/theme-common';

const MyComponent = () => {
  const { colorMode, setColorMode } = useColorMode();
  return (
    <div>
      <p>Current color mode: {colorMode}</p>
      <button onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}>Toggle Color Mode</button>
    </div>
  );
};

useWindowSize

The `useWindowSize` hook provides the current window size, which can be useful for responsive design and adapting your components based on the viewport dimensions.

import { useWindowSize } from '@docusaurus/theme-common';

const MyComponent = () => {
  const windowSize = useWindowSize();
  return <div>Window size: {windowSize.width} x {windowSize.height}</div>;
};