Version: 2.0.0-alpha.39

@docusaurus/theme-classic

⚠️ This section is a work in progress.

Common

Dark mode

To remove the ability to switch on dark mode, there is an option themeConfig.disableDarkMode, which is implicitly set to false.

// docusaurus.config.js
module.exports = {
...
themeConfig: {
disableDarkMode: false,
...
},
};

Meta image

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

// docusaurus.config.js
module.exports = {
...
themeConfig: {
/**
* Relative to your site's "static" directory.
* Cannot be SVGs. Can be external URLs too.
*/
image: 'img/docusaurus.png',
...
},
}

Navbar

Navbar Title & Logo

You can add a logo and title to the navbar via themeConfig.navbar. Logo can be placed in static folder.

// docusaurus.config.js
module.exports = {
...
themeConfig: {
navbar: {
title: 'Site Title',
logo: {
alt: 'Site Logo',
src: 'img/logo.svg',
},
},
...
},
}

Navbar Links

You can add links to the navbar via themeConfig.navbar.links:

// docusaurus/config.js
module.exports = {
...
themeConfig: {
navbar: {
links: [
{
to: 'docs/docusaurus.config.js',
label: 'docusaurus.config.js',
position: 'left',
},
// ... other links
],
},
...
},
}

Outbound links automatically get target="_blank" rel="noopener noreferrer".

Footer

CodeBlock

Docusaurus uses Prism React Renderer to highlight code blocks.

Theme

By default, we use Palenight as syntax highlighting theme. You can specify a custom theme from the list of available themes, e.g.:

// docusaurus/config.js
module.exports = {
themeConfig: {
prism: {
theme: require('prism-react-renderer/themes/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, e.g.:

// docusaurus/config.js
module.exports = {
...
themeConfig: {
prism: {
defaultLanguage: 'javascript',
},
...
},
};
Last updated on by Endi