Aller au contenu principal

Theme

Light/Dark Mode

docusaurus.config.js
const config = {
themeConfig: {
colorMode: {
defaultMode: "light",
disableSwitch: false,
respectPrefersColorScheme: true,
},
},
};

Code Block Theme

docusaurus.config.js
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

Custom CSS

See src/css/custom.scss

Theme Appearances

Theme Profiles are WIP. To change to a different theme profile:

src/css/custom.scss
// Change Theme Appearance Profile
@import "themes/pure";

To edit an existing theme, create a file without the leading _.

E.g.

  • cp ./src/css/themes/_theme_base.scss ./src/css/themes/theme_base.scss
  • cp ./src/css/themes/_pure.scss ./src/css/themes/pure.scss
  • cp ./src/css/themes/_classic.scss ./src/css/themes/classic.scss

Pure (default)

To make a cleaner appearance for Docusaurus.

Since Docusaurus is currently in beta, this theme is also WIP and will keep updating.

src/css/custom.scss
// Change Theme Appearance Profile
@import "themes/pure";

Classic

Minimal change for Docusaurus Classic Theme

src/css/custom.scss
// Change Theme Appearance Profile
@import "themes/classic";