Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@docusaurus/theme-common

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@docusaurus/theme-common

Common code for Docusaurus themes.

3.6.1
latest
Source
npm

Version published: 6 days ago

Weekly downloads: 139K; decreased by-54.73%

Maintainers: 4

Weekly downloads

Created: 4 years ago

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