Native Docusaurus Features

The theme provides styling for every native Docusaurus element — no configuration required beyond installing the package.

Progress bar

The page-loading progress bar uses the brand color automatically.

Controlled by

--docusaurus-progress-bar-color: #465fff;  /* light */
--docusaurus-progress-bar-color: #7592ff;  /* dark  */

Announcement bar

Add a dismissible banner above the navbar via themeConfig.announcementBar:

docusaurus.config.js

themeConfig: {
  announcementBar: {
    id: 'new-release',
    content: '🎉 v1.1.0 is out — <a href="/changelog">see what\'s new</a>',
    isCloseable: true,
  },
},

The theme styles it with the brand indigo color (dark-friendly).

Breadcrumbs

Automatically styled — active crumb uses brand color, items have a subtle hover background. No configuration needed.

Tabs

npm

npm install cosmos-docusaurus-theme

yarn

yarn add cosmos-docusaurus-theme

pnpm

pnpm add cosmos-docusaurus-theme

Cards

Card title

Cards get a styled border, rounded corners and a hover effect. Use them freely in MDX with <div class="card">.

Another card

Hover me to see the brand-colored border appear.

Tags

docusaurus  css-only  dark-mode  infima

<span class="tag">docusaurus</span>
<span class="tag">css-only</span>

Back-to-top button

Enabled in docusaurus.config.js:

docusaurus.config.js

themeConfig: {
  docs: {
    sidebar: { autoCollapseCategories: true },
  },
}

The button uses the brand indigo color and has a hover state.

Algolia DocSearch

When Algolia is configured, the search modal is fully styled to match the Void/Slate palette — dark modal, brand-colored highlights.

docusaurus.config.js

themeConfig: {
  algolia: {
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_SEARCH_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
  },
},

All --docsearch-* variables are overridden for both light and dark modes.