Getting Started

Cosmos Docusaurus Theme is a CSS-only theme plugin for Docusaurus 3. Aligned with the Rackscope Void/Slate design system — no component swizzling, no JavaScript, just clean CSS.

Installation

npm

npm install cosmos-docusaurus-theme

yarn

yarn add cosmos-docusaurus-theme

pnpm

pnpm add cosmos-docusaurus-theme

Docker

git clone https://github.com/SckyzO/cosmos-docusaurus-theme.git
cd cosmos-docusaurus-theme
docker compose up

Open http://localhost:3000 — the full demo site runs with the theme.

Setup

Register as a Docusaurus theme plugin in docusaurus.config.js:

docusaurus.config.js

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

The CSS is injected automatically via getClientModules(). No customCss entry needed.

Alternative — direct CSS import

theme: {
  customCss: [require.resolve('cosmos-docusaurus-theme/css/theme.css')],
}

Docker

The repository ships a docker-compose.yml for a zero-install preview of the theme with the full demo site.

# Clone and start
git clone https://github.com/SckyzO/cosmos-docusaurus-theme.git
cd cosmos-docusaurus-theme
docker compose up

# Or pull the image directly (once published)
docker run -p 3000:3000 ghcr.io/sckyzo/cosmos-docusaurus-theme:latest

Open http://localhost:3000 — the full component showcase runs instantly.

What's included

Element	Styled
Navbar + toggle button	✅
Sidebar + section labels	✅
Code blocks (all languages)	✅
Admonitions — AlertBanner style	✅
Tables	✅
Tabs + Details/summary	✅
Cards	✅
Tags + Badges	✅
Pagination	✅
Breadcrumbs	✅
Footer	✅
Back-to-top + Progress bar	✅
Algolia DocSearch	✅
Smooth dark/light transition	✅
Scrollbar (4px)	✅

Requirements

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