Theme configuration

This configuration applies to all main themes.

Common

Color mode

The classic theme provides by default light and dark mode support, with a navbar switch for the user.

It is possible to customize the color mode support within the colorMode object.

Accepted fields:

mdx-code-block

<APITable>

Name	Type	Default	Description
`defaultMode`	`'light' \| 'dark'`	`'light'`	The color mode when user first visits the site.
`disableSwitch`	`boolean`	`false`	Hides the switch in the navbar. Useful if you want to support a single color mode.
`respectPrefersColorScheme`	`boolean`	`false`	Whether to use the `prefers-color-scheme` media-query, using user system preferences, instead of the hardcoded `defaultMode`.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    colorMode: {      defaultMode: 'light',      disableSwitch: false,      respectPrefersColorScheme: false,    },  },};

Meta image

You can configure a default image that will be used for your meta tag, in particular og:image and twitter:image.

Accepted fields:

mdx-code-block

<APITable>

Name	Type	Default	Description
`image`	`string`	`undefined`	The meta image URL for the site. Relative to your site's "static" directory. Cannot be SVGs. Can be external URLs too.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    image: 'img/docusaurus.png',  },};

Metadata

You can configure additional HTML metadata (and override existing ones).

Accepted fields:

mdx-code-block

<APITable>

Name	Type	Default	Description
`metadata`	`Metadata[]`	`[]`	Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    metadata: [{name: 'twitter:card', content: 'summary'}],  },};

Announcement bar

Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissible panel above the navbar. All configuration are in the announcementBar object.

Accepted fields:

mdx-code-block

<APITable name="announcement-bar">

Name	Type	Default	Description
`id`	`string`	`'announcement-bar'`	Any value that will identify this message.
`content`	`string`	`''`	The text content of the announcement. HTML will be interpolated.
`backgroundColor`	`string`	`'#fff'`	Background color of the entire bar.
`textColor`	`string`	`'#000'`	Announcement text color.
`isCloseable`	`boolean`	`true`	Whether this announcement can be dismissed with a '×' button.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    announcementBar: {      id: 'support_us',      content:        'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',      backgroundColor: '#fafbfc',      textColor: '#091E42',      isCloseable: false,    },  },};

Plugins

Our main themes offer additional theme configuration options for Docusaurus core content plugins.

Docs

mdx-code-block

<APITable name="navbar-overview">

Name	Type	Default	Description
`versionPersistence`	`'localStorage' \| 'none'`	`'localStorage'`	Defines the browser persistence of the preferred docs version.
`sidebar.hideable`	`boolean`	`false`	Show a hide button at the bottom of the sidebar.
`sidebar.autoCollapseCategories`	`boolean`	`false`	Automatically collapse all sibling categories of the one you navigate to.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    docs: {      versionPersistence: 'localStorage',      sidebar: {        hideable: false,        autoCollapseCategories: false,      },    },  },};

Blog

mdx-code-block

<APITable name="navbar-overview">

Name	Type	Default	Description
`sidebar.groupByYear`	`boolean`	`true`	Group sidebar blog posts by years.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    blog: {      sidebar: {        groupByYear: true,      },    },  },};

Accepted fields:

mdx-code-block

<APITable name="navbar-overview">

Name	Type	Default	Description
`title`	`string`	`undefined`	Title for the navbar.
`logo`	See below	`undefined`	Customization of the logo object.
`items`	`NavbarItem[]`	`[]`	A list of navbar items. See specification below.
`hideOnScroll`	`boolean`	`false`	Whether the navbar is hidden when the user scrolls down.
`style`	`'primary' \| 'dark'`	Same as theme	Sets the navbar style, ignoring the dark/light theme.

mdx-code-block

</APITable>

The logo can be placed in static folder. Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab.

To improve dark mode support, you can also set a different logo for this mode.

Accepted fields:

mdx-code-block

<APITable name="navbar-logo">

Name	Type	Default	Description
`alt`	`string`	`undefined`	Alt tag for the logo image.
`src`	`string`	Required	URL to the logo image. Base URL is appended by default.
`srcDark`	`string`	`logo.src`	An alternative image URL to use in dark mode.
`href`	`string`	`siteConfig.baseUrl`	Link to navigate to when the logo is clicked.
`width`	`string \| number`	`undefined`	Specifies the `width` attribute.
`height`	`string \| number`	`undefined`	Specifies the `height` attribute.
`target`	`string`	Calculated based on `href` (external links will open in a new tab, all others in the current one).	The `target` attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise.
`className`	`string`	`undefined`	CSS class applied to the image.
`style`	`object`	`undefined`	CSS inline style object. React/JSX flavor, using camelCase properties.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      title: 'Site Title',      logo: {        alt: 'Site Logo',        src: 'img/logo.svg',        srcDark: 'img/logo_dark.svg',        href: 'https://docusaurus.io/',        target: '_self',        width: 32,        height: 32,        className: 'custom-navbar-logo-class',        style: {border: 'solid red'},      },    },  },};

You can add items to the navbar via themeConfig.navbar.items.

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'doc',          position: 'left',          docId: 'introduction',          label: 'Docs',        },        {to: 'blog', label: 'Blog', position: 'left'},        {          type: 'docsVersionDropdown',          position: 'right',        },        {          type: 'localeDropdown',          position: 'right',        },        {          href: 'https://github.com/facebook/docusaurus',          position: 'right',          className: 'header-github-link',          'aria-label': 'GitHub repository',        },      ],    },  },};

The items can have different behaviors based on the type field. The sections below will introduce you to all the types of navbar items available.

By default, Navbar items are regular links (internal or external).

React Router should automatically apply active link styling to links, but you can use activeBasePath in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use activeBaseRegex. activeBaseRegex is a more flexible alternative to activeBasePath and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL.

Outbound (external) links automatically get target="_blank" rel="noopener noreferrer" attributes.

Accepted fields:

mdx-code-block

<APITable name="navbar-link">

Name	Type	Default	Description
`type`	`'default'`	Optional	Sets the type of this item to a link.
`label`	`string`	Required	The name to be shown for this item.
`html`	`string`	Optional	Same as `label`, but renders pure HTML instead of text content.
`to`	`string`	Required	Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value.
`href`	`string`	Required	A full-page navigation, used for navigating outside of the website. Only one of `to` or `href` should be used.
`prependBaseUrlToHref`	`boolean`	`false`	Prepends the baseUrl to `href` values.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`activeBasePath`	`string`	`to` / `href`	To apply the active class styling on all routes starting with this path. This usually isn't necessary.
`activeBaseRegex`	`string`	`undefined`	Alternative to `activeBasePath` if required.
`className`	`string`	`''`	Custom CSS class (for styling any item).

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          to: 'docs/introduction',          // Only one of "to" or "href" should be used          // href: 'https://www.facebook.com',          label: 'Introduction',          // Only one of "label" or "html" should be used          // html: '<b>Introduction</b>'          position: 'left',          activeBaseRegex: 'docs/(next|v8)',          target: '_blank',        },      ],    },  },};

Navbar items of the type dropdown has the additional items field, an inner array of navbar items.

Navbar dropdown items only accept the following "link-like" item types:

Navbar link
Navbar doc link
Navbar docs version
Navbar doc sidebar
Navbar with custom HTML

Note that the dropdown base item is a clickable link as well, so this item can receive any of the props of a plain navbar link.

Accepted fields:

mdx-code-block

<APITable name="navbar-dropdown">

Name	Type	Default	Description
`type`	`'dropdown'`	Optional	Sets the type of this item to a dropdown.
`label`	`string`	Required	The name to be shown for this item.
`items`	`[LinkLikeItem](#navbar-dropdown)[]`	Required	The items to be contained in the dropdown.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'dropdown',          label: 'Community',          position: 'left',          items: [            {              label: 'Facebook',              href: 'https://www.facebook.com',            },            {              type: 'doc',              label: 'Social',              docId: 'social',            },            // ... more items          ],        },      ],    },  },};

If you want to link to a specific doc, this special navbar item type will render the link to the doc of the provided docId. It will get the class navbar__link--active as long as you browse a doc of the same sidebar.

Accepted fields:

mdx-code-block

<APITable name="navbar-doc-link">

Name	Type	Default	Description
`type`	`'doc'`	Required	Sets the type of this item to a doc link.
`docId`	`string`	Required	The ID of the doc that this item links to.
`label`	`string`	`docId`	The name to be shown for this item.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`docsPluginId`	`string`	`'default'`	The ID of the docs plugin that the doc belongs to.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'doc',          position: 'left',          docId: 'introduction',          label: 'Docs',        },      ],    },  },};

You can link a navbar item to the first document link (which can be a doc link or a generated category index) of a given sidebar without having to hardcode a doc ID.

Accepted fields:

mdx-code-block

<APITable name="navbar-doc-sidebar">

Name	Type	Default	Description
`type`	`'docSidebar'`	Required	Sets the type of this navbar item to a sidebar's first document.
`sidebarId`	`string`	Required	The ID of the sidebar that this item is linked to.
`label`	`string`	First document link's sidebar label	The name to be shown for this item.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`docsPluginId`	`string`	`'default'`	The ID of the docs plugin that the sidebar belongs to.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'docSidebar',          position: 'left',          sidebarId: 'api',          label: 'API',        },      ],    },  },};

sidebars.js

export default {  tutorial: [    {      type: 'autogenerated',      dirName: 'guides',    },  ],  api: [    'cli', // The navbar item will be linking to this doc    'docusaurus-core',    {      type: 'autogenerated',      dirName: 'api',    },  ],};

If you use docs with versioning, this special navbar item type that will render a dropdown with all your site's available versions.

The user will be able to switch from one version to another, while staying on the same doc (as long as the doc ID is constant across versions).

Accepted fields:

mdx-code-block

<APITable name="navbar-docs-version-dropdown">

Name	Type	Default	Description
`type`	`'docsVersionDropdown'`	Required	Sets the type of this item to a docs version dropdown.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`dropdownItemsBefore`	`[LinkLikeItem](#navbar-dropdown)[]`	`[]`	Add additional dropdown items at the beginning of the dropdown.
`dropdownItemsAfter`	`[LinkLikeItem](#navbar-dropdown)[]`	`[]`	Add additional dropdown items at the end of the dropdown.
`docsPluginId`	`string`	`'default'`	The ID of the docs plugin that the doc versioning belongs to.
`dropdownActiveClassDisabled`	`boolean`	`false`	Do not add the link active class when browsing docs.
`versions`	`DropdownVersions`	`undefined`	Specify a custom list of versions to include in the dropdown. See the versioning guide for details.

mdx-code-block

</APITable>

Types:

TypeScript

type DropdownVersion = {
  /** Allows you to provide a custom display label for each version. */
  label?: string;
};

type DropdownVersions = string[] | {[versionName: string]: DropdownVersion};

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'docsVersionDropdown',          position: 'left',          dropdownItemsAfter: [{to: '/versions', label: 'All versions'}],          dropdownActiveClassDisabled: true,        },      ],    },  },};

If you use docs with versioning, this special navbar item type will link to the active/browsed version of your doc (depends on the current URL), and fallback to the latest version.

Accepted fields:

mdx-code-block

<APITable name="navbar-docs-version">

Name	Type	Default	Description
`type`	`'docsVersion'`	Required	Sets the type of this item to a doc version link.
`label`	`string`	The active/latest version label.	The name to be shown for this item.
`to`	`string`	The active/latest version.	The internal link that this item points to.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`docsPluginId`	`string`	`'default'`	The ID of the docs plugin that the doc versioning belongs to.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'docsVersion',          position: 'left',          to: '/path',          label: 'label',        },      ],    },  },};

If you use the i18n feature, this special navbar item type will render a dropdown with all your site's available locales.

The user will be able to switch from one locale to another, while staying on the same page.

Accepted fields:

mdx-code-block

<APITable name="navbar-locale-dropdown">

Name	Type	Default	Description
`type`	`'localeDropdown'`	Required	Sets the type of this item to a locale dropdown.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`dropdownItemsBefore`	`[LinkLikeItem](#navbar-dropdown)[]`	`[]`	Add additional dropdown items at the beginning of the dropdown.
`dropdownItemsAfter`	`[LinkLikeItem](#navbar-dropdown)[]`	`[]`	Add additional dropdown items at the end of the dropdown.
`queryString`	`string`	`undefined`	The query string to be appended to the URL.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'localeDropdown',          position: 'left',          dropdownItemsAfter: [            {              to: 'https://my-site.com/help-us-translate',              label: 'Help us translate',            },          ],        },      ],    },  },};

If you use the search, the search bar will be the rightmost element in the navbar.

However, with this special navbar item type, you can change the default location.

mdx-code-block

<APITable name="navbar-search">

Name	Type	Default	Description
`type`	`'search'`	Required	Sets the type of this item to a search bar.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`className`	`string`	/	Custom CSS class for this navbar item.

mdx-code-block

</APITable>

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'search',          position: 'right',        },      ],    },  },};

You can also render your own HTML markup inside a navbar item using this navbar item type.

mdx-code-block

<APITable name="navbar-html">

Name	Type	Default	Description
`type`	`'html'`	Required	Sets the type of this item to a HTML element.
`position`	`'left' \| 'right'`	`'left'`	The side of the navbar this item should appear on.
`className`	`string`	`''`	Custom CSS class for this navbar item.
`value`	`string`	`''`	Custom HTML to be rendered inside this navbar item.

mdx-code-block

</APITable>

docusaurus.config.js

export default {  themeConfig: {    navbar: {      items: [        {          type: 'html',          position: 'right',          value: '<button>Give feedback</button>',        },      ],    },  },};

You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.

docusaurus.config.js

export default {  themeConfig: {    navbar: {      hideOnScroll: true,    },  },};

You can set the static Navbar style without disabling the theme switching ability. The selected style will always apply no matter which theme user have selected.

Currently, there are two possible style options: dark and primary (based on the --ifm-color-primary color). You can see the styles preview in the Infima documentation.

docusaurus.config.js

export default {  themeConfig: {    navbar: {      style: 'primary',    },  },};

CodeBlock

Docusaurus uses Prism React Renderer to highlight code blocks. All configuration are in the prism object.

Accepted fields:

mdx-code-block

<APITable name="codeblock">

Name	Type	Default	Description
`theme`	`PrismTheme`	`palenight`	The Prism theme to use for light-theme code blocks.
`darkTheme`	`PrismTheme`	`palenight`	The Prism theme to use for dark-theme code blocks.
`defaultLanguage`	`string`	`undefined`	The default language to use for code blocks not declaring any explicit language.
`magicComments`	`MagicCommentConfig[]`	see below	The list of magic comments.

mdx-code-block

</APITable>

TypeScript

type MagicCommentConfig = {
  className: string;
  line?: string;
  block?: {start: string; end: string};
};

JavaScript

const defaultMagicComments = [
  {
    className: 'theme-code-block-highlighted-line',
    line: 'highlight-next-line',
    block: {start: 'highlight-start', end: 'highlight-end'},
  },
];

Theme

By default, we use Palenight as syntax highlighting theme. You can specify a custom theme from the list of available themes. You may also use a different syntax highlighting theme when the site is in dark mode.

Example configuration:

docusaurus.config.js

import {themes as prismThemes} from 'prism-react-renderer';export default {  themeConfig: {    prism: {      theme: prismThemes.github,      darkTheme: prismThemes.dracula,    },  },};

Default language

You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid language name must be passed.

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    prism: {      defaultLanguage: 'javascript',    },  },};

You can add logo and a copyright to the footer via themeConfig.footer. Logo can be placed in static folder. Logo URL works in the same way of the navbar logo.

Accepted fields:

mdx-code-block

<APITable name="footer">

Name	Type	Default	Description
`logo`	`Logo`	`undefined`	Customization of the logo object. See Navbar logo for details.
`copyright`	`string`	`undefined`	The copyright message to be displayed at the bottom, also supports custom HTML.
`style`	`'dark' \| 'light'`	`'light'`	The color theme of the footer component.
`links`	`(Column \| FooterLink)[]`	`[]`	The link groups to be present.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    footer: {      logo: {        alt: 'Meta Open Source Logo',        src: 'img/meta_oss_logo.png',        href: 'https://opensource.fb.com',        width: 160,        height: 51,      },      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,    },  },};

You can add links to the footer via themeConfig.footer.links. There are two types of footer configurations: multi-column footers and simple footers.

Multi-column footer links have a title and a list of FooterItems for each column.

mdx-code-block

<APITable name="footer-links">

Name	Type	Default	Description
`title`	`string`	`undefined`	Label of the section of these links.
`items`	`FooterItem[]`	`[]`	Links in this section.

mdx-code-block

</APITable>

Accepted fields of each FooterItem:

mdx-code-block

<APITable name="footer-items">

Name	Type	Default	Description
`label`	`string`	Required	Text to be displayed for this link.
`to`	`string`	Required	Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value.
`href`	`string`	Required	A full-page navigation, used for navigating outside of the website. Only one of `to` or `href` should be used.
`html`	`string`	`undefined`	Renders the HTML pass-through instead of a simple link. In case `html` is used, no other options should be provided.

mdx-code-block

</APITable>

Example multi-column configuration:

docusaurus.config.js

export default {  footer: {    links: [      {        title: 'Docs',        items: [          {            label: 'Style Guide',            to: 'docs/',          },          {            label: 'Second Doc',            to: 'docs/doc2/',          },        ],      },      {        title: 'Community',        items: [          {            label: 'Stack Overflow',            href: 'https://stackoverflow.com/questions/tagged/docusaurus',          },          {            label: 'Discord',            href: 'https://discordapp.com/invite/docusaurus',          },          {            label: 'X',            href: 'https://x.com/docusaurus',          },          {            html: `                <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">                  <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51" />                </a>              `,          },        ],      },    ],  },};

A simple footer just has a list of FooterItems displayed in a row.

Example simple configuration:

docusaurus.config.js

export default {  footer: {    links: [      {        label: 'Stack Overflow',        href: 'https://stackoverflow.com/questions/tagged/docusaurus',      },      {        label: 'Discord',        href: 'https://discordapp.com/invite/docusaurus',      },      {        label: 'X',        href: 'https://x.com/docusaurus',      },      {        html: `            <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">              <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51" />            </a>          `,      },    ],  },};

You can adjust the default table of contents via themeConfig.tableOfContents.

mdx-code-block

<APITable>

Name	Type	Default	Description
`minHeadingLevel`	`number`	`2`	The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value.
`maxHeadingLevel`	`number`	`3`	Max heading level displayed in the TOC. Should be an integer between 2 and 6.

mdx-code-block

</APITable>

Example configuration:

docusaurus.config.js

export default {  themeConfig: {    tableOfContents: {      minHeadingLevel: 2,      maxHeadingLevel: 5,    },  },};

Hooks

`useColorMode`

A React hook to access the color context. This context contains functions for selecting light/dark/system mode and exposes the current color mode and the choice from the user. The color mode values should not be used for dynamic content rendering (see below).

Usage example:

JSX

import {useColorMode} from '@docusaurus/theme-common';const MyColorModeButton = () => {  const {    colorMode, // the "effective" color mode, never null    colorModeChoice, // the color mode chosen by the user, can be null    setColorMode, // set the color mode chosen by the user  } = useColorMode();  return (    <button      onClick={() => {        const nextColorMode = colorModeChoice === 'dark' ? 'light' : 'dark';        setColorMode(nextColorMode);      }}>      Toggle color mode    </button>  );};

Attributes:

colorMode: 'light' | 'dark': The effective color mode currently applied to the UI. It cannot be null.
colorModeChoice: 'light' | 'dark' | null: The color mode explicitly chosen by the user. It can be null if user has not made any choice yet, or if they reset their choice to the system/default value.
setColorMode(colorModeChoice: 'light' | 'dark' | null, options: {persist: boolean}): void: A function to call when the user explicitly chose a color mode. null permits to reset the choice to the system/default value. By default, the choice is persisted in localStorage and restored on page reload, but you can opt out with {persist: false}.

Don't use colorMode and colorModeChoice while rendering React components. Doing so is likely to produce FOUC, layout shifts and React hydration mismatches if you use them to render JSX content dynamically.

However, these values are safe to use after React hydration, in useEffect and event listeners, like in the MyColorModeButton example above.

If you need to render content dynamically depending on the current theme, the only way to avoid FOUC, layout shifts and hydration mismatch is to rely on CSS selectors to render content dynamically, based on the html data attributes that we set before the page displays anything:

HTML

<html data-theme="<light | dark>" data-theme-choice="<light | dark | system>">
  <!-- content -->
</html>

CSS

[data-theme='light']
[data-theme='dark']

[data-theme-choice='light']
[data-theme-choice='dark']
[data-theme-choice='system']

Why are colorMode and colorModeChoice unsafe when rendering?

To understand the problem, you need to understand how React hydration works.

During the static site generation phase, Docusaurus doesn't know what the user color mode choice is, and useColorMode() returns the following static values:

colorMode = themeConfig.colorMode.defaultMode
colorModeChoice = null

During the very first React client-side render (the hydration), React must produce the exact same HTML markup, and will also use these static values.

The correct colorMode and colorModeChoice values will only be provided in the second React render.

Typically, the following component will lead to React hydration mismatches. The label may switch from light to dark while React hydrates, leading to a confusing user experience.

JSX

import {useColorMode} from '@docusaurus/theme-common';

const DisplayCurrentColorMode = () => {
  const {colorMode} = useColorMode();
  return <span>{colorMode}</span>;
};

i18n

Read the i18n introduction first.

Translation files location

Base path: website/i18n/[locale]/docusaurus-theme-[themeName]
Multi-instance path: N/A
JSON files: extracted with docusaurus write-translations
Markdown files: N/A

Example file-system structure

Bash

website/i18n/[locale]/docusaurus-theme-classic
│
│ # translations for the theme
├── navbar.json
└── footer.json

Search documentation

Theme configuration

Common

Color mode

Meta image

Metadata

Announcement bar

Plugins

Docs

Blog

Navbar

Navbar logo

Navbar items

Navbar link

Navbar doc link

Navbar linked to a sidebar

Navbar docs version

Navbar search

Navbar with custom HTML

Auto-hide sticky navbar

Navbar style

CodeBlock

Theme

Default language

Footer

Footer Links

Table of Contents

Hooks

`useColorMode`

i18n

Translation files location

Example file-system structure

Common

Color mode

Meta image

Metadata

Announcement bar

Plugins

Docs

Blog

Navbar

Navbar logo

Navbar items

Navbar link

Navbar dropdown

Navbar doc link

Navbar linked to a sidebar

Navbar docs version dropdown

Navbar docs version

Navbar locale dropdown

Navbar search

Navbar with custom HTML

Auto-hide sticky navbar

Navbar style

CodeBlock

Theme

Default language

Footer

Footer Links

Table of Contents

Hooks

useColorMode

i18n

Translation files location

Example file-system structure

`useColorMode`