cosmos-docusaurus-theme

The design system behind Rackscope, packaged for any Docusaurus 3 site.

Live Demo  ·  Releases  ·  npm

---

A CSS-only Docusaurus theme built from the same design system that powers Rackscope. Dark-first, opinionated, pixel-perfect.

• Void dark palette — deep neutral blacks (#030712 / #111827) with indigo accents
• Slate light palette — warm white surfaces with brown text tones, not cold blue-gray
• Outfit display typeface + IBM Plex Mono for code
• Zero JavaScript, no swizzled components — pure CSS override of Docusaurus Infima
• Every native Docusaurus element styled out of the box
• Utility classes for MDX pages: buttons, badges, steps, timeline, check lists

---

Screenshots

Dark mode — Void palette

Light mode — Slate palette

Banners — Dismissible Alert style, semantic icons, full border

See all components live → sckyzo.github.io/cosmos-docusaurus-theme

---

Quick start

npm install cosmos-docusaurus-theme

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

Options

themes: [
  ['cosmos-docusaurus-theme', {
    injectFavicon: false,  // disable cosmos favicon injection (default: true)
  }],
],

Try it instantly with Docker

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

---

What's covered

Native Docusaurus elements

Styled automatically — no configuration needed:

Element	Notes
Navbar — COSMOS wordmark, ghost buttons, | separator	Brand indigo title
Sidebar — icons, sub-menu line, version badge	className: 'sidebar-cat-*' for icons
Breadcrumb — ChevronRight separator, brand hover	Automatic
Tabs — flat underline, brand active	import Tabs from '@theme/Tabs'
Pagination — monospace sublabel, brand hover	Automatic prev / next
Code blocks — all languages, titles	IBM Plex Mono
Banners — Dismissible Alert style, semantic icons	5 types: note / tip / info / warning / danger
Tables — full-width desktop, scroll mobile	Automatic
Cards — rounded-2xl, dark shadow, hover	<div class="card">
Tags	<span class="tag">
Details / summary — accordion style	<details><summary>
TOC — H2/H3 hierarchy + active pill	Right panel
Blockquote — brand left border	> markdown syntax
<kbd> — chip style	<kbd>Ctrl</kbd>
Images — rounded-xl, shadow	
<abbr title> — tooltip on hover	<abbr title="...">
Back-to-top + progress bar	Automatic
Algolia DocSearch	--docsearch-* variables
Local search (easyops-cn)	--search-local-* variables
Announcement bar	themeConfig.announcementBar
Smooth dark/light transition	Automatic

Utility classes

For use in MDX pages (className= in JSX context):

Class	Purpose
.btn .btn-primary .btn-secondary .btn-danger	CTA buttons
.btn-sm .btn-lg	Button sizes
.badge-new .badge-beta .badge-deprecated .badge-experimental	Release lifecycle labels
.method-get/post/put/delete/patch	HTTP method labels
.status-ok/warn/crit/unknown	Operational health labels
ol.steps	Numbered procedure guide
ul.timeline	Version history / changelog
ul.list-check	Feature checklist

---

Sidebar icons

Add className: 'sidebar-cat-*' to any category in sidebars.js:

{
  type: 'category',
  label: 'Getting Started',
  className: 'sidebar-cat-rocket',
  items: ['getting-started'],
}

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

---

Customization

Override any CSS variable in custom.css:

:root {
  --ifm-color-primary: #e11d48;
  --ifm-color-primary-dark: #be123c;
  --ifm-color-primary-darker: #9f1239;
  --ifm-color-primary-darkest: #881337;
  --ifm-color-primary-light: #fb7185;
  --ifm-color-primary-lighter: #fda4af;
  --ifm-color-primary-lightest: #ffe4e6;
}

---

Development

make install         # install devDependencies
make lint            # CSS + JS + Markdown + format + MDX class= check
make security        # npm audit + no-runtime-deps
make demo-build      # build demo static site
make demo-check      # verify 12 key pages exist in build output
make demo-start      # dev server at http://localhost:3000
make docker-up       # demo in Docker at http://localhost:3000

---

License

MIT — © SckyzO