docusaurus-theme-redoc

Docusaurus Theme Redoc

This theme provides a Redoc and a ApiDoc theme component with a theme matching the default docusaurus classic theme and with dark mode support.

⚠️⚠️⚠️ NOTE: Not recommended for direct use. Use through main package instead: redocusaurus

Usage

1. Install theme:

   npm i --save docusaurus-theme-redoc
   

2. Add it as a theme to your docusaurus config:

   // docusaurus.config.js
   
   module.exports = {
     // ...
     themes: ['docusaurus-theme-redoc'],
     // ...
   };
   

Theme Components

Redoc

RedocStandalone with dark mode support, matching docusaurus classic theme.

import Redoc from '@theme/Redoc';

See here for full example.

ApiDoc

Includes a @theme/Layout wrapper over Redoc.

import ApiDoc from '@theme/ApiDoc';

See here for full example.

Options

{
   /**
   * Highlight color for docs
   */
   primaryColor: '#1890ff',
   /**
    * Highlight color for docs in dark mode, if different.
    * Will default to `primaryColor` if not set.
    */
   primaryColorDark: '#25c2a0',
   /**
   * Options to pass to redoc
   * @see https://github.com/redocly/redoc#redoc-options-object
   */
   options: { disableSearch: true },
   /**
   * Options to pass to override RedocThemeObject
   * @see https://github.com/Redocly/redoc#redoc-theme-object
   */
   theme: { typography: { fontSize: '16px' }},
}

primaryColor (string, hex/rgba value)

Convenient way to provide the highlighted color used by Redoc.
This value will be used as colors.primary.main in the themes option. Must be an actual color value and not a css variable.

primaryColorDark (string, hex/rgba value)

Optional way to change the highlighted color used by Redoc in dark mode. Defaults to primaryColor if not set. This value will be used as colors.primary.main in the themes option. Must be an actual color value and not a css variable.

options (optional, object)

Override redoc options passed to RedocStandalone component. See the defaults here.

Available properties here.
You cannot set theme property using this property, use theme option below instead.

theme (optional, object)

Override the redoc theme object passed to Redoc. See the default here.

Note: You should not provide any color using this property, as it will be the same value for dark and light themes.

Docs

See: https://redocusaurus.vercel.app/docs