2.6 KiB
| id | title |
|---|---|
| using-themes | Using Themes |
In Docusaurus 2, themes are there to finish the build step of your site by supplying the components used by your site, your plugins, and the themes themselves. Furthermore, you may easily swap out components from themes by swizzling them with your own components.
In this document, we discuss the basic usages of themes. You will learn how to use a theme and how to swizzle a component. To grasp a deeper understanding of themes, and / or to learn how you may implement your own themes, check out our advanced guide on themes.
Using themes
To use themes, specify the themes in your docusaurus.config.js. You may use multiple themes:
// docusaurus.config.js
module.exports = {
themes: ['@docusaurus/theme-classic', '@docusaurus/theme-live-codeblock'],
};
Swizzling theme components
Themes are all about components. Docusaurus Themes' components are designed to be easily replaceable. We created a command for you to replace the components called swizzle.
To swizzle a component for a theme, run the following command in your doc site:
$ docusaurus swizzle [theme name] [component name]
As an example, to swizzle the <Footer /> component in @docusaurus/theme-classic for your site, run:
$ npm swizzle @docusaurus/theme-classic Footer
This will copy the current <Footer /> component used by the theme to a src/theme/Footer directory under the root of your site, which is where Docusaurus will look for swizzled components. Docusaurus will then use swizzled component in place of the original one from the theme.
Note: You need to restart your dev server for Docusaurus to pick up the new component.