Tabs

Flat underline style: a border-bottom indicator, brand color on the active tab, no background fill.

Package manager

npm

npm install cosmos-docusaurus-theme

yarn

yarn add cosmos-docusaurus-theme

pnpm

pnpm add cosmos-docusaurus-theme

Dark / light palette reference

Void (dark)

The Void palette uses Tailwind gray-950/900/800 blacks, with no blue tint.

--ifm-background-color:         #030712; /* gray-950 */
--ifm-background-surface-color: #111827; /* gray-900 */
--ifm-font-color-base:          #e5e5e5;
--ifm-toc-border-color:         #1f2937; /* gray-800 */

Slate (light)

The Slate palette uses gray-50/white backgrounds with warm brown text tones.

--ifm-background-color:         #f9fafb; /* gray-50 */
--ifm-background-surface-color: #ffffff;
--ifm-font-color-base:          #1a1714; /* warm near-black */
--ifm-toc-border-color:         #e5e7eb; /* gray-200 */

Brand

The brand color is indigo #465fff, with the lighter variant #7592ff in dark mode.

--ifm-color-primary:       #465fff; /* light mode */
--ifm-color-primary:       #7592ff; /* dark mode  */

With code comparison

React

// docusaurus.config.js
export default {
  themes: ['cosmos-docusaurus-theme'],
};

Vue / Vuepress

// Not applicable: cosmos-docusaurus-theme is Docusaurus-specific.
// For VitePress, use the raw CSS import:
import 'cosmos-docusaurus-theme/css/theme.css';

Synced tabs

Tabs with the same groupId stay in sync across all instances on the page.

React

Synced with the tab above: clicking Vue there also selects it here.

Vue / Vuepress

Both tab groups switch together when groupId matches.