Skip to main content

What's Styled

Native Docusaurus elements the theme styles automatically, with no configuration needed.

The navbar gives the right-side links and the color-mode toggle a ghost button style. The brand area has a thin vertical 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 suffixes (each used as sidebar-cat-<name>): 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-colored hover, and a muted inactive trail, applied automatically.

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. 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',
  },
},