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.