Getting Started

cosmos is a CSS-only theme plugin for Docusaurus 3, aligned with the Rackscope Void/Slate design system. No component swizzling, no JavaScript, pure CSS.

Zero config

Drop it in and every Docusaurus native element is styled automatically. No customCss entry needed.

Installation

npm
yarn
pnpm
Docker

npm install cosmos-docusaurus-theme

yarn add cosmos-docusaurus-theme

pnpm add cosmos-docusaurus-theme

git clone https://github.com/SckyzO/cosmos-docusaurus-theme.git
cd cosmos-docusaurus-theme
docker compose up
# → http://localhost:3000

Setup

Add the theme to the themes array in docusaurus.config.js:

docusaurus.config.js
export default {
  themes: ['cosmos-docusaurus-theme'],
  themeConfig: {
    colorMode: {
      defaultMode: 'dark',
      respectPrefersColorScheme: true,
    },
  },
};

Alternative: direct CSS import

If you prefer to import the CSS manually instead of using the theme plugin:

presets: [['classic', { theme: { customCss: ['cosmos-docusaurus-theme/css/theme.css'] } }]]

What's included

Native Docusaurus elements

Everything here is styled automatically, with no classes or configuration required:

Element	Notes
Navbar: ghost buttons, brand, toggle	COSMOS wordmark · brand indigo title
Sidebar: icons, sub-menu line, version badge	`className: 'sidebar-cat-*'` for icons
Breadcrumb: ChevronRight separator	Automatic, brand hover
Tabs: flat underline, brand active	`import Tabs from '@theme/Tabs'`
Pagination: sublabel monospace, brand hover	Automatic prev / next
Code blocks: all languages, titles	Line highlighting supported
Admonitions: semantic icons	5 types: note / tip / info / warning / danger
Tables: full-width desktop, scroll mobile	Automatic
Cards: rounded-2xl, dark shadow, hover	`<div className="card">`
Tags: pill style, brand hover	`<span className="tag">`
Details / summary: accordion style	`<details><summary>`
TOC: active pill, H2/H3 hierarchy	Right panel
Blockquote: brand left border	`>` markdown syntax
`<kbd>`: chip style, 3D border	`<kbd>Ctrl</kbd>`
Images: rounded-xl, shadow	`![alt](src)` in markdown
`<abbr title>`: tooltip on hover	`<abbr title="...">`
Back-to-top + progress bar	Automatic
Algolia DocSearch	`--docsearch-*` variables overridden
Local search (easyops-cn)	`--search-local-*` variables overridden

Utility classes (MDX)

Optional classes for MDX pages. Full reference at Utility Classes:

Class	Purpose
`.btn` `.btn-primary` `.btn-secondary` `.btn-danger`	CTA buttons in docs pages
`.badge-new` `.badge-beta` `.badge-deprecated` `.badge-experimental`	Release lifecycle labels
`.method-get/post/put/delete/patch`	HTTP method labels for API docs
`.status-ok/warn/crit/unknown`	Operational health indicators
`.steps` on `<ol>`	Numbered procedure guide
`.timeline` on `<ul>`	Version history / changelog
`.list-check` on `<ul>`	Feature checklist

Requirements

Docusaurus 3.0+ Required
Node.js 18+
Docker (optional) for a zero-install preview

note

CSS-only: no React components, no swizzling, no JavaScript runtime.

Installation​

Setup​

What's included​

Native Docusaurus elements​

Utility classes (MDX)​

Requirements​