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 | ![alt](src) | | <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