Skip to main content

What's Styled

Every native Docusaurus element covered by the theme — applied automatically, no configuration needed.

The navbar uses a ghost button style for all right-side items. The brand area has a | separator and the site title renders as a wordmark.

Key CSS variables:

--ifm-navbar-height:           72px;
--ifm-navbar-link-color:       /* warm dark / neutral light */
--ifm-navbar-link-hover-color: #465fff;

Category icons via className in sidebars.js:

sidebars.js
{
  type: 'category',
  label: 'Getting Started',
  className: 'sidebar-cat-rocket',   // ← adds Lucide rocket icon
  items: ['getting-started'],
}

Available icon classes: rocket monitor pencil puzzle sliders folder server database layers grid code

The sidebar also shows a version badge pinned at the bottom (reads from package.json automatically via injectHtmlTags()).

ChevronRight separator, brand hover, muted inactive trail — automatic.

Home › Documentation › Getting Started

Tabs​

Deep neutral blacks — Tailwind gray-950/900/800, no blue tint.

--ifm-background-color: #030712;         /* gray-950 */
--ifm-background-surface-color: #111827; /* gray-900 */

Admonitions​

Five types — Toast Showcase style: icon pinned left, semantic title, muted body.

note

Neutral context — supplementary information that's good to know.

tip

Best practice, shortcut, or recommended approach.

info

Contextual guidance or clarification.

warning

May cause unexpected behavior or data loss if ignored.

danger

Destructive, irreversible, or security-critical operation.

Cards​

Styled card

Border, border-radius: 16px, dark shadow, brand border on hover.

<div class="card">Your content</div>

Tags​

docusaurus  css-only  dark-first  void-palette

<span class="tag">docusaurus</span>

Details / Accordion​

How does the sidebar version badge work?

The injectHtmlTags() lifecycle hook reads version from package.json and injects:

<style>:root { --cosmos-version: "cosmos v2.x.x"; }</style>

The sidebar ::after pseudo-element uses content: var(--cosmos-version).

Keyboard keys​

Press Ctrl + K to open search. Press Cmd + Shift + P for the command palette.

Blockquote​

Use > markdown syntax for pull-quotes and context notes. The left border uses the brand indigo accent.

Progress bar & announcement bar​

docusaurus.config.js
themeConfig: {
  announcementBar: {
    id: 'v2',
    content: 'cosmos v2.1.0 is out — <a href="/changelog">see what\'s new</a>',
    isCloseable: true,
  },
},

The progress bar color is controlled by --docusaurus-progress-bar-color (set to brand indigo automatically).

Algolia DocSearch​

All --docsearch-* variables are overridden for both Void (dark) and Slate (light). No extra configuration needed.

docusaurus.config.js
themeConfig: {
  algolia: {
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_SEARCH_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
  },
},