3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: move @theme/hooks to @docusaurus/theme-common (#6289)

Browse source
This commit is contained in:
Sébastien Lorber 2022-01-07 19:19:35 +01:00 • committed by GitHub
parent 024f2bf49b
commit f87a3ead46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 245 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

10
website/docs/api/themes/theme-configuration.md
View file

@ -905,20 +905,20 @@ module.exports = {
## Hooks {#hooks}
### `useThemeContext` {#usethemecontext}
### `useColorMode` {#use-color-mode}
React hook to access theme context. This context contains functions for setting light and dark mode and exposes boolean variable, indicating which mode is currently in use.
A React hook to access the color context. This context contains functions for setting light and dark mode and exposes boolean variable, indicating which mode is currently in use.
Usage example:
```jsx
import React from 'react';
// highlight-next-line
import useThemeContext from '@theme/hooks/useThemeContext';
import {useColorMode} from '@docusaurus/theme-common';
const Example = () => {
// highlight-next-line
const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
return <h1>Dark mode is now {isDarkTheme ? 'on' : 'off'}</h1>;
};
@ -926,7 +926,7 @@ const Example = () => {
:::note
The component calling `useThemeContext` must be a child of the `Layout` component.
The component calling `useColorMode` must be a child of the `Layout` component.
```jsx
function ExamplePage() {