@docusaurus/theme-common

What is @docusaurus/theme-common?

@docusaurus/theme-common is a package that provides common utilities and components for building themes in Docusaurus, a popular static site generator. It includes shared components, hooks, and utilities that can be used to create custom themes or extend existing ones.

What are @docusaurus/theme-common's main functionalities?

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>;
};

Other packages similar to @docusaurus/theme-common

gatsby-theme

Gatsby themes allow you to share functionality across multiple Gatsby sites. Similar to @docusaurus/theme-common, Gatsby themes provide a way to encapsulate and reuse common components, hooks, and utilities. However, Gatsby themes are specific to the Gatsby ecosystem.

next-themes

next-themes is a library for managing themes in Next.js applications. It provides similar functionality to @docusaurus/theme-common, such as theme configuration and color mode management, but is designed specifically for Next.js.

styled-components

styled-components is a popular library for styling React applications using tagged template literals. While it doesn't provide theme-specific utilities like @docusaurus/theme-common, it offers powerful theming capabilities through its ThemeProvider component.

README

@docusaurus/theme-common

Common code for Docusaurus themes.