This section is a work in progress.
Color mode - dark 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 with the following configuration:
respectPrefersColorScheme: true, the
defaultMode is overridden by user system preferences.
If you only want to support one color mode, you likely want to ignore user system preferences.
You can configure a default image that will be used for your meta tag, in particular
You can configure additional html metadatas (and override existing ones).
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 dismissable panel above the navbar.
React hook to access theme context. This context contains functions for setting light and dark mode and boolean property, indicating which mode is currently in use.
The component calling
useThemeContext must be a child of the
Navbar title & logo
You can add a logo and title to the navbar via
themeConfig.navbar. 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.
You can add items to the navbar via
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 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.
Navbar items can also be dropdown items by specifying the
items, an inner array of navbar items.
Navbar docs version dropdown
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).
Navbar docs version
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.
Auto-hide sticky navbar
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.
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:
primary (based on the
--ifm-color-primary color). You can see the styles preview in the Infima documentation.
Docusaurus uses Prism React Renderer to highlight code blocks.
By default, we use Palenight as syntax highlighting theme. You can specify a custom theme from the list of available themes. If you want to use a different syntax highlighting theme when the site is in dark mode, you may also do so.
If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the docs for guidance.
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, e.g.: